Modernizing a Mult-Brand Design System
One responsive system powering both field teams and consumers.
Fragmented Ecosystem, Two Audiences, One Platform
A large energy organization approached us with a deceptively simple problem:
“How can we redesign our field operations platform and consumer tools while maintaining brand separation, consistency, and speed?”
The reality was anything but simple.
They had:
-
Multiple internal applications for field technicians, built at different times by different teams
-
A separate consumer-facing experience for homeowners
-
A need to rebrand and adapt the platform for several partner companies
-
An unreliable and outdated “design system” that was really a loose collection of components
-
A massive integration initiative that required end-to-end material tracing — from procurement → warehouse → truck → job site → installation
​
And all of it needed to be mobile-optimized, but not fully native apps... everything had to work responsively across three lean breakpoints (mobile / tablet / desktop).
The existing experience lacked:
-
Cohesion
-
Reusability
-
Accessibility
-
Brand flexibility
-
Scalable patterns for future multi-client adoption
This redesign required more than screens, it required a modern, extensible, multi-brand design system.
Research & System Audit: The Gaps Were Everywhere
We began with a comprehensive design system + experience audit across:
Field Worker Tools
-
Job assignments
-
Material lookups
-
Work order tracing
-
Safety checks
-
On-site workflow steps
Consumer Experience
-
Outage lookups
-
Home energy usage
-
Appointment tracking
-
Self-service troubleshooting
Design System Findings
-
40+ button variations
-
20 different card patterns
-
No iconography standards
-
Limited accessibility compliance
-
No cross-brand strategy
-
Poor component naming + no governance
-
Layout inconsistencies across breakpoints
-
Inconsistent and confusing error messaging
The system was inconsistent, brittle, and nearly impossible to scale to multiple client brands in early audits.
Strategy: One Core System, Many Brand Expressions
We designed a new design system with a core foundation that could be:
-
Rebranded for multiple clients
-
Used consistently by both field employees and consumers
-
Flexible enough to adapt to future acquisitions
-
Optimized for responsive mobile-first field workflows
Our design system architecture:​​​​​​​​​​​​​​​​​​​​​​
This allowed us to keep things lean while still supporting complex workflows.
Execution: Modernizing the Field + Consumer Experience
​Field Workflow Wins
-
Shorter scanning flows
-
Clearer material confirmation steps
-
Simplified daily job summaries
-
Reduced cognitive load for technicians
​
Consumer Workflow Wins
-
Cleaner outage lookup flows
-
Clearer appointment summaries
-
Consistent patterns between mobile + desktop
-
More trustworthy, modern aesthetic
​​
We weren’t just updating visuals, we were rebuilding the foundation for how the entire ecosystem looks, works, and scales.
Outcomes: A Scalable, Multi-Brand Design System
60%
Cut duplicated components
100%
Token-based theming cross-brand
40%
Improved design-to-dev handoff time
Field Team Outcomes
• Faster completion of on-site tasks
• Fewer material scanning errors
• Higher adoption of mobile workflows
• Improved job clarity and daily workflow comfort
Consumer Outcomes
• More intuitive self-service
• Less reliance on support channels
• Clearer communication during outages
Core Deliverables
• Complete design system foundations
• Figma component library (responsive)
• Cross-brand token theming
• Motion + interaction guidelines
• Usability testing templates
• Rapid prototyping templates
• Governance + contribution model
• Before/after ecosystem diagrams
