Dashboard background
Enterprise Products · Houston, TX · UX Case Study

Dashboard
Experience &
Design System

Redesigning a mission-critical oil & gas enterprise platform to reduce friction, standardize patterns, and scale with a cohesive design system.

Enterprise UX Design Systems Senior UX Designer B2B · Oil & Gas Houston, TX
Scroll
Role
Senior UX Designer — dashboard experience owner & design system co-lead
Team
1 PM, 2 Senior UX Designers + product & engineering collaboration
Scope
Global dashboard patterns, search, filtering, contracts, fees, pricing, design system
Outcome
Reduced friction and cognitive load, standardized reusable patterns, scalable design system
01 · Product & Context

The Product

Enterprise Products is a major oil & gas company in the United States. The EP platform is a mission-critical web application used by internal teams to manage contracts, nominations, orders, tickets, distribution, invoicing, and complex pricing and fee structures. The dashboard serves as the entry point into this ecosystem, where users search, filter, inspect, and edit high-value data every day.

The Challenge

Over time, the dashboard had accumulated inconsistent UI patterns, a messy visual hierarchy, and weak system feedback. Users relied on workarounds such as opening multiple browser tabs, fighting with filters, and guessing how sorting behaved. These issues slowed them down and increased the risk of mistakes in a highly regulated, high-stakes environment.

EP ENTERPRISE PRODUCTS Estream Platform
EP Platform — Estream Dashboard
Filter UX issues
Multi-tab workarounds
02
Problem & Objectives
Deconstructing the friction points across the platform
The Problem

Fragmented UX in a
High-Stakes Environment

Users struggled to perform core tasks — searching contracts, filtering results, editing details — without getting lost. Navigation felt clunky, components behaved inconsistently, and the system offered little feedback or guidance. The result was a fragmented experience that made critical workflows slower and more error-prone than necessary.

  • Messy visual hierarchy made it hard to scan tables, details, and forms to understand context quickly
  • Inconsistent behavior across filters, grids, and edit modes forced users to relearn the UI in each module
  • Multiple browser tabs became the workaround for viewing and editing simultaneously, increasing cognitive load
  • Sorting and filter states were invisible — users couldn't tell what was applied or how to reset
  • No saved search criteria forced users to re-configure filters repeatedly throughout their workday
PAIN POINT MAP Search Confusing filters Results Grid Invisible sort state Details Mixed edit states ↻ Open in new tab USER WORKAROUNDS • Multiple open tabs • Re-configure filters daily • Right-click → open new window

Project Goals

UX Goals
  • Clarify the dashboard's visual hierarchy so users can quickly understand where they are and what they can do
  • Standardize core patterns — search, filtering, results, details, editing — so they behave consistently across all modules
  • Reduce friction from multi-tab workarounds and clumsy interactions with simpler, task-focused flows
Product & Business Goals
  • Improve efficiency for project managers and super users working daily with complex contracts and fee structures
  • Create a cohesive design system that makes future features faster and cheaper to design and build
  • Align the platform UI with enterprise-grade expectations without disrupting existing critical workflows overnight
03
My Role & Team
Senior UX Designer — dashboard patterns & design system
My role & the team

Who Did
What

I joined the project as a Senior UX Designer focused on the dashboard experience. I co-led the redesign of the main dashboard patterns — from search and filtering to tables, detail views, and editing flows — and helped define the foundations of the new design system that would support the platform going forward.

The core team consisted of one Project Manager and two Senior UX Designers, working closely with stakeholders and super users on the client side. We collaborated with product and engineering to ensure the proposed patterns were feasible, testable, and scalable across the different EP platform modules.

Xavi Cabrera
Senior UX Designer
Project Manager
Coordination & planning
Senior UX Designer
Co-lead, patterns
EP Stakeholders
Client side
Super Users
Research partners
Engineering
Feasibility
04
Process Overview
Research-driven and iterative, anchored in real user behavior
Process at a glance

The Road
We Took

We followed a research-driven, iterative process: understanding context with stakeholders, interviewing super users onsite in Houston, auditing the existing UX, then moving into wireframes, testing, and final design and design system work.

01
Understand
Stakeholder & super-user alignment. Mapping flows across all modules.
02
Interviews
In-person sessions in Houston. Observed real workflows and frustrations.
03
UX Audit
Structured evaluation of key patterns: search, results, details, edit.
04
Wireframes
Figma explorations. Iterative testing with stakeholders and super users.
05
Final Design
Validated UI and interaction patterns. Visual system applied.
06
Design System
Components, tokens, and Figma libraries for future-proofing.
01
Understand
Stakeholder alignment & super-user context
Phase 01 · Understand

Stakeholder
Alignment

We began with remote and onsite meetings with stakeholders and super users to understand the platform's role in their daily work. These sessions surfaced which modules — contracts, nominations, orders, tickets, distribution, invoices — were most critical and how the dashboard anchored their workflows.

  • Each module shared similar patterns (search, results grid, details, editing) but implemented differently, causing fragmentation
  • Permissions and roles heavily influenced what users could see or edit, but the UI didn't make those constraints obvious
  • Tribal knowledge dependency — users felt they needed insider knowledge to navigate effectively, not just the UI
