Enterprise Design System
12 months
Lead UX Designer
4 Designers, 12 Engineers
Project Overview
A foundational design system unifying 8 disparate enterprise product lines into a single cohesive ecosystem.
Business Background
The organization had acquired multiple SaaS companies over 5 years, resulting in a fragmented portfolio. Customers switching between modules felt like they were using entirely different software, leading to frustration and increased support costs.
The Problem
Inconsistent UI patterns, redundant engineering efforts, and lack of central design governance caused 40% of development time to be wasted on UI recreation rather than feature logic.
Objectives
- Unify visual language across 8 products
- Accelerate time-to-market for new features
- Ensure WCAG 2.1 AA compliance across all components
Success Metrics
- Reduce design-to-development handoff time by 30%
- Achieve 100% adoption across core product teams
- Increase component reuse rate to 80%
The Challenge
The primary challenge was not just creating components, but driving adoption across siloed engineering teams who were accustomed to their own tech stacks and workflows.
Discovery & Research
Kickoff & Audit
Initiated a 2-week discovery sprint with lead engineers and product managers from all 8 product lines to audit existing UI inconsistencies.
Conducted a UI inventory, discovering 42 variations of primary buttons and 15 different date pickers currently in production.
Key Pain Points
- Engineers spending days building custom UI components
- Designers lacking a source of truth, leading to "creative drift"
- Users struggling to learn new UI patterns when moving between product modules
Opportunities
- Centralize color and typography via semantic design tokens
- Create a contribution model for teams to propose new components
- Build accessibility into the core components by default
Research Methodology
Contextual inquiry with 12 front-end developers, UI audit across 8 products, and internal stakeholder interviews.
Key Insights:
Personas & Journey
Alex, Front-end Engineer
Implementer
Goals
- • Build features faster
- • Avoid CSS debugging
Behaviors
Relies heavily on Storybook; prefers semantic token names over hex codes.
Sarah, Product Designer
Consumer
Goals
- • Prototype rapidly
- • Maintain brand consistency
Behaviors
Uses Figma auto-layout extensively; needs clear component guidelines.
User Journey Shift
Before
Designers create custom UI -> Handoff with hex codes -> Engineers build from scratch -> QA finds inconsistencies -> Rework.
After
Designers drag-and-drop components -> Handoff with semantic tokens -> Engineers import React component -> Immediate QA approval.
Design Execution
UI Exploration
Typography: Inter for high legibility in data-dense enterprise dashboards.
Colors: Semantic palette mapping (Primary, Success, Warning, Danger) with automatic accessible contrast ratios.
Design System Components
Final Design Execution
A high-fidelity look at the final polished interfaces, components, and key interactions that were successfully handed off to engineering.
Final Outcome & Impact
The design system successfully bridged the gap between design and engineering, fundamentally changing how the organization shipped software.
Key Learnings
- •Overcoming initial resistance from engineering teams attached to their bespoke components.
- •Ensuring backwards compatibility while introducing modern UI tokens.
Future Improvements
- •Automate token distribution directly into the CI/CD pipeline.
- •Expand the component library to cover native mobile apps (React Native).