SafeDrive HMI system

SafeDrive HMI System

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

Current generation of automotive infotainments has distracted control interactions, which leads to danger while driving. Research shows that it can take up to 40 seconds. 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, ensuring their attention is always on the road.

Intuitive Interactions

Based on research and user tests, the interactions are optimized to be the most intuitive interactions that help users quickly understand the system without reading through user manuals.

Customizable Features

A customizable shortcut menu and a driver and passenger layout provide the best solutions for every scenario and everyone on the ride. Want your passengers to change your song? Just switch the layout.

Outcome

The SafeDrive system proves to be much more responsive, accessible and easy to use compared to a certain current-generation HMI system, especially when making adjustments in climate control and locating users' preferred features. Participants in the final user test also praise SafeDrive for its clear and concise visual design and copywriting

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. They represent three different types of current-generation HMI systems: the “One screen” HMI, the “iPad” style HMI, and the “Combined control” HMI.

“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.

Secondary Research

To better understand the existing problems and how to solve them, I conducted secondary research that focused on understanding the trend, improving HMI systems with ergonomics, and what qualifies as safe interaction to evaluate whether an automotive HMI is good or bad.

Ergonomics Research

We've seen the bad examples, but hat is the best ergonomic for designing infotainment HMIs to make them more useable and safe for drivers?

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 for hundreds of features in a car.

Upgradability

New cars are similar to smart devices; manufacturers can provide firmware upgrades 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, minimalist, and modern, which is what the consumers want.

Cost Saving

A screen is cheaper when it can be fit across all models of cars in a brand, but physical controls are often specifically made for specific models depending on their classes and sizes.

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:

Wireframe User Test Method

The wireframe user test mainly focused on usability tests. Participants were given printed wireframes. They first identified what each page was for, and then I read out some functions and asked them to locate them. I recorded the functions that participants failed to complete or spent over 10 seconds to locate. After the user test, a short interview was conducted to collect their feedback.

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": In the mid-fidelity version, the visual hierarchy/information architecture is improved to demonstrate clear relationships between related functions.
"It's still 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.

Second User Test Method

The user tests were conducted in a simulated scenario with the help of driving simulator setup. The testers drove at high-way speed in a video game with the driving simulator while I gave them certain tasks to perform. The functions participants failed or spent over 4 seconds to locate are recorded. After the user test, a short interview was also conducted to collect their individual feedback.

Universal Feedback & Changes

"Some text are unclear unless I lean closer": The less heavy and more eligible Helvetica font is being used instead. Helvetica is also well-tested in the industry and some major brands use it in their current/past infotainment systems.
"The bottom climate control is too small and I mistouched a few times": The always-on climate control is now larger to reduce input errors and provides faster, more accurate interactions. It is also even more driver-focused to ensure changing the climate while driving is completely stress-free.
"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?": The buttons and sliders are now better associated, further improve 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 proves to be much more responsive, accessible, and easy to use compared to a certain current-generation HMI system, especially in adjusting climate control and locating user’s preferred features. Participants in the final user test also praise SafeDrive for its clear and concise visual design and copywriting

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