"I know how to get there. But a new team member? They're lost for weeks."
— EP Super User, Houston session
MODULE MAP Contracts Nominations Orders Tickets Distribution Invoices SHARED CORE PATTERN Search → Results → Details → Edit ⚠ Implemented differently in each module ROLE PERMISSIONS Some users: view only Super users: search + edit + manage fees
02
User Interviews — Houston
In-person sessions with super users at Enterprise Products HQ
Phase 02 · User interviews

On the Ground
in Houston

To go beyond assumptions, we conducted in-person interviews with super users at Enterprise Products' headquarters in Houston. We observed how they navigated the dashboard, what shortcuts they had invented, and where they hesitated or got frustrated in real workflows.

  • Multiple browser tabs — users habitually right-clicked grid links to open details in new tabs so they wouldn't lose their search context
  • Filter pain — the filter panel was necessary for all profiles, but the behavior was confusing. Users were unsure which combinations would return useful results
  • Saved searches — every user mentioned wanting the ability to save search criteria and grid configurations to avoid re-entering them multiple times a day
  • Sorting confusion — with columns squeezed, users couldn't tell which column was sorted, making "Clear Sorting" the first thing many clicked when landing on a grid
Houston whiteboard session
Houston — Whiteboard session
Filter wireframe sketch
Early sketch — filter rethink
03
UX Evaluation & Dashboard Audit
Mapping every friction point across the core flow
Phase 03 · UX Audit

Deconstructing
The Friction

We ran a structured UX evaluation documenting how users moved through the core pattern — Search → Results → Details → Edit — across Contracts, Nominations, Orders, Tickets, Distribution, and Invoices. Each step had distinct friction points.

01 Search & Filters
Overwhelming filter panel with 15+ fields. No cascading logic on search screens. No way to save or recall filters.
⚠ Users don't know what to search for
02 Results Grid
Links inside grid cells open details. Users right-click to open in new tab. Sorting state invisible when columns are narrow.
⚠ Sort state unclear → Clear Sorting habit
03 Details / Edit
Mixed editable and read-only fields on same screen. Users open edit in yet another tab. Modification history buried.
⚠ Can't tell what's editable vs locked
04 Fees & Pricing
Grids within grids. Deep fee detail views. Confusing edit icons inline. Critical "End Date Fee" action buried in actions panel.
⚠ High-risk actions hard to find
All Contracts grid — before
Before — Contracts grid
Tooltip annotation

All Contracts grid showing 325 items. Filter panel shown at top, but users often ignored it and relied on sorting as a substitute.

Dashboard with filters — after context
Before — Filter state

Filter panel open with multiple dropdowns active. No visual indicator of what's applied. Clear button is passive and easy to miss.

Previous dashboard and process
Before — Previous UI & process

The previous dashboard UI alongside the research process — showing the 4-phase approach: Understand, Identify, Iterate, Design.

Key Audit Findings

Search & Filters

The general rule in contracts was that there were no cascading dropdowns on search screens — the panel was wide open because users might not know exactly what they were looking for. However, no way existed to save or recall those configurations, forcing users to re-enter criteria repeatedly.

Results Grid Behavior

Users habitually right-clicked links to open details in a new tab. Sorting state was invisible when columns narrowed. "Clear Sorting" became the first action users took upon arriving at any grid — a workaround disguised as a feature.

Details & Edit Modes

Details screens mixed editable and non-editable fields without clear visual distinction. To edit, many users opened another browser tab, increasing cognitive load. Modification history (who changed what, when) was present but buried under the actions panel.

Fees & Pricing Flows

Fee management was particularly complex — grids within grids, deep fee detail views, and confusing inline edit icons. The "End Date Fee" action, critical for operations, was buried. Some edit icons were ambiguous and visually similar to view icons.

04
Wireframes & Explorations
Validating new patterns before full visual design
Phase 04 · Wireframes

Early
Explorations

Using insights from the UX evaluation, we moved into Figma to explore new patterns. The goal was not to reinvent every screen at once, but to define strong, reusable templates for the most common flows and roles.

  • Simplified filter header — separating "essential" filters from "advanced" criteria, with the concept of saved searches introduced
  • Legible results grid — clearer sorting indicators, better spacing, and inline actions that were easier to recognize and less ambiguous
  • Structured details layout — clear visual distinction between view-only fields, editable fields, and critical actions like fee changes
Customer Asset Owner Status Apply 💾 My weekly search + Save Contract No ↑ Customer Asset Owner Status Service 03d9-STTR-BSPL-2020 Matrix Energy Enterprise IC Active Storage 03d9-STTR-BSPL-2020 Matrix Energy Enterprise IC Expired Trade 03d9-STTR-CEIC-2020 EPO Marketing Enterprise IC Active Storage ⚡ Sort indicator now always visible ✦ Clearer inline row actions WIREFRAME — CONTRACTS SEARCH (V2)
05
Final Design
Visual system applied to validated patterns
Phase 05 · Final design

