Volkswagen: Autonomous Car Interface
Quick Glance
ROLE
UI/UX Designer, Concept Design, Branding
DURATION
7 weeks
TOOLS
Figma, Ai, Ps
Introduction
📣 OVERVIEW
Self-driving cars are no longer sci-fi. For this project, I reimagined what an innovative user experience would look like and designed a smart, easy-to-use interface to match. Think: simple navigation, customizable controls, and effortless multitasking—everything you need to sit back, relax, and enjoy the ride.
The Challenge
🤔
How might we transform the driving experience into something more meaningful—something that goes beyond simply getting from point A to point B? What if the journey itself could be more enjoyable, productive, or even restorative?
Project Goals
🎯 OBJECTIVE
-
Features and design elements that prioritize user safety, such as a clear navigation system.
-
Include easy access to various apps and features based on the user's preferences.
-
Develop features that allow users to personalize their experience within the autonomous vehicle.
-
Design an interface that provides an overall seamless and intuitive experience for users, minimizing distractions and maximizing ease of use.
Design Process
To address the challenge at hand, I structured my design process into five detailed steps.
Research
Solution
Ideation
Design
Test
Competitive research and user research / CJM.
The outcome derived from comprehensive research, including a UJM.
Branding of the product, including sketching phase.
UI development of the product and final screens.
Create a prototype and gather input from users.
RESEARCH
🔍 Field Research
To kick off the project, I conducted a comprehensive analysis of the Tesla Model S interface. I was fortunate to have access to the actual car, which gave me valuable hands-on insights. This exploration helped me understand market dynamics, uncover existing issues, and identify potential design opportunities.
What Did I Discover?
-
The Tesla Model S offers a spacious interior and strong durability, the perfect blend of performance and comfort.
-
This model offers a giant interface with a clean, modern, and minimal look.
-
The Model S provides a secondary display for the gauge cluster and a small touchpad in the rear seat as well.
⚖️ Evaluating the Pros and Cons
Pros
Cons
-
Convenient features display.
-
Convenient way to adjust air flow on A/C panel.
-
expansion of music panel with an easy swipe up.
-
Simple navigation system with a large map view.
-
Design may prove complicated for a new owner.
-
No option to make phone calls from main menu.
-
A/C controls are very small in the main menu panel.
-
Car map is always displayed.
🧐 Gathering Insights...
I developed a flowchart and inventory of assets for the Tesla Model S to gain a better understanding of the interface's structure.
👨🏻💻 User Research
I conducted an online user interview survey to better understand my target audience. From the insights gathered, I created a user persona, empathy map, and user journey map to clearly visualize their needs, motivations, and pain points.
Main Survey Insights ⬇️
1. Most people surveyed have over half an hour of a commute to work.
2. Majority of people want to be able to customize their car dashboard.
3. 88.7% of people reported that would prefer to have quick controls / actions on their home dash.
Now, Let's Define the User...
After gathering insights from user research, I created a user persona to clearly define the primary use case I would focus on for this project.
Exploring use case:
Because of extended workdays and commutes, Esther enjoys taking naps in her car between meetings. To enhance her nap experience, she customizes a theme specifically for relaxation. Esther accesses the themes panel in the car controls and chooses "create theme." She incorporates features like soothing cabin lighting, a calming aroma, an alarm, optimal temperature settings, and adjustable seat recline for max comfort.
To develop features that would satisfy the user...
I created an empathy map and a user journey to better understand what the experience feels like from the user's perspective. This helped me design a solution that truly aligns with their specific needs.
Thinking
Seeing / Hearing
Pain Points
Gain / Want
SOLUTION
🚀 Adaptable Dashboard
From user and field research, it became clear we needed a dashboard that adapts to each driver's unique preferences. So, I designed a customizable home screen where users can set quick-access options and create their own themes for a more personal driving experience. I also built in an easy-to-use navigation system with scheduled reminders, plus an apps hub to keep things simple and distraction-free on the road.
This concept centers around the following key focuses:
-
Facilitate simple communication and interaction within the dashboard.
-
Create a personalized driving experience that is adaptable to each driver's preferences.
-
Include an intuitive navigation system to simplify the overall driving experience.
-
Maintain a consistent layout and accessibility to ensure a user-friendly experience.
Start Car
Select Car Control
Navigate to
Themes
Select Create
Theme
Name Theme & Select Image
Customize Features
Done!
Establishing the Foundation
Before jumping into design, I mapped out a user flowchart to visualize the journey based on user needs and the project’s use case
📢 Design Principles
Based on my research, I also identified and mapped out three key design principles that would be essential to the success of this project.
01
02
03
Safe &
Responsible
Familiar &
Natural
Elegant &
Sophisticated
The design should provide the tools and knowledge necessary to inspire credence and reliability.
The experience should foster a sense of ease and comfort. Interactions should feel intuitive, providing clear guidance and information.
The user experience should feel futuristic and intelligent. The interface's aesthetic should embody sleekness and luxury, offering a seamless experience.
IDEATE
🎨 Developing the Identity
I created a style guide that would serve as the blueprint for the ultimate dashboard design. It includes color schemes, typography, primary icons, and UI elements. The chosen color palette is curated to elevate the user experience, aiming for a sense of sophistication and reliance.
I used color psychology here in the following way:
-
Deep shades of blue and black to evoke sophistication, elegance, and trust.
-
Vivid green as the accent hue to inspire feelings of achievement and motivation.
Primary
#383C41
#464C54
#505B68
#C4C4C4
#F0F0F0
Accent
#BBD17E
DESIGN
🔧 Laying the Groundwork
After pulling together all the research and my proposed solution, I sketched out 40+ wireframes to shape the look and feel of the experience. Here’s a peek at the low-fidelity wireframes I created to explore the main features and layout of the dashboard.
FINAL EXPERIENCE
🛞 Beyond the Wheel: Exploring the Dashboard
Splash and Onboarding
When the vehicle powers on, users land on the default Dashboard screen, where they can customize quick-access features to match their preferences. The info is arranged in a bento-style grid, making it easy to scan and helping drivers make quick decisions on the go.
The primary navigation bar features seven main tab options:
-
Home: containing customizable quick-access features for the driver.
-
Navigation: pre-set maps featuring rapid navigation choices.
-
Car Controls: access a range of control functionalities.
-
Cabin Temp.: instant access to cabin temperature control.
-
Media: media player synced with the driver's phone or preferred app.
-
Apps: the drivers' downloaded applications.
-
Calendar: synced calendar from the driver’s phone.
Navigations
The navigation screen includes a handy feature that lets drivers quickly access upcoming events or appointments through a simple navigate pop-up. They can also tap the down arrow in the search bar to view saved favorites and recent locations in a snap.
I focused on keeping the design clean and straightforward, so drivers can stay focused on the road—even when picking a destination on the go.
Media and Apps
The media player syncs effortlessly with the driver’s phone, showing their music library by default for quick and easy access to their favorite tunes.
On the Apps screen, all downloaded apps are neatly displayed, making it simple for drivers to add, remove, or rearrange them with just a few taps.
Car Controls and Themes
The Car Controls screen gives drivers easy access to key features like lighting, quick settings, and autopilot. A consistent layout across the interface helps keep navigation smooth and intuitive.
In this use-case, the driver creates a custom theme for nap time using the Themes feature—accessible right from the car controls panel. The design is clean, ergonomic, and built for quick, satisfying interactions.
Dark to Light Mode
I designed the dashboard interface with dark mode as the default to reduce screen glare and help the driver stay focused on the road. I did however make sure to include an option for users to switch to light mode if they prefer.
🧩 Use Case Prototype: Creating a Theme
In this scenario, the user, who leads a busy lifestyle, creates a custom theme in their smart car to make the most of any downtime for a quick nap. They personalize the theme by adjusting settings like dimmed lighting, soothing aromas, ideal temperature, and reclined seating, all designed to maximize comfort and relaxation.
REFLECTION
🩵 Final Thoughts and Learnings
This project is one of my favorites because it gave me the freedom to design a futuristic car interface without limitations. I spent the first ~2 weeks conducting in-depth market research, studying Tesla (which I now want 😅), analyzing their methods, and creating user flows to understand how my interface could function in real-world scenarios. Along the way, I learned the importance of simplifying complex and expansive ideas—a lesson that has definitely influenced my design approach.
A key takeaway from this project was learning the importance of purpose-driven design. My goal was to create a unique, forward-thinking self-driving car dashboard that embodied the sleek, futuristic essence of autonomous cars. Given the project's scope, I focused on a central theme that would provide a meaningful experience for the driver. This approach allowed me to design an innovative user experience that enhances the immersive journey of autonomous driving.