Role

UX Lead

Designing an HMI System for an SUV

Platform

Touchpads

Year

2020

Timeframe

24 months

Summary

HAVAL Dargo is a compact crossover SUV produced by Great Wall Motor since 2020. Customers who live in urban cities and enjoy an adventurous lifestyle such as hiking or camping on weekends are the target market. The HMI system for HAVAL Dargo was designed to emphasize the adventure spirit and present unique features such as various driving modes.

My roles and responsibilities

As a UX Lead, I was responsible for a work package and collaborated with the other three UX teams, each consisting of 2-3 designers. Every UX team has a product manager and an engineer. As a team, we gather user feedback, refine the user flow, revamp the design in accordance with product guidelines, and ship. I created the brand's identity, developed a persona, conducted competitor research, and produced several features, including the dashboard, map navigation, HV/AC, multimedia, weather, entertainment, and AI Push.

Design Process

We adopted design thinking process to keeps people at the center of every process and arrive at optimal solutions that meet their needs.
In research phase, we discovered what users need, how they behave, and what their pain points are through interviews, surveys, and usability tests. This understanding is then organized using mind mapping, which visually structures information to identify connections and key areas of focus. In the ideation phase, we brainstorm and generate a wide array of creative solutions, adopting techniques like sketching and storyboarding to explore various possibilities. These ideas are then translated into tangible prototypes, The process is inherently iterative, with continuous iteration allowing us to gather feedback, make adjustments, and enhance the design until it effectively meets user needs and project goals.

Design Thinking Process

Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.
—TIM BROWN, EXECUTIVE CHAIR OF IDEO

The research

How to define an adventure SUV?

Target Audience

After aligning this with our phasing strategy, we were able to draw a persona for who we would be focusing on supporting. We used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.

Moodboard

Nature and Landscapes is the image I got for the HAVAL Dargo giving it's dynamic shots. We want our design style to show the adventure lifestyle with HAVAL Dargo, such as crossing rivers, climbing hills, or parked at a scenic lookout with people enjoying outdoor activities like camping, hiking, or biking. The overall feel should be empowering, inspiring confidence in potential buyers about the HAVAL Dargo's capability and reliability.

Information Hierachy

We created an information hierarchy that prioritizes critical functions, ensuring that frequently used features are easily accessible. Information significance is decreased from A to C, with instrument information classified into two categories: permanent and temporary information. Permanent information on displays refers to essential and constantly present data that provides crucial information to the driver throughout the entire driving experience. This includes indicators such as the speedometer, fuel gauge, and engine temperature. Temporary information such as warning messages prevails over other messages. For instance, the "Ready" indicator signifies that the car is ready to be started and remains active even while driving.

Screen Structure

In HMI design for vehicles, safety and practicality are paramount. We want to ensure compliance with automotive industry standards and regulations, focusing on driver distraction and safety.

Detailed Design

In-Vehicle Infotainment (IVI)

Light and Dark Theme

Daytime Use
During the day, especially in bright sunlight, a light theme enhances readability and reduces screen glare. Bright colors and high-contrast text are easier to see in well-lit environments.

Nighttime Use
At night or in low-light conditions, a dark theme minimizes screen brightness, which reduces eye strain and glare. This helps prevent the screen from being a distraction and supports a more comfortable driving experience.

Light and dark theme in multimedia

Change Driving Mode

The design focuses on intuitive navigation, clear visuals, and efficient functionality to enhance the user experience and ensure easy operation.

HV/AC

The HV/AC design aims to provide a seamless, user-friendly interface for controlling heating, ventilation, and air conditioning systems. HV/AC adjustment for the driver and passenger are in the central panel, allowing users to adjust the desired temperature by touch the digital up and down icon. Quick access buttons are positioned on the bottom bar for immediate access to essential functions like 'Fan Speed', 'Seat Heat', and 'Internal Circulation'.

Multimedia

We balance usability, safety, and user satisfaction by focusing on intuitive navigation, personalization, high-quality media playback, real-time information, and aesthetic appeal. To ensure the user interface is both user-friendly and safe, we use familiar icons, clear labels, and simple menu structures to help users find what they need quickly. In order to minimize distractions, we use large and easily accessible buttons.Real-time information such as streaming services and live updates is easily accessible. Drivers and passengers can receive real-time updates on media content, such as live radio, news, and podcasts, to keep people in the HAVAL SUV informed and entertained.

Cluster

Dashboard

The cluster dashboard integrates a variety of functions designed to provide the driver with essential information and control capabilities in a clear, concise, and safe manner.

Charging

With given business requirement, I ensure the charging section provides users with real-time feedback by displaying key metrics such as the estimated charging time, total miles available, and the current charging percentage. I use different colors in the UI to visually differentiate these elements, making it easy for users to quickly grasp their vehicle's status at a glance. Additionally, I incorporate information on the number of miles recharged during the session, helping users understand how much driving range they've gained. This approach ensures that the charging experience is both informative and visually engaging.

Warning Messages

The design of warning messages such as low tire pressure, engine issues, or potential collisions is crucial for ensuring driver safety and enhancing the overall driving experience. During the design, we want to make sure these messages capture the driver’s attention quickly to prompt immediate action. A clear message helps drivers understand the issue and the required action without confusion so that accidents are reduced. We also defined fonts and sizes to ensure messages are easily readable at a glance.

Iteration

Iterate, iterate, iterate

Iteration never stops as we continue to gain user feedback from testing. Updates include aspects of interaction, functionality, and hardware interaction.

The system settings screen freezes

The dev team reported that when switching between different themes frequently, the system freezes. There is a problem with the response mechanism of the system, and the software system is unable to adjust to the user's actual actions. The problem is occurred on every testing machine thus is highly impactful.SolutionAccording to the dev team, the problem cannot be solved on the machine side due to the huge amount of resources required when changing themes. As a result of the above information, we proposed limiting the number of theme switch operations based on a time limit. When the system is not responding, a pop-up will appear indicating that the theme switching process is in progress.

The following is an example of an improvement based on testing.

Theme switch Loading Pop Up