Zoe Yutong Zhang
UX/UI Designer · Creative Technologist
WanderMap
Exploring UX & Visual Guideline for Digital Cockpit System
Smooth in-vehicle travel Experience
WanderMap is an in car navigation solution designed to help drivers on road-trip tours.
This is a case study project that aims to design, prototype, and test the Interaction and Visual Guideline that works best for Automotive Experience.
Reimagine remote
3D art production.
WanderMap is an in car navigation solution designed to help drivers on road-trip tours.
This is a case study project that aims to design, prototype, and test the Interaction and Visual Guideline that works best for Automotive Experience.
01 The Challenge
How might we design for driving?
WanderMap was initially designed as a mobile application, and the challenge was to create a more optimal user experience for a car-compatible version.
This involved implementing a car HMI design that took into account the unique requirements of in-vehicle use, such as minimizing driver distraction, integrating with existing car infotainment systems, and providing clear and concise information. Additionally, I needed to ensure that the UX design was adapted to the car environment.
Despite the basic functionality already being in place, the design process required a thorough understanding of both car HMI design and UX design principles to create an effective in-vehicle user experience.
How might we design for driving?
WanderMap was initially designed as a mobile application, and the challenge was to create a more optimal user experience for a car-compatible version.
This involved implementing a car HMI design that took into account the unique requirements of in-vehicle use, such as minimizing driver distraction, integrating with existing car infotainment systems, and providing clear and concise information. Additionally, I needed to ensure that the UX design was adapted to the car environment.
Despite the basic functionality already being in place, the design process required a thorough understanding of both car HMI design and UX design principles to create an effective in-vehicle user experience.
“Outdoor tourism popularity in 2020 saw rapid growth, with special routes and road-trip tours receiving more than 43% of the attention. Among them, the fever growth of road trip tours reached 78.6%.”
Currently, the in-vehicle service scenario for road trip tours is not yet fully developed, and users still rely on their smartphones and laptops to access information during their journeys.
This fragmentation often leads to a lack of synchronization between trip information and navigation. To address this challenge, there is a need for an integrated and synchronized system that connects trip information and navigation in a way that is optimized for in-vehicle use.
Such a system would require careful consideration of both hardware and software aspects of car HMI design, as well as a thorough understanding of user needs and preferences for in-vehicle trip planning and navigation.
By creating a more integrated and streamlined in-vehicle experience, we can enhance the safety, convenience, and overall enjoyment of road trip tours.
01
Asynchronous
Travelers require a more effective way to synchronize plans with their navigation system, while also being able to accommodate unexpected needs that may arise during the trip.
02
No immersion
Nowadays driving and traveling are still separated. Self-driving travelers look forward to the pleasure of traveling while driving.
What are their usage habits?
To learn more about the needs of our potential users, I interviewed 6 drivers between the ages of 22-48, all of whom had different experiences with self-driving trips. But during the interviews, I found that they shared similar needs in many ways, which helped me create the persona and journey map.
04 Behavior Research & Study
How is it different from designing a mobile experience?
The need to keep a driver’s attention on the road imposes some special requirements on notifications in cars, compared to other devices.
Although some UX guidelines suggest that it may be beneficial to place frequent interactive elements within the driver's actionable area, most products currently available on the market do not fully follow this recommendation.
Competitor Research Example:
Current Operation Area of Product A vs. Ideal Operation Area
Read More Now
So, for a better understanding. I initiated an ergonomic study to do decision support. And I used Heuristic Evaluation to evaluate gestures and related UI elements and feedback in terms of usability, learnability, comfort, and reliability.
Numquam ponenda est pluralitas sine necessitate.
Since the functions have been clarified, the study of optimizing the user flow and visual experience to suit the needs within the vehicle is what I focus on.
According to NHTSA guidelines, the driver should complete a task in 1.5-seconds of glazing, and the accumulation time of the shifting away from the line of sight can not be more than 12 seconds.
01
Placing important pages always on the left side is very helpful for drivers.
02
Use high saturated colors and large fonts to be unaffected by sunlight and driving distance
03
Each clickable UI element must have an safe interactive area of 80*80 px
04
Combination of multiple ways of interactions to reduce the driver's operating pressure
01
Placing important pages always on the left side is very helpful for drivers.
02
Use high saturated colors and large fonts to be unaffected by sunlight and driving distance
03
Each clickable UI element must have an safe interactive area of 80*80 px
04
Combination of multiple ways of interactions to reduce the driver's operating pressure
The final design allows drivers and passengers to interact with their vehicles in a more natural way. Through in-car comforting touch screen interaction and convenient steering wheel button interaction, and even voice recognition. These features provide safer distraction-free driving while also making the in-vehicle user experience more enjoyable.
Home, Guide, Trip
In addition to navigation on the homepage, there are four main functions: Trip, Guide, Service and Team.Trip helps travelers plan their tours, and Guide suggests immersive commentaries based on the content of their trip, allowing them to learn more about the background and culture of the attraction.
Plan, Trip, Search
At the beginning of the trip they can choose the places they want to go and the app will intelligently help them plan according to type, distance, etc.According to the testing, long and complex interactions like typing input have always been a pain point for drivers. My design allows the user to use both voice and buttons. And the keyboard is placed on the left side for the driver's convenience.
Personalization
When making a trip, users can simply add the age and gender of their fellow travelers as well. This allows the system to recommend a greater variety of services and activities.
Add Stop
During the trip, users can also see the recommended attractions, gas stations, restaurants and other places on the map. A simple click will add them to the schedule.
Navigation
In testing, I found that too much information can affect the driver's experience with navigation. So I shortened the navigation to where the driver can easily click. And all the main information and buttons are arranged in hierarchy on the left side.
