Building Honda’s Global Unified User Experience Design System
The project was not about building a larger component library. It transformed HMI design decisions scattered across products, screens, and teams into reusable, scalable experience infrastructure that could continue to evolve.
Role
Lead Product Designer
Duration
Jan–Jun 2024
Tools
Figma · FigJam · Notion
In six months, we built the system from zero to one: a shared design language, reusable resources, cross-device rules, and a foundation for global collaboration.
System built from zero to one
Project record; exact organizational scope remains to be verified.
Component reuse
Manual samples across three in-vehicle projects; estimated ±5–10% error.
Related effort reduction
Estimate based on supplier quotations and project effort; not total R&D cost.
Conference and forum presentations
Sharing is recorded; adoption scope cannot be publicly verified.
The inconsistency was no longer a visual issue
The same systemic problems appeared differently at company, team, and user levels. Together they affected experience quality, organizational efficiency, brand perception, and ultimately business performance.
| Dimension | Company | Team | User |
|---|---|---|---|
| Efficiency | Uncontrolled cost | Repeated reinvention | Slower feature delivery |
| Consistency | Fragmented brand expression | Inconsistent design output | Higher learning cost |
| Collaboration & Quality | Slower strategic response | Alignment and rework cost | Unstable experience quality |
| Interaction & Emotion | Retention and satisfaction risk | Design value is difficult to measure | Lower confidence and trust |
The system goals were derived, not declared
We studied automotive systems as well as Material Design, Ant Design, and cross-device adaptation approaches. The goal was not to imitate a mature library, but to trace impact back to root causes, derive measurable dimensions, and decide what each stage should solve.
Three decisions defined the system’s shape and ceiling
The decisive choices were whether to invent or extract the visual language, whether a third token layer justified its governance cost, and whether components should serve fixed screens or encode future adaptation.
1. Extract the visual language from the brand
Rather than inventing a style from scratch, we extracted twilight violet, the coexistence of rounded and angular geometry, and a sense of light from the Honda 0 Series direction. The icon breakpoint concept came from an external supplier and was adopted after internal review; its authorship and incomplete coverage remain explicit.
2. Build a system architecture, not only a library
The architecture connects the HMI Interaction Framework, Design Philosophy, and Design Platform. Inside the platform, a Global → Style → Semantic token hierarchy manages foundational values, themes, gradients, and stable design intent. The extra layer increased governance cost, but made Honda’s gradient-heavy visual language maintainable.
Honda HMI Design System
Select one of the three system layers to inspect it.
Design Platform is open by default so its resources, guidelines, and adaptation rules are immediately visible. Readers can switch to either of the other system layers.
3. Encode adaptation rules before they became urgent
Nested Auto Layout and constraints allowed components to respond to landscape and portrait screens, irregular displays, product configurations, and languages. This added construction cost before it was strictly required, but later enabled the same structures to support changing containers and broader mobility scenarios.
Validation tested the problem structure—not just the output
Each root cause maps to a Success Metric, which then expands into detailed measures, methods, evidence status, and improvement. The first phase retained two directional ROI records; the remaining dimensions still require continuous audit and user research.
| Success Metric | Measurement method | Current status |
|---|---|---|
| Consistency | Visual audit · cross-product sampling · usability research | Method defined; complete data pending |
| Efficiency | Component instances · delivery records · effort comparison | 85%+ reuse and 45%+ related effort estimates available |
| Collaboration & Quality | Adoption records · design–development match · governance checks | Method defined; complete data pending |
| Interaction & Emotion | Task tests · CSAT/NPS · error and trust measures | Method defined; unverified NPS claim excluded |
Design System 1.0
Delivered foundationThe first stage focused on consistency, efficiency, and usability—the urgent foundations that could be validated within the project window.
Unified design language · Design Tokens · reusable components and patterns · foundational Interaction Patterns · clear usage guidance
Component reuse
Three launched in-vehicle projects; 15+ core pages sampled per project; manual weighted count.
Estimated ±5–10% manual error. Raw records still need archiving.
Design production and related collaboration effort reduction
Supplier quotation and project-effort comparison: approximately 7–8 person-days before versus 3–4 after.
Directional estimate only; it cannot be extrapolated to total engineering cost.
Design System 2.0
PlannedA future stage for capabilities that depend on longer-term organizational adoption and experience maturity.
Design governance · review and feedback systems · brand expression · Motion System · accessibility
I built scalable HMI experience infrastructure by transforming design knowledge into a systematic framework—not just a component library, but a decision-making system that helps teams move faster while maintaining quality across a mobility ecosystem.