Figma

What Tesla’s Model 3 UI reveals about its vision for the future

Tom Johnson
Tom Johnson, Purveyor of Pixels
What Tesla’s Model 3 UI reveals about its vision for the future

*If you’re a designer/car enthusiast this post is for you. I’ve broken down the details of the dashboard controls and interface of the Tesla Model 3, the first mass-market, touchscreen only electric car. The car’s UI design tells us a great deal about Tesla’s long term strategy, and their eyes toward a driverless future.

Here’s my Figma source file, and here’s a link to the prototype I made.*

I’ve been following the saga of the Tesla Model 3 since the beginning. Having test driven a Model S last year, and fallen in love with how it drives and how keenly in-tune Tesla is of the overall customer experience, I found myself hooked on the prospect of an “affordable” version of that same experience. So, as many of you out there might have done, I watched each announcement of the 3 and peeled back the layers of the web searching for details on how the dang thing would look and feel.

The first concepts were cool, but I don’t think I really believed that Tesla would ditch the dashboard when the car was ready for consumers. “That may be cool now, but the marketing people or consumers won’t let that fly. It’s just a concept” said I, knowingly slow-nodding in wisdom to myself.

Well… my nods were wrong. They shipped the damn thing without a dashboard.

Or knobs.

Or air-conditioning vents.

Or a handle to open the glovebox.

1 g0vpenwvBuXr 8pZSlL eA

Instead they stuck all of that in a touchscreen mounted smack-dab in the middle of the car. They weren’t even trying to hide it, the middle screen was basically a giant middle finger to the rest of the car-building world; a not-so-subtle “F-you” to the naysayers, the disbelievers, and the other car companies who insisted on playing it safe. Tesla got rid of the engine, but they’d go as far as it took to shake up a 100 year old industry; nothing is sacred. The Model 3 may have four wheels and a car-shaped body, but that’s where its similarity to most cars end.

This Thing is Different

Tesla’s news may have awed me, but I wasn’t totally sold. I joined the critical throngs with many a “whaaaa???” and a few “harumphs” and “pshaw”s thrown in for good measure.

The Model 3 may have four wheels and a car-shaped body, but that’s where its similarity to most cars end.

I wanted to know how Tesla would hide all control for the car behind a pane of glass, so I started scouring the interwebs for any and all information about the UI. It took awhile, but I finally came across a project by a designer named Andrew Goodlad who, I think, had recreated the Tesla Model 3 UI from press releases and shaky YouTube videos of the car’s interior. He had made a prototype and everything.

Why I Decided to Recreate the UI

His prototype was cool, but the static imagery wasn’t quite enough to sate my curiosity. I wanted to analyze the hell out of the components and understand exactly how Tesla designed its crazy new car dashboard….and why.

So… I downloaded jpegs of all of the screens using CSS Peeper.

And then I pasted them into Figma.

…… And then, without a second’s hesitation, I started recreating the Tesla Model 3 UI from the images. I made the icons, sampled colors, designed a custom mapbox view, pieced together Figma components, switches, buttons, everything. It was therapeutic to trace over someone else’s work like I used to do when I was a kid with the Sunday comics. If tracing Snoopy and Bugs Bunny taught me how to draw, maybe tracing here would help me think about the difficulty of making a car UI.

It was therapeutic to trace over someone else’s work like I used to do when I was a kid with the Sunday comics.

I do most of my design work in Figma. I’ve written about why in the past, but basically, it’s web-based so I can share it easily with you all. It also enables me to make and prototype interfaces like this really efficiently and easily. Here’s a link to my source file if you’re into that type of thing:

1 68gThttRkqsUyHO STm6Dw

[https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3](https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3 And here’s the clickable prototype of that same file: https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923)

And here’s the clickable prototype of that same file:

https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923

1 svFWeiGa YZgjaF5htoLUA

Sidenote: If there’s some interest in why and how the Figma file is set up the way it is, let me know in the comments. Toward the end when I composed it together into a prototype, I found that using the system of components in the way that I did was craaaaaazy fast to prototype with. As a matter of fact, that part took me less than a half an hour, which I did NOT expect to be saying. I was just going to link a few of the screens together for the purposes of this post, but now I’m thinking I have to write about that crazy goodness separately. If I ever do, I’ll link it right here → …..

