The Challenge
Our mighty cross-functional team of 4 designers was tasked with creating a desktop interface that allowed onsite engineers the ability to monitor real-time live measurements, data, and projections for fracturing jobs.
I iterated on a wide range of features for the MVP, (including but not limited to Navigation Models, Menus, Modals, Onboarding, Project Overview, Adding Events). Documented use cases through detailed flows and communicated design requirements for development. I extended the visual design from a tearsheet, to establishing a comprehensive design system while updating and maintaining the library on a sprint basis.
Agency
Frog Design
Timeline
13 weeks, Spring 2020
Field Immersion
To better understand the needs of the onsite engineers, the team completed validation rounds in the field. We assessed the current tool alongside our client team which highlighted a few key needs as we approached the design.
Inside the van / Wellpad Visualization
Improve Readability & Scanability
Graph keys were hidden behind obscure menus, making it difficult for the user to identify what data points they are viewing. On treatment data, the legend, labels, and event markers were placed above the incoming data, which makes readability more difficult.
Surface Relevant Actions
Event markers represent when a notable action has occurred onsite, which the user can then provide context for. That necessary workflow was conflated, hidden, and difficult to access.
Simplify Visual Styles
We needed a way to communicate complex and visually dense information in a manner that meets accessibility guidelines as it relates to contrast and visibility.
Previous Prototype: Stage flow Allocation / Well Interference/ Manage Projects
Exploring Data Plots
I considered how the data plots were structured in the active stage. Treatment data and Stage Flow Allocation had a larger fraction of screen space because they were the primary data plots.
I explored multiple navigational options for the right-hand plots, ultimately landing on a scroll interaction.
I explored multiple navigational options for the right-hand plots, ultimately landing on a scroll interaction.
Building a scalable foundation
Because the tool is intended for heavy use, I focused on segmenting the interface to promote the hierarchy of associated tasks.
Surfacing Contextual Information
Each plot has a header which creates a dedicated focus for the user to surface controls, legends, axis timeline, and events.
Draggable Plots
Exploring interactive containers as a way for the users to customize their workflow. This was not in scope for MVP build, still designed for this use case.
Split Functions
Separating the read-only elements at the top allows the user to focus the incoming interactive live data on the largest portion of the screen.
Stage Flow Allocation Plot
When designing the data visualizations, having accurate data points greatly assisted in the decision-making process. We ultimately chose the bottom right option because the shape and color provided the most contrast, and was the most familiar to expected behavior.
Explorations on shape, color, lineweight for stage flow data visualization treatment.
Stage flow allocation across clusters.
I accounted for edge cases to stress test the design and ensure the stages are visible and scalable for the users.
Final Design Decisions for Active Stage
Treatment Data, Timeline, and Events
A separate timeline ticker allowed us to simplify the events and place them directly on the timeline.
Color
Data reads as the default blue which allows more focus us leeway to explore more pertinent treatments for complex plots like treatment data and well interference.
Active Stage
Multi-well view
Project Overview W 45
Delivery: Building an Expansive Design System
I initially built a foundational component library at the program onset. As the program progressed I populated the library on a sprint basis, ensuring that the naming hierarchy and organization were streamlined for a more scalable workflow.
The component library allowed us to easily update design work when there were unexpected changes and keep consistency across the team. Creating a detailed library was not a requirement, but it made our work much more efficient and it eventually became a valuable deliverable to the client.
I defined the framework for clusters so the developers know when to map the color to a defined value range.
I documented around 500 components total, ranging from a robust icon system, type styles, color, form fields, inputs, hovers, tab states, and many more.
Global Styles
Takeaways and Learnings
Importance of Modular Systems
When designing, I used the atomic framework to build components down to the smallest element. I also implemented more specific naming hierarchies for the components to reduce workaround and created components the same container size for ease of export and design workflow.
Familiarity is Key
When approaching a redesign, ensure to not overwhelm the user with too many changes or it may disrupt their adoption of the tools. Therefore, we made the decision to keep colors the same/as close to industry standards as possible.
Predict Edge Cases
Incoming data inputs will always vary greatly, therefore I accounted for the least/most extreme cases so that I am designing with predictability and accommodating the user throughout their workflows.
Power of Teams
With a technical subject, an all-women team provided a level of support and camaraderie that is very empowering.
Outcomes
Although it was the fossil fuels industry, our work allowed the experience to be safer in the future and opened a pathway for more product opportunities from the client. In our 13 weeks, we ultimately created 367 system screens and 492 components. During the soft launch, onsite engineering teams have seen 30% improvement in cluster uniformity and a 20% production uplift. Our lean team of 4 designers won an internal "Best in Internal Product Delivery" award for our successful project shipment.
Team
Esther, Visual Designer
Sam, Interaction Designer
Tori, Program Manager
Breyna, Design Director