SafeDrive HMI system

SafeDrive HMI System

My Role:

Product Designer

Project Type:

HMI Design, Product Design

Project Date

08/2024

Executive Summary

SafeDrive HMI system aims to provide a focused and stress-freed driving experience through a innovative HMI design based on research data and rounds of user tests.

Problem statement

‍The current generation of automotive infotainments has distracted control interactions, which can lead to danger while driving. Research shows that it can take up to 40 seconds to perform a simple task in some of the latest car infotainments. How might we redesign the human-machine interaction of infotainments to provide a safe and focused driving experience?

Solution

Driver-centered Layout

From the always-on climate control bar and the 2-POV layout, the driver can easily interact with the infotainment in a split second while driving.

Intuitive Interactions

Based on research and user tests, the interactions are optimized to be the most intuitive interactions, helping users quickly understand the system.

Customizable Features

A customizable shortcut menu and a driver and passenger layout provide the best solutions for every scenario and everyone on the ride.

Outcome

The SafeDrive system is much more responsive, accessible, and easy to use than a current-generation HMI system, averaging a 71.16% decrease in task completion time.

Research Process

Show

Benchmarking & Observation

I am a car enthusiast, so I always watch for what's new in the automotive industry. I started to hear more and more unsatisfied voices of how the infotainments were becoming more unintuitive from customers' and journalists' reviews. With my passion as a UX designer, I decided to investigate this problem myself. During early research, I conducted secondary research and first-hand observation of 3 popular HMI infotainment systems from 3 different automotive manufacturers in the market.

“One Screen” HMI

Score: 2.6/5

Analysis >>>

“iPad” Style HMI

Score: 3.5/5

Analysis >>>

“Combined Control” HMI

Score: 3.2/5

Analysis >>>

In a word...

With the implications of smarter, screen-relied infotainment systems still relatively new to the industry, it is inevitable that much of the design still needs to be optimized. Most current infotainment HMIs are similar to hand-held personal smart devices, which could be better used during driving. I think it is time to combine my design skills and insights as a car lover to come up with a solution.

Ergonomics Research

Business & Trend Research

Some customers and journalists want to have the conventional physical controls back, but more and more cars are becoming screen interactions only. Why are car manufacturers increasingly starting to implement HMI systems with only screens but few physical controls?

Features And Techs

New cars have more technologies and features than ever. Relying only on physical controls won’t be possible.

Upgradability

New cars are similar to smart devices; manufacturers can upgrade firmware and add new vehicle features through screens.

High Tech Aesthetic

With a big screen and no physical buttons, the interior design can be more high-tech and modern.

Cost Saving

Unlike physical controls, screens are cheaper and can fit all models under the same manufacturer.

Survey

As a seasoned designer and researcher, I know secondary research is insufficient to pinpoint the issues. Therefore, I surveyed new car owners to gather insights from their experience of using new-generation infotainments.

How long does it take for people under 35 years old to confidently use their infotainments?

Immediately

Takes less than a week

Takes more than a week

Still unconfident to use

6%

22%

44%

28%

How long does it take for people over 35 years old to confidently use their infotainments?

Immediately

Takes less than a week

Takes more than a week

Still unconfident to use

2%

6%

50%

42%

80%

Participants think it looks much better compared to physical controls

78%

Of features are rarely being used in their infotainment according to participants

User Personas

In addition to surveys, I conducted 4 interviews with car enthusiasts and new car owners. Based on surveys and interviews, 2 user personas were created to understand the needs of target users.

Joe Speed

Age: 32

Gender: Male

Career: Marketing Specialist

Income: $120,000/year

Joe is a long-time car enthusiast, he goes to the track almost every weekend. He always has 2 cars in his garage and often gets a new one every 3 years

“I have been a car enthusiast ever since my dad took me to track day when I was 16. ...I think cars are getting better, with no doubt, but I miss when cars are simpler.”

Needs:

Safe and focused driving
Straight-forward controls
Easy-to-learn interactions

Wants:

New technologies
Sporty visual design
Personalized experience

Helena Johnson

Age: 38

Gender: Female

Career: Financial Manager

Income: $160,000/year

Helena has a stable financial life, and she loves to treat herself to a nicer car since she recently got promoted to a manager position.

“The thing is, I don’t know much about cars and their tech, I don’t care to learn for my new car. I just want to experience something new and easy.”