What I learned from the Model 3 UI design

This car was not designed for a perfect driving experience

Whattt???

Yes. I said it.

The Tesla Model 3 is a car designed without the driver in mind. Intentionally.

There’s no knobs. There’s barely a steering wheel, for goodness sake. You have to tap a screen to turn on the windshield wipers. (edit you have a console lever to turn them on, but frequency is controlled via the screen) You have to tap a screen to open the glovebox. You have to tap a screen to turn on the emergency brake (edit this also is appears to be automatic, but manual application does appear to be in the settings). Doesn’t this all sound awful for a driver? They can no longer rely on their sheer instinct and muscle memory to operate their car.

I don’t think Tesla did this simply to be edgy, dangerous or different. They did this to prepare people for a world without drivers.

This car was designed for the riding experience

In the UI one factor and one factor alone told me everything: The screen resolution.

This car could have gone with a vertical screen, just like the Models S and X. But it didn’t. Instead, the Model 3 has a 8:5 aspect ratio and a resolution of about 1920x1200px. Why is this important?

That’s an HDTV, folks.

Well, the bottom (persistent) controls are 120px tall.

1200–120=1080.

1920x1080.

That’s an HDTV, folks.

1 O9tqrRBZUqSq1Z9qsMvbCg

Netflix and thrill

Okay, so finding words that rhyme with chill is hard. It’s a bad pun, I get it.

The HDTV resolution suggests that Tesla made their center console for watching things, not for driving the car. This bad boy is allllll about the driverless future. This isn’t a car with a weird dashboard, this is a mobile living room. It’s a long play, with the understanding that when regulations and technology are in place, there will be no better place to watch movies than right smack dab in the middle of the car.

This isn’t a car with a weird dashboard, this is a mobile living room.

I am by no means Elon Musk’s right hand man — these are just guesses, opinions, and conjectures. So please, put out the torches and re-hay bale the pitchforks if and when I turn out to be wrong.

Breaking down the UI

Here’s some screenshots of the different parts of the UI.

Driving Mode — En Route

1 CIiydHnU1El1PIauBFyxMA

Link

It’s worth noting that the dashboard is within arm’s length of the driver and will be in the peripheral view of the driver. For right hand drive markets, this view could easily be flipped. Smart engineering right there.

Parked Mode

1 zvxLo2I4zEoNydV 0WOTng

Link

It looks like the Model 3 has a lot of contextual elements. For example, when you park, only the controls that are applicable to being parked show up. It may seem obvious, but it’s pretty smart.

Quick Settings

1 Ai355ZXq34e0yyZtdjvV2A

Link

There’s a lot of settings in this car, but it looks like you’ll be able to configure a quick controls section so that the most used features are in view. It could also be possible that these are populated automatically, but there’s no way of knowing.

Music Controls

1 N8yWkiwLegFUAXYmzQ8C2w

Link

There seems to be a clear emphasis on the albums rather than individual songs, so I’m wondering how much voice control this car will have.

Closing Thoughts

Recently I was rewatching the Keynote where Steve Jobs introduced the original iPhone and was struck with a clear similarity to the Model 3 and the iPhone.

No physical buttons.

Here’s the part that jumped out to me:

Jobs showed all of the other major smartphones in the industry to the audience, and in hindsight their cluttered, fixed, physical keys have not aged well. If anyone today were to introduce phone with fixed physical hardware, they’d get laughed out of the building.

But why do we not look at cars the same way? Why do we, or maybe just I, look at a single display in a car and balk at how that would never work? How is this different from when Apple ditched the keyboard?

I know what you’re saying, that was a phone, this is a car. The interaction methods and use cases are clearly different.

But software can be updated. Physical buttons cannot get over-the-air fixes. They cannot be improved upon. They cannot change. Maybe this isn’t such a crazy idea, after all.

I’m a Product Designer located outside of Atlanta. Check out my work on my website. I occasionally tweet, but most of the time I spend time with my wife. She’s a lifestyle blogger and an incredible lady. Also, Hondo, our Bernese mountain dog is pretty cool too. I was compensated by Figma to write this article, but I made and designed the UI on my own.