Dashboard &
Visual System

Once we validated the wireframes with stakeholders and key users, we moved into final design. The focus was on visual hierarchy, consistency, and usability — making it easy to see what matters, understand where actions live, and reuse the same mental model across all modules.

  • Filter clarity — reduced the over-reliance on long dropdown stacks, added clear active states, and introduced saved search persistence
  • Grid readability — standardized spacing, typography, and table styling so dense data remained readable without feeling overwhelming
  • Better feedback states — loading, empty, and error states added to prevent users from feeling lost after triggering actions
  • Consistent action placement — primary actions anchored in predictable spots, secondary actions consolidated to avoid confusion
EP Final design dashboard
Final Design — Contracts module

Before vs After — Filter Area

Before — Cluttered filters
All Contracts Hide Filters | All Filters Customer(s) — Select ▼ Asset Owner(s) — Select ▼ Contract Number Description Status — Select ▼ Service Type — Select ▼ Asset Group ▼ Products — Select ▼ ⚠ 15+ fields, no saved state, no clear active indicator
After — Cleaner & contextual
All Contracts Customer ▼ Status ▼ Service ▼ + More 💾 Weekly contracts run 💾 Active storage only + Save search Matrix Energy ✕ Active ✕ ✓ Essential filters only, active states visible, saved searches persistent
06
Design System
Scaling the solution across the entire platform
Phase 06 · Design system

Scaling the
Solution

To avoid solving the same problems multiple times, we consolidated the new patterns into a design system. This system standardized buttons, forms, tables, filters, navigation, and feedback components — and defined the color, typography, and spacing tokens that underpin them across the entire platform.

  • Color palettes documented — primary, neutrals, and supporting colors with usage guidelines for different interaction states
  • Reusable components defined for tables, filter chips, forms, action patterns, and data grids applicable across all modules
  • Figma libraries and documented prototypes to help designers and developers adopt the system consistently from day one
EP Design System — palettes and components
EP Design System — Figma
01 · Primary color palette
Dark-2
Dark-1
Primary ★
Light-1
Light-2
Light-3
Neutrals
DG-4
DG-3
DG-2
DG-1
LG-1
LG-3
02 · Typography scale
Display / 28 / 700
Contracts
Headline / 22 / 700
All Contracts
Title / 16 / 500
Contract Number
Body / 14 / 400
Trade at Colorado City Basin
Caption / 12 / 400
ACTIVE · STORAGE · 05/2020
03 · Components & States
Buttons
Status Badges
Active Expired Cancelled Inactive
Filter chips
Matrix Energy ✕ Status ▼ + More
07
Key Decisions & Trade-offs
Deliberate choices made under real constraints
Key design decisions

What We Chose
& Why

Many of the most impactful changes came from small but deliberate decisions — choosing patterns over quick fixes and pushing back on legacy behaviors that were making users less efficient.

Decision area
Legacy approach
New approach
Search pattern
Different implementations per module — users learned each separately, increasing cognitive load
Single consistent Search → Results → Details → Edit pattern across all modules, even if that meant pushing back on legacy behaviors
Filter approach
More filters added reactively to every user request. 15+ fields visible by default, most rarely used
Clearer defaults, better grouping, persistent saved searches. Resisted adding more fields as a quick fix
Data density
Dense tables with minimal spacing to show maximum data — caused scanning errors and misclicks
Balanced density with accessibility and readability, adjusted iteratively with direct user feedback
Edit flows
Multiple tabs opened for every edit — users relied on browser tabs to manage context switching
Clear visual distinction between view and edit states within the same screen, reducing tab proliferation
08
Impact & Learnings
What changed and what I took from this project
Impact & what I learned

What
Changed

The redesigned dashboard and design system gave Enterprise Products a clearer, more consistent foundation for its internal platform. Users could search, filter, and edit with less friction; teams could reuse patterns instead of reinventing them; and the product organization had a stronger base for future features.

Pattern
Clarity
Reduced reliance on multi-tab workarounds by clarifying the core Search → Results → Details → Edit flow across every module.
System
Foundation
Improved consistency across modules through shared components, tokens, and a documented visual language ready for future features.
Faster
Delivery
Created a design system that significantly shortened the path from idea to implementation for new dashboard features and modules.

What I Learned

  • Start from real behavior, not from screens — the Houston sessions revealed workarounds no screen audit would have caught
  • Codify decisions into a system — otherwise you solve the same problem five times across five modules
  • Audit before designing — structured UX evaluation is more persuasive to stakeholders than opinion; it turns design into evidence
  • Constrain to clarify — fewer filters done well outperforms more filters done poorly every time
"This project reinforced how important it is to start from real user behavior, not just from screens. By auditing existing patterns, listening to super users, and codifying solutions into a design system, we turned a chaotic, fragmented dashboard into a more predictable and scalable experience."
— Xavi Cabrera, Senior UX Designer