Project Objective
Our objective was to deliver a refreshed experience for MG's HMI via new interaction design and visual aesthetics; design mobile companions that inherit the design language from the updated HMI solution so that the whole portfolio of digital experiences looks consistent ensures continuity.
Scope & my role
UX/UI Designer
1. “Car Family” approach
SAIC requires a consolidated approach to its HMI design so that a new market or new vehicle introduction is easy and fast.Star will work on HMI 2.0 to design an Operating System-addressing all cars and looking in the future for scalability purposes.
2. UI Library
A consolidated library of UI components is a foundational need going forward.Star will work on creating an Atomic Model that will streamline UI components structuring and scaling. Also recommended to create a screen templates library.
3. Light on Visual
The ideal experience should be light and straightforward on visual design but contain all modern interactions frequently seen on web interfaces or mobile.Star has analyzed the implementation quality of HMI 1.0 and recommend a different approach for 2.0 project that will cover all possible gaps in communication and design consistency.
Process
.png)
Phase 1 – Experience Design
This phase is focused on visual research and experience detailing; ideation workshop with the Company team that would align teams on the HMI design hypothesis.
Activities:
· Defining whom we design for, what is the interaction framework, and how to unify the experience across car models and screen sizes.
· Conducting a short workshop with the Company team to ideate on core features, visual direction, and refine HMI architecture.
Phase 2 – Interaction Design
An experience modeling stream aimed to get a full picture of how the interface works and how people interact with it.
Activities:
· Diving into the detailing of interaction design and creating a high-level clickable prototype to be aligned on the concept after the Experience phase.
· Detailing all 1st and 2nd level screens and information architecture to reflect core modules and how they might be connected for a more seamless experience.
· Incorporating all design adjustments based on Company’s reviews and feedbacks.
· Start with components library definition, to be sure what type of screen layouts might be needed.
Phase 3 – Visual Design & UI Library
A visual design stream, with detailing and polishing our concept, UI library creation. Finalization of end-to-end HMI experience and theming framework support.
Activities:
· Design for all 3rd, 4th, and system screens that address all components and modules.
· Creation of consolidated UI elements and page template collection that will make easy all further engineering phases.
· Insure of the modular approach to UI so that it’s easy to adjust HMI depending on the market or car features available.
· Making any of the design adjustments based on the Company’s reviews and feedbacks.
Phase 4 – Motion Design & Adjustments
Creative motion experiments and ideas around UI transformations, reactions, physics, and dynamic feedback.
Deliverables:
· Animation for core components (buttons, labels, etc.) and key modules (Vehicle Setting, ADAS, Driving Mode, Air Conditioner, Charging Module, Cluster, Voice Recognition, etc.)
· Motion sequence files in After Effects.
· Finalization of visual design and kit.
· Final design fixes according to Company feedback.
