Automobile UX/UI Design
Project Brief
Vehicles are becoming more powerful as technology advances. Brands like Audi, Volvo, Tesla, and Porsche engineer some of the most advantageous smart vehicles. Along with their modern designs and elevated features, these brands continue to research and include some of the latest tech specs to improve their customer’s experience.
Objective
Research, sketch, build a concept for a prototype that will include all necessary features catered to an individual’s needs while operating on a self-driving vehicle.
• Create main pages catered to possible car features & settings.
• Include research & strategy into your solidified display.
• Create solutions for individuals in a forward-driven vehicle.
• Help individuals eliminate fear and feel confident.
ROLE
Product Designer
User Research, Interaction, Visual Design, Prototyping & Testing, Product Strategy, Pitching
TOOLS
Figma, Adobe Illustrator, Adobe Photoshop
Challenge
How can you create an automobile user interface that allows you to control everything on one panel? Is it possible to create a design system that mimics a touch sensory release since physical buttons are removed from the interior? Is this only for a certain demographic or can this be used in any age range?
RESEARCH
2017 Volvo XC90
The 2017 Volvo XC90 is a mid size SUV that seats about 4-7 people and is very spacious. This SUV has a very sleek, modest, and comfortable interior design. Their user interface display is very easy to navigate with it’s iPad-like functionality. The physical home button makes it easy for an individual to return to the home-page, should they feel lost or stuck in another setting. The display also includes temperature control for the driver’s, passengers, and overall temperature settings.
Pros
• Easy to navigate
• Easy to read display
• Very organized
• Home button is physical
Cons
• lacking in visual hierarchy,
contrast, and scale
• does not include visual breaks in
between sections.
2020 Audi E-Tron
The 2020 Audi E-Tron is a one-of-a-kind electric vehicle. This car includes 3 user interface displays: virtual cockpit, infotainment, and the cabin control. The virtual cockpit includes the navigation GPS system which is easier on the driver when looking at directions. The infotainment includes go-to access to most settings within the vehicle. The cabin control is solely for temperature control for the seats and AC. Lastly, the center console includes a unique and modern “clutch” that includes a trigger for the driver to toggle to P, R, N, D.
Pros
• quick access in the left panel
• even distribution
• range of colors
Cons
• display can be overwhelming
• screens can be distracting
• may be confusing to understand
Brainstorming & Empathy Map
After researching and deconstructing vehicles that include top of the line infotainment displays, it was important to create a process that shows what individuals would want, think, and do while operating on an autonomous vehicle.
Empathy Map
Questions
User Research Interviews
A series of interview questions were conducted through Google Forms. The survey provides crucial information about individuals needs, what type of mobile base they’re comfortable with, apps they use the most, and more. Majority of the participants were comfortable using an iOS mobile device, relied on Google Maps as a navigational guide, used Spotify as a primary media platform, and many claimed they lived in the city. Only a few participants said they have auto-pilot features and the majority said they don’t. Based on the survey, it was clear to create an infotainment display that’s evolved and advanced, but also included haptic sensory features to mimic the physical touch.
Overview
Majority of participants were familiar with tech devices and using different tech systems. Many participants were inclined to use their phones while driving using music, navigation, recommendations, and miscellaneous activities.
Problem
Most participants were worried about safety concerns, tech specs features failing, and losing sensory feelings with a digital screen. Some participants who were over the age of 65 claimed they were afraid of using autonomous vehicles, because they were too advanced or confusing compared to a traditional interior.
Solution
To create an enhanced and refined autonomous vehicle that will take care of the individual’s necessary needs.
IDEATE
The next step was to create a flowchart of the autonomous vehicle I created. This includes all features on existing cars plus more add ons like customizable features to each page.
User Persona & Journey Map
Layout Concept
Sketches
Once I created a flowchart and a user journey map, I then roughly sketched two main pages to see the direction I was going in.
Dashboard page sketch
Music page sketch
Design System
The next step was to create a design system to bring life and interaction with the product. This includes a color palette, iconography, typography.
PROTOTYPE
Below is a hi-fi prototype with explanations on each main page.
The default homepage offers you to customize the widgets in whatever way you would like. Individuals can see a glimpse of a navigation view, car status, and media platform. Each page will include the menu bar, cabin control, eco mode and emergency brake.
The media page allows you to have as many media-related apps on one, two, and more screens. Individuals will customize this page however they like.
The phone page includes FaceTime, Text Messages, Phone calls, and any other phone-related app. Individuals are capable of FaceTiming, taking calls, and texting while driving autonomously.
The car status shows most features status in one frame. Individuals will see different camera views and are automatically recorded, unlocking features like doors and more, as well as seeing the car’s speed-o-meter.
The settings page include changing display text size, color scheme ambiance, font type, owners manual, profile, and more. Individuals can reformat the style in any way they want, giving them more customizable features.
The more apps page allows you to download and browse any app that’s available through the infotainment system.
Hi-fi prototype with visual and audio explanation.