“As a Tesla driver I want the experience to be comprehensive, easy to navigate, and to be close to 100% efficient at every interaction, so I can feel safe while I’m driving.”
For millions of people, Tesla needs no introduction. For everybody else, Tesla creates electric vehicles that can be better, quicker and more fun to drive than gasoline cars. But if you’ve ever driven a Tesla, you’ll discover something incredible. Tesla design their vehicles not for the perfect driving experience, but for the perfect riding experience. This however isn’t reflected well enough in the in-car dashboard and it’s something I took on myself to fix.
Components, components everywhere
By creating low-fi layout concepts, I can easily visualise the product architecture and how people will interact with it. From these foundations I can create user flows from the beginning of the journey to the desired destination.
Building off strengths
The text content represents more than 80% of the design, so understanding typography is crucial. I always put readability first. The default font for iOS is San Francisco, which is made in-house by Apple. I always use this system font for my projects because it’s beautiful, free and most importantly, designed for legibility.
#FACC48
Sunglow
#F99716
Nârenji Orange
#0BE881
Spring Green
#05C46B
Jade
#00D8D6
Dark Turquoise
#0FBCF9
Spiro Disco
Transmissions and transitions
I also enjoy creating moodboards. This helps me visualise the aesthetics of the project. It keeps me aligned on the vision and gives me something to revisit and helps to keep the coherency of the project. It’s a way to keep myself inspired.
Let's go for a ride
Just like a great business plan is nothing without master execution, a great design mockup is nothing, without careful consideration to UI from the UX research and extreme dedication to details.
You’ve almost convinced me I’m real
By creating a product quality deliverable to learn is a huge investment of resources. Even if it is of minimal design and functionality. By testing prototypes rather than functional products, I can move even quicker and pivot when an opportunity is discovered. All my interactive prototypes are built with Framer X.
Interact with Framer prototype below.
The nuts and bolts
When designing the experience and interactions of a product, my focus and objective is to get the user to her desired destination with as little work as possible. To do this, I need to discover what the secrets are at the core of her problem, define objectives and then expand outwards.
Spendin' some time on the road
Exploring how customers feel about Tesla I decided to create personas and build empathy for the different experiences. This research was based on assumptions mostly, however, I have driven a Tesla Model X on multiple occasions so I could act as a Tesla owner using my own experience and a little intuition.
Setting the scene
During my research I discovered many different scenarios of the driving experience which resulted in the following:
01.
Scenario: User experiences transition from autonomous driving by voice controlled assistant.
02.
Scenario: Users first experience with screen only control system for a car interior. Will she be comfortable?
03.
Scenario: User is comfortable with Autonomous driving. Now, she wants to watch Netflix while driving.
No pain no gain
Summarising the research and user persona’s, I created multiple empathy maps and developed the following considerations:
01.
How will the user feel safe with autonomous driving?
People feel safe when they’re feel in control. If you give the user constnt visual and motion feedback that everything is under control, they’ll be relaxed and comfortable.
02.
How much control will the user have of the driving experience?
The current Tesla UI model is difficult to navigate. It's not clear how to return back to the main dashboard when on different screens.
03.
There won't be any physical components in the car. Literally none. How will the UI will have to compensate for that?
Accessibility is key. Limit the amount of pages and navigation.
Pencils before pixels
After synthesising the context of the pains and gains and assuming scenearios, comes my favourite part of the process. Ideation.
Pedal to the metal
Implementation of the components after the sketches and blueprints were validated. To understand why, read the descriptions below.
- - Starting from the right side of the dashboard. Why? Because we’re driving on left here in the UK. That means the driver will be sitting on the right hand side so it’s important to have this high priority information closet her.
- - The component is sleek and minimal. Avoiding unnecessary distractions.
- - Speed dials are a thing of the past. With digital improvements to car interfaces text based representations of the vehicles speed the most simplest way to show the user how fast they’re travelling. It’s big and bold and hard to miss.
- - The model of the car very effectively illustrates the states of the vehicle, especially when autonomous drive is activated.
- - The two interactive buttons to the left and right of the image of the car are clear on what they do. Switch on/off the lights and activate autonomous driving.
- - The circles under the car image are visual representation of the car creating a 3D map of the world (this is how auto driving is able to function technically. I discovered this after the research I did for this project).
- - The coloured lines are “proximity warnings”. If it’s green there’s a safe distance between you and the exterior object, orange it’s pretty close and red you should be extra careful.
- - At the bottom is a clear transmission indicator. the other forms of transmission are faded to ensure the user know what way they’re moving.
- - The control centre is conveniently located in the middle of the screen. That’s because it’s the second priority to the driver. If she wants to see how much power she has for her trip, the information is noticeable and clear. Right at the top, with no way to miss with the colour identification.
- - Toggles are a familiar part of interface design. There’s no point re-inventing the wheel. It’s important to adhere to common practices to avoid confusion.
- - You guessed it — the dotted icon is Elliot, the AI assistant for the car.
- - The use of appropriate icons are also essential on the control buttons. Don't be abstract for the sake of cool design. Cool doesn't mean it’s good. In this situation the icons need to be an exact representation of the physical object.
- - Are you wondering what happens if you tap a button? Hold tight, you’re about to find out.
- - The next component within the Main Dashboard is the GPS map interface. Simple and clean. Only important information is visual on the map.
- - The user has a visual on the distance and time it’s going to take. The battery is an estimation on how much power will be available when the journey is complete.
- - The thunderbolts display charging points that are compatible with a Tesla. The thunderbolts that are faded represent charging points that are out of range for the user to drive to.
- - This is a music player in it’s simplest form. The user can view it’s current loaded album/playlist, select songs and play.
- - If a user wants to choose a song from another album/playlist, she can tap the music icon within the control centre to see her full collection.
- - Need to adjust the volume? If the user taps on the the sound icon, she’ll be presented with a full screen volume control.
What I found out
The team at Tesla spend every waking hour to make the perfect riding experience. The amount of research, testing and iterations go beyond what I can personally imagine and the time to get it right lasts much longer than the average software delivery cycle. However, they have access to a lot of data and research to accomplish what they have (I don’t).
The amount of research and data collected by myself is mostly based on assumptions and what’s available on the web, so I don’t claim that my decisions are better or worse, simply from a different perspective.
There’s still many more features that I havn’t explained, but like any design project, I’ll keep iterating and explaing my rationale behind the descions, big or small.
“Check out this Tesla Dashboard concept by @louisomoody”
Gravity
