Design work is always exciting to me because I'm constantly learning new things and challenging my perspectives!
Design work is always exciting to me because I'm constantly learning new things and challenging my perspectives!
Xola EV Car
A case study where I designed an HMI for an EV car.
4
User interviews
3
Iterations
15
User tests
5
Weeks
1
User observations
1
Remote workshops
Today cars are much more than just a means of transport.
Intelligent driving systems are starting to change people's travel experience and the automotive industry will soon see an increased demand for safer driving and personalized digital systems.
The problem
I learned through my research that
a common reason for accidents in traffic is due to a tired driver.
I have researched one aspect of Semi-Autonomous Level 2 techniques that are found in many of modern electric cars and called * Autopilot.
This technique is REACTIVE, which means that it helps the driver to act faster in a traffic hazard than a human can.
The solution
My goal was to design something that can help the driver act more PROACTIVELY to prevent accidents at an earlier stage.
Part of that solution can be relaxation.
The HMI should give the driver a sense of security and control during the drive.
At the same time, it should also give the driver a chance to use his time efficiently while charging the vehicle.
Secondary research to find my target group and learn about EV car aspects
I started the process with a how might we question that asked:
How do you keep the driver's focus in traffic?
I began with secondary research and did broad searches on relevant topics.
Finding the target group through
a survey and interviews
-
Survey participants: 275
-
Interview participants: 4
Through the survey I found two prominent target groups to focus on. I also did some in-depth interviews to get som qualitative data.
Here are some findings I found about them:
-
Well educated
-
High income
-
Regularly drive long distances
-
Various aspects of charging their electric cars
-
Not having all the information gathered- too many apps connected to their EV car
-
The need for thorough planning for stops to charge the car on longer trips.
-
The autopilot function: provides a more relaxed and relaxed driving
-
High comfort inside the car is extremely important to them
-
Good entertainment in the car is important as a good music system
How long do you drive the longest in your everyday week? (one way)
How old are you?
Pain Points:
Gain Points:
DEFINE
Creating personas and customer journeys from quantitative and qualitative data
Based on all quantitative information from my survey in combination with the qualitative data from my interviews, I now create two different personas.
Click to enlarge images below
A Digital workshop in Miro with
EV car owners
Through my workshop, I got knowledge of the features that were considered essential in one interface:
● Clear navigation
● Charge information/consumption info
● Infotainment- controls such as air conditioning, lighting ,and various personal settings
● Infotainment- access to media such as music, movies, etc.
● camera function for reversing
● Voice control: partly that the system talks to the driver but also that the driver can give command to the system
Prioritizing Features with an Impact
and effort map
Click to enlarge image below
Nielsen Norman Group-
10 Usability Heuristics Applied to Complex Applications
To get a basis for my HMI interface, I have used Jakob Nielsen and Nielsen Norman Group's ideologies.
Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Recognition Rather than Recall
The driver should not have to remember information from one part of the interface to another.
Aesthetic and Minimalist design
Interfaces should not contain information that is irrelevant or rarely needed.
DEVELOP
Competitive Analysis of HMI design for EV cars
I do a competitive analysis and look at other electric car interfaces, including Tesla, Polestar, Porsche Taycan, Volvo XC40 mm.
Mapping of functions for the interface
DELIVER & TEST
HEX: #121212
HEX: #444648
HEX: #778CAD
HEX: #9FAABB
HEX: #EDEDED
THESE FIVE COLOURS ARE THE PRIMARY COLORS
TWO GRADIENT COLORS
HEX: #44CAF4
HEX: #F3BC2F
HEX: #1C4594
HEX: #B17FC2
HEX: #418037
FIVE CONTRAST COLOUR
UI guidlines for a car HMI
I found some articles that give me many valuable insights into the design aspects.
Here are some important benchmarks that I use:
-
Dark mode is preferable as it reduces distraction and glare
-
Short text, no paragraphs
-
Reduce the amount of call-to-action buttons. A driver must be able to complete a task in a series of 1.5-second glances with a total time of looking away from the roadway in a maximum of 12 seconds
-
Icons win over text. But they must be obvious.
-
High contrast readability is very important
-
Consider the screen accessibility and readability
3 iterations
Tests done on 3 new people per iteration
The final usability tests on the
High-fidelity Prototype
Tested in combination with Microsoft Reaction Cards and the SUS scale
Number of test persons: 6
What I wanted to get out of the test:
-
Test usability and see what people are actually doing
-
Test your understanding of flow and icons
-
Test look & feel
-
Test emotions / experience of the interface
-
Get an evaluation on the interface
The results of the SUS tests & Microsoft Reaction cards
82
Easy to use
Minimalistic
The general guidelines for the survey:
-
Excellent: >80.3
-
Good: 68 - 80.3
-
Okay: 68
-
Poor: 51 - 68
-
Awful: <51
Intuitive
Home page
Vehicle settings, profile page, browser
Before
After- Iteration nr 2
After- Iteration nr 3
Vehicle settings, profile page, browser
-
Change of main icon symbols on the left side
-
Change of hierarchy on icons
-
Gradients removed on icons
-
Change of icon symbols for clarity
-
Added head titles
Before- filtered search
Navigation
The main task of the HMI interface is to take the driver from point A to point B safely and efficiently.
The user should be able to perform various activities while driving.
Before
After- Iteration nr 2
After- Iteration nr 3
I want my interface to give the driver a feeling of having full control of everything they can think of and need to know, with as few clicks as possible.
-
Reduction of information cards
-
New placement of road visualization
-
Press on the road to get information on battery status
-
New placement of road visualization
-
Press on the road to get information on battery status
-
New icons on the left side view
-
Gradients removed on icons
Climate control
Easy access to control climate settings
Before
After- Iteration nr 2
After- Iteration nr 3
Easy access to control climate settings
-
A more simplified view
-
Added icons for the climate view
-
A simplified view
-
same icons for both driver and passenger to save screen space
Before
Music
Access to music, pods etc
After- Iteration nr 2
After- Iteration nr 3
Access to music, pods etc
-
Bigger information cards for the songs
-
Reduced number of music cards to make the cards bigger and more readable
Parked mode for charging
This view page combines charging with time for rest or relaxation.
You can select between five modes: work, watch, play, relax and power nap
Before
After- Iteration nr 3- Inactivated charging
After- Iteration nr 3- Activated charging
The driver is encouraged to take breaks for relaxation and power naps while charging. This features offers five modes/activities.
-
The view is reworked and divided into two sections
-
Added slider for regulating the charging of the battery. The slider is connected to an alarm clock.
-
View of the battery being charged and the alarm is activated
Before
Parked mode for charging- the view for power nap
This view page combines charging with time for rest or relaxation.
After- Iteration nr 2
After- Iteration nr 3
The view for power nap with various videos to choose from
-
Added alarm for charging the battery
-
Icons to show indication of the battery status
-
View of one of the power nap videos
The final high fidelity HMI design
Lenght Of Demo:
01:39 min
REFLECT
Project Takeaways
My responsibility as a designer
I have gained a great deal of respect for the subject, through working on my thesis.
Designing an HMI interface for a car can mean the difference between life and death. It is designed for two aspects that go completely against each other and are opposites of each other.
You want the driver to focus on the road,
but at the same time, you have put a lot of effort into designing something you want the user to look at and use.
This is an extremely complicated balancing act.
