Business Goal
To build a foundational library capable of scaling across diverse ecosystems—from responsive web and mobile to specialized HMI devices—accelerating delivery timelines for multi-brand product suites.
The Challenge & My Role
As the Design team was transitioning into the world of Design Systems, team needed help to lead the execution and structural setup.
My primary focus was on variable architecture and component alignment. I led a small team of designers, directing them on UI mockup creation once the core foundations were integrated. My responsibility was to ensure that every system element responded accurately across different brands and device types or breakpoints.
Business Goal:
To build a foundational library capable of scaling across diverse ecosystems—from responsive web and mobile to specialized HMI devices—accelerating delivery timelines for multi-brand product suites.
The Challenge & My Role:
As the senior design team was transitioning into the world of Design Systems, team needed help to lead the execution and structural setup. My primary focus was on variable architecture and component alignment. I led a small team of designers, directing them on UI mockup creation once the core foundations were integrated. My responsibility was to ensure that every system element responded accurately across different brands and device types or breakpoints.
About
My Role: UX Designer, Design System Lead
Team: 4 UX Designer, 1 Visual Designer, 1 HMI UX Designer
Timeline: 2 weeks
Where to start? - Strategy & Rapid Execution
With a high-stakes, two-week deadline, we chose a "Music App" concept to demonstrate the system's versatility across Web, Native, and HMI platforms.
Building the base variable/token architecture
The backbone of this project was the token strategy, and multi-brand with device scalability was the key challenge. On researching and studying the big companies design system and their structure, I tried to performed the below activities with team in establishing the base variable-token architecture.
Next, Mapping variable/tokens to elements
As team was building screen mockups, I tried to make sure correct variables are mapped. I separated web & native components from HMI specific components and, refined and restructure them to improve scalability and dynamic color switches from multi-brand switch.
Cross-Platform Visualization
Cross-Platform Visualization: I restructured the final mockups to allow reviewers to compare brand switches and device breakpoints side-by-side, demonstrating the system’s instantaneous adaptability.
Cross-Platform Visualization
HMI Specialization: By studying Android and iOS automotive guidelines, I redesigned the HMI screens to be as minimal and scalable as possible, ensuring they could adapt to various screen sizes and dashboard configurations.
Documentation & Handover
To ensure long-term success, we established a standardized documentation template using three core foundational elements. This provided a clear blueprint for other designers to follow when adding future components to the system.
Outcome
-
Successfully won the design system project, generating significant enterprise revenue.
-
Reduced foundational setup time by 4–5 weeks through optimized workflows.
-
Created a system that supports multi-brand customization across Web, Mobile, & HMI.
-
Delivered a structured library template that can be reused for future system projects.
What's Next?
To further optimize effort in 2026, I plan to integrate advanced Figma features like Schemas for automated brand switching and Slot components to significantly reduce component detachment rates.
Key Learnings
-
Adaptability: Scaling a library for HMI taught me the importance of designing for unique hardware constraints.
-
Simplicity is Scalable: Establishing simple, clear variable logic early on is essential for enterprise-level growth.
-
Inclusive Design: Balancing brand identity with color accessibility is a challenge that requires rigorous testing and iteration.
