Skip to content

Pumpchecker

Designing a monitoring system to provide clearer, more actionable visualisations of oil production data

Overview

“Unlock the full potential of your oil and gas wells with Pump Checker®. Imagine having all the critical information you need to optimize your production in one intuitive system. No more scattered data or endless spreadsheets.”

Alperform hired me to rejuvenate their main product called Pumpchecker, an oil production dashboard where managers and engineers could quickly view production levels and diagnose faults from one location. Their current design was suffering from disjointed styling and consistency and required an overhaul.

I was responsible for requirement gathering, researching user pain points, wireframing and creating clickable prototypes. Upon competition of the work, I delivered the updated prototypes to the development team.

My tasks
UX Research
UI Design
Design system

The team
1x Product designer
1x Product manager
4x Web developers

Pumpchecker2

The Challenge

Customers were very used to using the old application and we needed to keep similar colour choice and locations of key filtering functionality in order for a smooth transition. The application was to be designed for desktop and tablet use only, as the development team had a requirement to use certain data visualsation frameworks that would only work for larger devices. 

The main deliverables of the project were a new style guide for use across the whole application, to design a new global sidebar that would allow quick access to well data and filter results based on well status. These changes had to conform to Bootstrap 5 as this was the development team choice of frontend framework.

Once the design had been completed and signed off, I was also responsible for developing static files in HTML, CSS and Bootstrap 5 to hand over to the development team.

Research

To improve my industry knowledge, I initially did some research on the business sector so I could understand their needs in more detail and immerse myself in what customers required, what their jobs entailed, common pain points and expectations. 

I conducted multiple in-person and virtual workshops with the product manager, senior management and development team to gain a better understanding of their USP and what the legacy application achieved for customers. I was fortunate that the CEO had decades of experience working alongside customers in the industry and his insight was incredibly useful.

Sitemap

To dissolve any bias from the management team I was keen to speak to customers directly, to gain an accurate assessment of requirements from all parties. Key customers were very responsive to questionnaire's that I sent out.

After this, I focused on information architecture, mapping out the sitemap and user flows of the technical dashboard screens in current use to help me organise and structure the application. I also created personas of typical customers based on my customer and stakeholder research.

User journey map - Finding test history
User journey map - Finding test history

Ideate

Using the research data I had collected, I proceeded to wireframe options for the main dashboard screen and sidebar. The well list was a challenging piece of work which took many iterations to complete, as I needed to include many filtering options in a restricted space. I ended up using a collapsible accordion layout, where I could hide the less used filters to keep the interface clean. I also used popup sections for the larger filtering options. 

Wireframing the main dashboard
Wireframing the main dashboard
Sidebar well list and filtering options, design iterations

I also spent a lot of time creating the design system which would cover the majority of components that were used across the application. This included panels, tables, forms and actions. I also made sure that the visuals could be built in Bootstrap 5 and fit the clients' visualisation framework requirements.

Styleguide

Prototype

Once I had the design system and wireframes signed off, I proceeded to create prototypes in Figma for the key pages that required immediate attention. This allowed the development team to start work early while I continued on the secondary and tertiary pages.

Group 974
Login screen options
Login screen options

Conclusion

The project took around three months to complete. Development of the application is still ongoing but should be live by the end of the year. I found designing around large amounts of data and scientific terminology to be an enjoyable challenge, and I learnt a lot about managing huge data sets and administration screens.

I worked hard to design a clean useable interface while still keeping the legacy functionality that customers expected.

Let's connect

If you'd like to have a conversation about your upcoming projects or need ongoing support, I'm available to chat about new opportunities. Feel free to reach out to me directly via email or connect with me on LinkedIn.