UI DESIGn

concho well maintenance app

Problem

Concho Resources, a petroleum company based in Midland, Texas, needed a mobile app to support its petroleum technicians working in remote areas of West Texas. Many wells were located in regions without cell coverage, forcing technicians to drive to areas with service to access the web platform and send or receive updates. This process was inefficient and time consuming, impacting productivity.

goal

The app needed to consolidate well information, provide real-time updates when possible, and function seamlessly offline. Additionally, while a prototype had been developed, the client was not fully satisfied with its design and usability. They sought a more polished and visually appealing solution to improve adoption among technicians.

My Role

As the UI designer, I participated in on-site meetings to understand Concho’s workflows and the specific challenges technicians faced. My focus was on refining the user interface to align with Concho’s brand standards while ensuring a seamless and intuitive experience, making the app more efficient and user-friendly in the field.

Design Approach

Since this was an existing product with its core interactions already defined, my role was focused on elevating the user interface. My main goals were to bring clear hierarchy to the information presented, simplify layouts, and prioritize the critical details technicians needed in the field. Each screen was refined to make content easier to follow and more visually balanced, ensuring that the most important information stood out at a glance.

By aligning the app with Concho’s brand standards and cleaning up the overall design, I created a more intuitive and visually cohesive experience that supported technicians’ workflows without altering the established functionality.

BEFORE AND AFTER

The following examples highlight some of the key improvements I introduced. While these are not all of the screens I worked on, they represent the approach I consistently applied across the app.

Well list screen

On the Well List screen, my goal was to reduce unnecessary visual weight and present information in a clearer, more functional way. The original layout gave disproportionate space to the production percentage and used arrows that were redundant, since the green or red color already communicated performance status. I transformed this by adjusting hierarchy and removing clutter.

The well icon, which consumed valuable space without adding meaning, was replaced with a status icon to indicate whether a well was operational, offline, or required attention with a warning marker.

To further improve readability, I established a clear font hierarchy that emphasized the well’s name, preventing it from blending into secondary details such as type, location, and unique code. These changes allowed technicians to scan the list more efficiently and focus immediately on critical information.

well details Screen

On the Well Details screen, I prioritized the visibility of critical well information, which had previously been cluttered and difficult to access at the top of the layout. The original design used small dots as scroll indicators to switch between production, jobs, and downtime, leaving technicians unsure of what information they were viewing. I redesigned this interaction by introducing labeled tabs, making each category explicitly clear and allowing users to jump directly to the data they needed without unnecessary scrolling. This reduced clutter, improved navigation, and ensured that technicians could quickly access the right information. Overall, the redesign created a cleaner, more structured experience that made complex well data easier to understand and act upon.

menu screen

Previously, the company logo occupied too much space, limiting visibility of the available features. I shifted focus to the menu options themselves, giving them greater prominence to help technicians quickly access core functions. To improve navigation, I introduced an active state indicator (highlighting the current section with a distinct color) so users always know where they are within the app. I also integrated the sync status directly into the menu, allowing technicians to check when data was last updated without needing to navigate to a separate screen—reducing unnecessary taps.

Unified iPad Interface

When I approached the iPad design, I wanted to take full advantage of the larger screen size to simplify how technicians accessed information. On smaller devices, the list and map views had to be separated, forcing users to toggle between them. I saw an opportunity to merge these into a single interface on the iPad, giving users the ability to see well details alongside their locations in real time. This integration not only eliminated extra navigation steps but also made it easier for technicians to cross-reference data and make decisions more quickly in the field. By designing the iPad app from the ground up, I was able to create a tool that felt both intuitive and powerful, tailored specifically to the needs of users working with complex well data.

Outcome

The mobile and iPad apps gave technicians and operators a clear, easy-to-use tool for managing well information. By simplifying navigation, presenting data clearly, and reducing clutter, users could quickly find and understand critical details. Together, they created a reliable and intuitive tool that supports technicians in the field at all times.

Previous
Previous

UI/UX Design: DC DMV Mobile App

Next
Next

UI/UX Design: TDECU Banking App