01
Audit repeated decisions
I looked for recurring choices across teams and turned the most common ones into system priorities.
Lucid Air HMI Design System
A reusable product language for vehicle controls, mobile surfaces, and cross-functional product teams
Overview
I built the HMI design system from repeated product decisions.
Lucid teams were designing vehicle controls, mobile surfaces, and product workflows with overlapping patterns but local decisions. I turned those repeated choices into shared foundations, components, documentation, and review rhythms that helped teams move with more consistency.
- Role
- Product owner for the design system, working across design, engineering, PM, and brand stakeholders.
- Scope
- Defined the system direction across vehicle HMI and mobile surfaces, turning fragmented product decisions into shared foundations, usage guidance, rollout rituals, team support, and leadership alignment mechanisms.
- Outcome
-
- Increased coverage for Air from 25% to 70%
- Increased feedback response rate to 80%
- Estimated annual saving is $2 million*
Challenge
The product language was inconsistent, with each team rebuilding patterns locally.
Designers created feature-based styles and components independently, while development stayed ticket-driven and bug-oriented. Without shared definitions, teams needed frequent daily meetings to align on simple behaviors.
Approach
I treated the system as a product, not a component library.
I started with repeated decisions across teams, then shaped them into product foundations, usage principles, documentation, and review rituals that made the system easier to adopt in daily work.
02
Define product foundations
I defined styles, components, and interaction patterns as reusable product decisions.
03
Document principles and usage
I wrote guidance that explained when to reuse a pattern, when to adapt it, and why it works.
04
Create review rhythms
I created critique and implementation review rituals that helped the system become part of daily product work.
Process
Define
Frame shared product gaps
Ownership / Principles
Product Language
Design
Create reusable foundations
Styles / Components
Interaction Patterns
Align
Build governance rituals
Critiques / Reviews
Stakeholder Alignment
Maintain
Scale adoption over time
Documentation / Versioning
Feedback Loops
Toolkit framework
One language across the vehicle experience.
I organized the toolkit around how teams actually shipped work: product surfaces, system UI, app patterns, and developer handoff. The framework helped teams find the right source of truth instead of rebuilding decisions locally.
The system connected in-car HMI, mobile, and product tooling through shared foundations. Documentation covered reusable styles, components, interaction states, and review criteria so teams could make aligned decisions faster.
Lucid design approach Lucid UX 2.0Style library
Shared foundations organized for everyday product work.
The style library translated Lucid's premium brand language into reusable foundations for icons, imagery, motion, typography, color, hardware controls, and localization across vehicle and mobile experiences.
Library structure. The toolkit organized framework, styles, components, and developer handoff into a shared system space.
Style foundations. Icons, imagery, art direction, motion, typography, color, hardware controls, and localization lived as reusable product foundations.
Reusable design tokens made the system easier to adopt and harder to misuse.
Select a foundation to understand how Lucid's product language became reusable across surfaces through shared styles, tokens, and usage guidance.
Color themes
Created reusable color themes and usage guidance for menus, drawers, cards, and modals across premium in-car experiences.
Typography
Defined type styles, hierarchy, spacing, and usage rules so teams could apply the same information architecture across HMI surfaces.
Iconography
Standardized core icons for controls, states, navigation, and vehicle functions to reduce one-off visual decisions.
Grid system
Mapped display formats into reusable grid rules so layouts could scale across instrument cluster, center display, and rear console contexts.
Component specification
Specs turned reusable components into implementation-ready decisions.
Input states, directionality, spacing, error behavior, and visual measurements were documented so designers and engineers could align without rebuilding the same decisions in every feature.
Component architecture
Design specifications. Built for reuse and inclusion.
The system defined how parent and child components, callouts, and bilingual LTR/RTL behavior should work together so teams could reuse patterns without losing context or accessibility.
Parent / child
Reusable structure across variants.
Parent components carried shared behavior, while child components handled shape, icon, label, and grouped selection variants.
Callout specification
Behavior became explicit.
Spacing, states, validation messages, direction, overflow, and token references were documented for consistent implementation.
Bilingual support
Inclusion was designed into the component model.
LTR and RTL variants were specified side by side so English and Arabic experiences could share the same system logic.
Version control
Release notes made the system easier to trust.
Changelogs and toolkit updates turned system maintenance into a visible workflow, helping teams understand what changed, why it changed, and how to adopt it.
Changelog. Version history tracked design token and component changes over time, so teams could understand why foundations changed.
Toolkit update. Release notes summarized new components, bug fixes, deprecated patterns, and adoption guidance for the wider design system group.
Review
Design Review
Technical Evaluation
Core Team
Dev Review
Technical Evaluation
Feature Developers
Stakeholder Review
Direction & Strategy
Cross-functional Team
Impact
The system helped teams design once and reuse with confidence.
Coverage
Increased Air design system coverage from 25% to 70% by turning repeated product decisions into shared foundations, components, and usage guidance.
Feedback loop
Increased feedback response rate to 80% through clearer ownership, review rhythms, and system guidance that made decisions easier to evaluate.
Efficiency
Contributed to an estimated annual saving by reducing repeated design and implementation effort across product surfaces.
Reflection
This project shaped how I think about systems work.
A design system only scales when it is treated as a product: with users, adoption paths, governance, release notes, and clear ownership. The Lucid work taught me to connect craft, governance, and delivery so the system could earn trust through everyday use.
Value today, impact tomorrow.
