Role: Lead experience designer & player-coach across research, product strategy, and UI design.

Modernizing a Multi-Brand Design System

One responsive design system powering both field teams and consumers, built on shared tokens, components, and patterns.

Role: Design system lead — built tokens, components, and layouts.

TOP

Fragmented Ecosystem, Two Audiences, One Platform

A large energy organization approached us with a deceptively simple problem:

“How do we redesign our field operations platform and consumer tools while keeping brands separate, but the experience consistent and fast?”

I partnered with product, engineering, and marketing leaders to map the current ecosystem and quickly found the reality was anything but simple.

They had:

Multiple internal tools for field technicians, each built at different times by different teams
A separate consumer-facing experience with its own patterns and rules
A rebrand underway that needed to show up consistently everywhere
A “design system” in name only: scattered Sketch files, duplicated symbols, conflicting specs
A massive integration initiative connecting pricing, inventory, and scheduling
A mandate to optimize everything for mobile without rebuilding from scratch

The existing experience lacked:

Cohesion – field and consumer flows felt like different products
Reusability – new features meant new components every time
Accessibility – no consistent guidance for color, type, or states
Brand flexibility – each new campaign or sub-brand meant custom one-offs
Scalability – nothing was structured for future acquisitions or products

This wasn’t just a UI refresh. It required a modern, extensible, multi-brand design system that could serve two very different audiences from one foundation.

Research & System Audit: The Gaps Were Everywhere

I led a series of audits, field interviews, and UI inventories to understand how the system really worked (and where it broke down).

Field Worker Tools

Inconsistent navigation and patterns across apps used on the same shift
Key tasks buried in dense tables and nested menus
Limited offline resilience for low-connectivity environments
No clear visual hierarchy for urgent vs. routine tasks

Consumer Experience

Different brands and campaigns each had their own look, feel, and flows
Forms and journeys changed style from step to step
Mobile layouts felt like scaled-down desktop pages, not designed experiences

Design System Findings

40+ button styles, 20+ card variations, and multiple grid systems
No shared iconography or motion language
Components were duplicated across files with slightly different specs
No single source of truth for dev-ready tokens, type, or spacing

The system was inconsistent, brittle, and hard to evolve. To move fast without breaking trust, we needed a lean, token-driven system that I could use to model both field and consumer experiences side-by-side.

Strategy: One Core System, Many Brand Expressions

Together with product and engineering leads, I defined a system strategy: one core design system that could express multiple brands and serve both field and consumer experiences.

The system needed to be:

Rebrandable without rewriting every screen
Flexible enough for new acquisitions and product lines
Responsive from rugged field devices to consumer mobile web
Simple enough for designers and engineers to actually use

Our design system architecture:

This allowed us to keep the structure stable while swapping themes and content for different audiences.

Execution: Modernizing the Field + Consumer Experience

As design system lead and player-coach, I split my time between building the system and designing real product flows that proved it worked.

Field Workflow Wins

Redesigned core task flows (inspect, repair, confirm) using the new components
Created responsive layouts tailored for glove-friendly tablets and phones
Clarified status and priority through consistent iconography, color, and state patterns
Paired with engineers to translate Figma specs into reusable UI code and stories

Consumer Workflow Wins

Simplified quote and service sign-up journeys into fewer, clearer steps
Applied multi-brand theming so marketing could update campaigns without breaking UX
Designed mobile-first layouts that prioritized clarity, trust, and conversion
Used the same component library to keep future features faster to design and ship

Outcomes: A Scalable, Multi-Brand Design System

By leading the system architecture and designing flagship flows myself, I left the team with a design system that was both principled and proven in production.