Building a Unified User Experience Design System for Honda China
This project was not simply about building a design system. 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
In six months, we built the system from zero to one: a shared design language, reusable resources, cross-device rules, and a foundation for collaboration across Honda China.
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.
Design production cost and related workload reduction
Combined estimate based on supplier quotations and project workload.
2024 Honda Technical Forum
The project was shared through Honda's internal global-headquarters technical forum.
The problem emerged
As Honda’s global digital products expanded, regional teams designed independently and gradually developed different visual standards and interaction patterns. Users faced inconsistent experiences, design assets could not be reused, and collaboration costs continued to rise. A UI audit across four launched products sampled more than 200 component instances and found that fewer than 30% had a reuse relationship—in other words, more than 70% of UI elements were repeatedly designed and implemented in each project. Breaking the issues down one by one revealed that what appeared to be different complaints from the company, teams, and users were the same four problems projected across different levels.
| 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 |
Why this design system?
We studied automotive systems as well as Material Design, Ant Design, and cross-device adaptation approaches. The goal was not to imitate a mature component library. The solution itself was not new; the critical task was to trace impact back to root causes, derive measurable dimensions, and define what kind of system could address each stage efficiently in Honda’s specific context.
Given the project's scope of impact, urgency, and what could be validated, we chose to make substantial improvements to consistency, efficiency, and usability in Design System 1.0. Usability belongs to the Interaction & Emotion dimension and was addressed through shared foundational interaction patterns that made HMI behavior easier to understand and predict.
Research and the foundation for design decisions
Before defining the system’s form, we used an internal audit, external references, key-screen validation, and scenario coverage analysis to establish a basis for the design decisions. The goal was not to apply a mature system directly, but to determine what could be borrowed and what needed to be redesigned for Honda HMI contexts.
1. Design-system reference research
We first built a complete component inventory through an internal audit, then reviewed automotive and other cross-platform design systems. The research clarified three points: no existing system could directly fit Honda’s HMI context; token architecture and component organization could be borrowed but needed automotive-specific adaptation; and the choice between two-tier and three-tier token architectures needed to be tested in practice.
- — No existing system could directly fit Honda’s HMI context.
- — Token architecture and component organization could be borrowed, but needed automotive-specific adaptation.
- — Two-tier and three-tier token architectures needed to be tested before making a decision.
2. Validate the Home screen first
Before building components at scale, we first confirmed the final visual direction of the Home screen. Home was both the most frequently encountered screen and the clearest concentration of the system’s visual language. Once its visual direction passed internal review and received brand approval, it could serve as the baseline for deriving and validating component styles.
3. Component-selection methodology
The component scope was not copied from an existing library. It was determined through audit, scenario coverage, and external references, balancing coverage of core HMI scenarios against system scale and maintenance cost.
Step 1
Audit existing components
Inventory components across current products and projects to identify repetition, variation, and gaps.
Step 2
Analyze scenario coverage
Use frequent tasks, screen formats, and vehicle configurations to determine which real scenarios the components needed to cover.
Step 3
Supplement with external references
Use automotive and cross-platform systems to identify patterns missing from the internal sample without copying them directly.
Three decisions defined the system’s fundamental form
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 sharp geometry, and a sense of light from the Honda 0 Series direction. The icon breakpoint concept treats an icon as a three-dimensional object and places breaks where light would cast a shadow. After internal review, the concept was extended across the system’s visual design.
2. Build a robust and flexible design-system architecture
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. Use nested Auto Layout to create room for adaptation
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 and project impact
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. The team’s way of working shifted accordingly: from rebuilding to composing — designers no longer start from a blank canvas, but assemble experiences from existing building blocks.
| Success Metric | Definition | Measurement method | Current status |
|---|---|---|---|
| Consistency | Measure improvement in brand and interaction consistency | Visual audit · cross-product sampling · usability research | Method defined; complete data pending |
| Efficiency | Measure whether design and development production efficiency improved | Component instances · delivery records · effort comparison | 85%+ reuse and 45%+ related effort estimates available |
| Collaboration & Quality | Measure team collaboration and output quality | Adoption records · design–development match · governance checks | Method defined; complete data pending |
| Interaction & Emotion | Measure the overall user experience | Task tests · CSAT/NPS · error and trust measures | Method defined; complete data pending |
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
From below 30% at the start of the project to 85%+ after manually sampling at least 15 core pages in each project; weighted manually.
Estimated ±5–10% manual error.
Reduction in design production cost and related workload
Supplier quotation and project-effort comparison: approximately 7–8 person-days before versus 3–4 after.
Combined estimate based on supplier quotations and project workload.
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: 1.0 established order and used standardization for efficiency, while 2.0 moves toward experience intelligence and organizational capability—helping teams move faster while maintaining experience quality.