Tesla UI

Revamping the Tesla user interface for a seamless and futuristic experience

Project Overview

The Tesla Model 3 is intentionally designed without the driver in mind. With the introduction of the Full Self Driving (FSD) feature, Tesla designed their UI to highlight its autonomous driving capabilities. I aim to redesign the Tesla Model 3 UI to focus on the user as a driver by optimizing the layout of the screen. I want to decrease unnecessary distractions by providing users with easier access to controls and removing any difficult interactions.

Problem

The current Tesla Model 3 UI is not accessible while driving. Everything is placed into separate screens distracting drivers by making them dig for controls on the road.

Product Goals & Alignment

I began my research understanding the pain points of my users through a survey yielding over 100 responses from Tesla owners. Significant findings include too many interactions to access controls, swiping interactions not working properly while driving, difficulties finding specific music, and climate control taking up screen space.

User Interviews

I also conducted user interviews on the Music and Navigation features, gathering qualitative data about their experiences.

Significant Findings:

- 56% mentioned difficulty playing albums or songs while driving.

- 33% mentioned issues with the sliding interaction on the Music feature.

- 40% said trying to close Climate Controls instead adjusts the vents down.

- 33% said the Climate Control feature takes up too much space on the screen blocking other features.

Competitive Analysis

After user research, I started a SWOT analysis on a competitor named Rivian.

Strengths:

- Able to use Navigation, Music, and view Speedometer at the same time.

- Climate control is well designed and does not require many clicks.

- 40% said trying to close Climate Controls instead adjusts the vents down.

- Not cluttered due to using an “Apps” tab to open a multitude of options one at a time.

Weaknesses:

- Music looks one-dimensional (not able to search or view albums).

- “Apps” icon on the bottom right, farthest from the windshield.

- Does not show road speed limit.

Opportunities:

- Move the interactive toolbar to the top of the screen to be closest to the windshield.

- Place the “Apps” icon on the left of the center toolbar to make it more accessible (since it will be used often).

User Persona

I proceeded with a user persona. Due to having such a wide range of users, I decided to pick the most prominent demographic from my survey.

User Stories

I created two user stories to demonstrate the user in two situations related to the problems indicated in the research.

Wireframes

I started my wireframes by sketching out different screen layouts. Since I was designing for a unique interface, I wanted to spend ample time discovering solutions in this phase.

A/B Testing

With multiple layout ideas, I did A/B testing to understand what works best for users.

Early User Testing

I quickly tested these variations on users to determine which was the easiest for them to use. The results indicated this layout was the best.

High Fidelity Wireframing

I then moved onto high fidelity wireframes focusing on the location of primary signifiers.

Final Frames

From user survey results, I designed a customizable screen layout with quick controls for high-priority settings to decrease distractive screen interactions.

Reflections

User Testing

During user testing, I found that much of the issue still resided within specific features. So, I redesigned the Music and Climate Control features by removing sliding interactions that were problematic while driving.


Results

I learned that research is never impossible, no matter the constraints.

I need to place more thought into survey questions.

Conducting usability tests early while prototype isn’t final will be an efficient way to make iterations.

Future Developments

Visualize the airflow in a better way.

Implement Climate Control into panel layout.

Demonstrate removing and adding features to the main screen.

Figure out how to enlarge buttons while still providing users with everything they need.

Project Overview

The Tesla Model 3 is intentionally designed without the driver in mind. With the introduction of the Full Self Driving (FSD) feature, Tesla designed their UI to highlight its autonomous driving capabilities. I aim to redesign the Tesla Model 3 UI to focus on the user as a driver by optimizing the layout of the screen. I want to decrease unnecessary distractions by providing users with easier access to controls and removing any difficult interactions.

Problem

The current Tesla Model 3 UI is not accessible while driving. Everything is placed into separate screens distracting drivers by making them dig for controls on the road.