CLUSTER & HEADUP DISPLAYS DESIGN SYSTEMS
In vehicle cluster and HUD screens
Design Systems, UX, Interaction
ROLE:
Inteaction Designer (Design Systems Lead of Cluster and HUD) (Mar 2023 - Now)
Developed a comprehensive design system for instrument clusters and head-up displays (HUD) across all brands under Stellantis. The aim was to ensure consistency, usability, and scalability in design.
I created two separate design systems for instrument clusters and head-up displays. The biggest challenge for the instrument cluster design system was creating adaptive assets for different screen sizes and resolutions. I collaborated with other designers to establish adaptive tokens to ensure adaptability across different screens.
Head-up displays also posed challenges related to accessibility and regulatory requirements. Due to varying screen projection distances in different vehicles, I developed the components by testing outcomes on real screens in actual sizes. I collaborated with the ergonomics team to ensure that the design system components were accessible across different vehicles.
I also spearheaded the design of core user experiences for new electric vehicles within the Stellantis brand portfolio.
HUD & Cluster Design Systems
Objectives:
Consistency: Establish a unified design language for instrument clusters and HUDs across all Stellantis brands.
Usability: Improve user interaction and experience through intuitive design.
Scalability: Ensure the design system can adapt to future projects and evolving requirements.
Process & Methodology
Component CreationDeveloped a robust library of reusable UI components to ensure consistency and efficiency. Key components include:
Gauges:
Adaptive speedometers and tachometers. Customizable for different vehicle models and display sizes.
Driver and Vehicle Information Assets:
Real-time data displays for fuel levels, engine temperature, and oil pressure. Adaptive layouts to accommodate different screen sizes and resolutions.
Generic Components:
Buttons: Various styles and sizes for different contexts (e.g., primary, secondary, icon buttons). Titles and Headings: Scalable typography system for consistent text presentation.
Range and Battery/Fuel Information:
Interactive displays showing range estimates and battery status. Dynamic visualizations for electric and hybrid vehicles.
Alerts and Notifications:
Standardized alert messages for warnings and notifications.
Navigation and Wayfinding:
Adaptive navigation components including maps, turn-by-turn directions, and destination markers.
Interactive Graphs and Charts:
Data visualizations for performance statistics, fuel consumption, and efficiency metrics.
Infotainment Controls:
Components for media controls, including play, pause, skip, and volume adjustment.
Variable and Tokenization System
Implemented a tokenization system to maintain consistent styling across different platforms and brands. Key aspects include:
Color Tokens: Standardized color palette for primary, secondary, and accent colors.
Spacing Tokens: Consistent spacing and padding values for layout elements.
Apaptiveness: Scalable size settings for various screen sizes for different vehicles.
Cross-functional Collaboration
Worked closely with brand teams, development teams, and other designers to ensure the design system met all requirements and could be seamlessly integrated. Key activities included:
Regular design reviews and feedback sessions.
Cross-team workshops to align on design principles and goals.
Continuous iteration based on user testing and stakeholder feedback.
Documentation & Workflow
Design System Documentation
Created comprehensive documentation detailing all aspects of the design system. Key sections include:
Component Libraries: Guidelines for using and customizing components.
Style Guides: Standards for colors, typography, and other visual elements.
Best Practices: Recommendations for maintaining consistency and usability.
Impact & Results
Consistency: Enhanced consistency across all Stellantis brands, providing a unified user experience.
Usability: Improved user interaction through intuitive and adaptive components.
Scalability: Facilitated future projects with a scalable and flexible design system.
Electric Vehicle Features User Experiences
My contributions encompassed the development of key features, including the electric summary page, charging scheduling interface, range impact visualization, and various charging options. These features were meticulously designed to enhance user engagement and facilitate a seamless transition to electric mobility, ensuring an intuitive and user-friendly experience for Stellantis EV drivers.