Needs:

Intuitive HMI design
New technologies
Easy-to-learn interactions

Wants:

Modern design
Refined experience
Design that reflects her taste

Design Process

Show

Wireframe

With all research data in mind, initial wireframe ideas were created. The first draft focused on exploring a driver-centered layout by building a visual and information hierarchy from the driver’s side (left) to the passenger’s side (right). This innovative idea is a leap from all the other infotainment systems, as its design principles are specifically for in-car controls, with a strong focus on accessibility and human factors.

Home Page

Climate Control Page

Map Page

Radio Page

User Test To Mid-Fidelity

After designing the initial wireframes, user tests with 8 participants were conducted to collect feedback. The wireframe is praised for the idea of an uneven, driver-centered layout. Still, there is a lot of criticism towards the visual design and information architecture on the climate page. Here are some significant changes that were made in the mid-fidelity:

Universal Feedback & Changes

"The font is too 'offense' and not eligible": The font has been changed to a more subtle, eligible font.
"Always-on climate control is too small": It is now larger to reduce input errors and provide faster, more accurate interactions.
"Is the 'nav' for main menu or maps?": Words like “Nav” and “Cool Seat” are updated to more concise expressions.

Feedback & Changes In The Climate Control Page

"The buttons are all over the place": The visual hierarchy and information architecture is improved to demonstrate clear relationships between related functions.
"It's not as easy to change climate if I am driving": A 2-POV layout is developed to reduce distractions and provide clear call-to-actions for either the drivers or passengers, depending on respective layouts.

Feedback & Changes In The Radio Page

"Impossible for passengers to control them without leaning to the left": With the new 2-POV layout, the radio page can also be easily adjusted by the passengers in the passenger’s layout.

Feedback & Changes In The Home Page

"The arrow button is awkward and redundant": The arrow button has been removed in the mid-fidelity version for a cleaner layout.

Feedback & Changes In The Map Page

"Where is the map menu?": The in-map menu is always visible to users to make interactions more straightforward.

Second User Test To High-Fidelity

After revising the design in the mid-fidelity prototype, user tests with 11 participants were conducted to collect further feedback. The mid-fidelity prototype is a drastic improvement compared to the wireframes, receiving lots of positive feedback on its ease of use and clear visuals. However, some minor suggestions help elevate the design even further.

Universal Feedback & Changes

"Some text are unclear unless I lean closer": The less heavy and more eligible Helvetica font is being used instead.
"The bottom climate control is too small and I mistouched a few times": The always-on climate control is now larger and more driver-friendly to reduce input errors and provides faster, more accurate interactions.
"Some icons look outdated, some are not accurately reflecting the features": Some icons are updated accordingly in the high-fidelity version to clearly and directly express their functionalities.
"The color seems off, it's low contrast and hard to differentiate": The colors are changed to provide high contrast and better accessibility.

Feedback & Changes In The Climate Control Page

"Temperature and fan control is weirdly separated", "why is auto and sync so far away from temperature control?": Further improvement on the visual hierarchy and information architecture, making it easier for users to quickly locate the controls they want.

Feedback & Changes In The Radio Page

"The passenger channel list has some weird alignments": The passenger layout is tweaked to be more intuitive for users.

Feedback & Changes In The Home Page

"The labels are not accessible with the white text on white photos": Increase text and background contrast to provide higher contrast to meet accessibility standards

Feedback & Changes In The Map Page

Minor changes to meet accessibility standards.

New Settings Pages

The menu customization pages are added in the high-fidelity prototype, including a simple flow for customizing the features in the top menu.

Setting Page

Infotainment Setting

Passenger Layout

Drag and change the top menu items

Outcome

The SafeDrive system is much more responsive, accessible, and easy to use than a current-generation HMI system, averaging a 71.16% decrease in task completion time.

Components Library

The prototype was made entirely from scratch, including components like icons, sliders, and buttons. Here is the components I used for my high-fidelity prototypes.

Next steps...

With the automotive industry always evolving, infotainments are getting updated more quickly than ever. It is important to keep updating and optimizing the design of SafeDrive. Here are some of the future plans:

More features to add into the prototype;
Bring the system in Unreal Engine for a next-gen experience;
Compatible dashboard design;
Compatible mobile app design;

Menu