Automotive HMI · 2021–2022
Creating a Scalable HMI Framework for MG Models
02
Automotive HMI · 2021–2022
Key objective is to deliver a refreshed experience for MG's HMI and Instrument Cluster by expanding it across ~20 addressable markets, implementing a cohesive and scalable framework for different car models, and revamping visual and interaction design.
SAIC required a consolidated approach so that the HMI experience would be consistent regardless of the car model — and easier to enter new markets and leverage the driver's experience across new MG vehicles. The consolidated and scalable design framework streamlines UI component structuring and scaling to cover all MG car models.
I joined the project team of 10 designers during the initial phases, focusing on establishing foundational elements for the future design system while sharing my expertise in developing design systems from the ground up. In the later stages, I re-engaged with the design team to assist with detailed UI design for both the HMI and the Instrument Cluster. Additionally, I contributed to the ongoing maintenance of the design system, implementing design tokens to support theming functionality and enhancing motion design for the user interface.
Showreel
A full overview of the iSmart 2.0 HMI system in motion — showcasing the visual language, interaction patterns, and the scalable design system in action across MG vehicle models.
Process
The project was structured across several key phases — from initial research and model range analysis through design system definition, component development, and final visual design delivery for production.
This phase of research was essential for the entire team — gathering a comprehensive range of sizes, shapes, resolutions, and controls from various MG models. This research informed the establishment of breakpoints within the design system, ensuring it accommodates all potential screen configurations for future MG models.
Contains fundamental UI and UX principles for creating interfaces or other design deliverables by referring to the brandbook and best design practices.
We considered safety at every moment of the experience we designed. Safety best practices for in-vehicle UX include:
A structured set of guidelines governing how users interact with the HMI — covering gestures, transitions, feedback states, and timing — to ensure a coherent and intuitive experience across all touchpoints.
Design System
A comprehensive design system built to scale across all MG vehicle lines and global markets — covering foundations, components, patterns, and theming with full design token support.
Contains fundamental UI and UX principles for creating interfaces or other design deliverables by referring to the brandbook and best design practices.
Component libraries house predetermined, reusable UI elements — serving as a one-stop shop for designers and developers to learn about and implement specific UI elements. Creating and testing these libraries takes significant time and resources, but ensures consistency at scale.
Pattern libraries utilise consistent collections of components, best UX and branding practices. They typically feature content structures, layouts, and templates. Much like components, the patterns are meant to be reused and adapted across different contexts and screen configurations.
Design tokens were implemented to support a full theming system — enabling the HMI framework to adapt across different MG models and market variants while maintaining a consistent visual language. Token-based theming allows brand-level customisation without rebuilding components from scratch.
