CASE STUDY
Transforming
a Data-Heavy Oilfield SaaS into a Scalable, User-Centered Product
MY ROLE
Senior UX/UI Engineer
UX / UI
Design System
Web Development
CLIENT
STEM Software
YEAR
2021-2022
WEBSITE
The project was a large-scale SaaS platform built for real-time monitoring of oil production sites across the United States. Thousands of pumpjacks, tanks, sensors, and remote cameras sent continuous IoT data to the system every few seconds, and clients included operators working with major U.S. oil companies such as ExxonMobil, Chevron, ConocoPhillips, Marathon Oil, and EOG Resources. The platform needed to display massive amounts of fast-changing telemetry while staying simple, reliable, and easy to use for field operators, engineers, and managers.
I joined the team as a Senior UX/UI Engineer during an active growth stage. My role combined UX research, interaction design, and hands-on UI engineering. I analyzed user workflows, created dashboards and prototypes, improved the information structure, and expanded the design system. At the same time, I contributed directly to the frontend, implementing new components and shaping the UI architecture to handle large-scale, real-time data without performance issues.
The platform offered mission-critical features: live production dashboards, tank-level monitoring, equipment status views, automated alerts, a nationwide interactive map, live video monitoring, and a flexible reporting engine with both predefined and fully custom reports. Each feature required clear data communication, strong visual hierarchy, and dependable behavior under heavy load. This case highlights my ability to build scalable interfaces for complex SaaS products while working across both design and engineering responsibilities.
Challenges
When I joined the project, the SaaS platform was expanding quickly and needed clearer structure, consistent UI patterns, and a smoother experience for different user groups. The largest challenge came from handling massive real-time telemetry. Thousands of oil sites sent new data every few seconds, and the interface had to present fast-changing information without causing overload. Operators, engineers, and managers required different levels of detail, so dashboard design and data hierarchy became especially difficult.
The platform also lacked a unified design system. Rapid growth had created inconsistent components, duplicated logic, and unpredictable visual behavior. This made the product harder to use and slowed development, especially when introducing new features that depended on stable UI foundations. Bringing consistency to the interface meant standardizing components and ensuring they remained reliable under continuous data updates.
Alerts were another major challenge. Users received too many irrelevant notifications while missing important ones, which created operational risks. The alert model needed new structure, clearer priorities, and more predictable delivery.
The reporting experience was also limited. Clients wanted flexible, customizable reports, but the existing tools were fragmented and difficult to navigate.
Finally, the live video module required a simpler and faster interface that could support multiple cameras, slow rural networks, and large archives. Addressing all of this required a careful mix of UX strategy, system thinking, and hands-on UI engineering.
Solution
I started by analyzing user roles and real workflows to understand how operators, engineers, and managers used the platform under constant real-time data load. Based on this research, I redesigned dashboards, clarified navigation, and restructured complex data views to reduce cognitive overload and improve clarity during fast decision-making. I also created a scalable design system with consistent components for charts, tables, alerts, and map elements, ensuring they behaved predictably under continuous updates. Many of these components were implemented directly in the frontend, which improved performance and accelerated future development.
The alerting system required a full overhaul, so I introduced clear severity levels, smarter grouping, and a unified alert center with intuitive filtering. This cut down noise and ensured critical events were visible immediately. For the interactive map, I redesigned markers, status states, and quick-view panels, making it easier to manage thousands of sites across the country and quickly drill into important details. I also improved the reporting experience by splitting it into predefined reports and a flexible custom builder, allowing advanced users to create detailed analyses without developer involvement.
The video monitoring module was redesigned with cleaner controls, better multi-camera layouts, and a smoother flow between live feeds and recorded footage. Across all features, I contributed directly to the UI architecture using React and Next.js, ensuring that the design system aligned with real-time data behavior. This hybrid approach strengthened the platform’s stability, improved usability, and created UI foundations that could scale as the product continued to grow.
achievements
