Redesigning the mobile app that Tesla deserves — a UX case study
I want to preface this case study by stating that I have the utmost respect for the designers and engineers at Tesla, and this redesign is born out of a desire to further my own education as a designer.
There are only a few tech companies in the world, at least in my mind, that really, really, truly care about design and innovation. Companies that dare to ask the crazy questions. To push the envelope further. And in recent years, nobody is better at this to me than Tesla.
And when it comes to disrupting an industry, few can boast quite like Tesla. They have disrupted a market that has been happily uninterrupted for the good part of a century. And they have achieved this because of their almost zealous commitment to asking questions, and answering them just as fearlessly.
The questions can be small such as “Why can’t a car key be a card?” Or grander such as “Why have a dashboard and tactile controls, when you’ve got a 15-inch behemoth of a display in front of you?” And of course, the question that started it all: “Why can’t cars be electric?”
However, my purpose in this article is not to discuss why Tesla is such a great company, because you already know that. Rather, my goal here is to examine one aspect that I feel has always been lacking that certain sense of polish — Tesla’s mobile application. For a company that has worked on interfaces as inspired as the one in the Model 3, I feel that their mobile app, by contrast, is far removed from the company’s ideals and philosophy.
On top of this, the Model 3 key fob is a whopping $150 extra, making the mobile application the primary way for an owner to interact with their car.
Tesla and its customers not only need, but deserve a better experience.
And so about two months ago, I embarked on probably my most extensive personal project yet. What you’ll find below is a case study detailing my thought process, and the potential solutions to the issues I see with Tesla’s mobile app.
The Problem
Before outlining my solution, I want to first dive deeper into why I think the Tesla app deserves a redesign in the first place. I mentioned briefly that I feel it does not adhere to the standard of which I hold Tesla to. You see, when you sit in a Tesla, you have the sudden feeling that you have without a doubt just stepped into the future. It’s as though Elon himself had loaned the car from the year 2050 using the same time machine he probably uses to run all of his companies.
The first thing that struck me when I looked at their mobile app was just the pure visual language. Most of the icons are inconsistent with those in the car, and the layout is little more than a glorified table view; far less inspiring than the car’s own interface.
However, the visual language is far from what drove me to redesign the application, as my intention was not to create an “Unsolicited Redesign”. What really drove me to pursue this redesign was the fundamental core app experience.
As I’ve mentioned above, the application is structured in what is essentially a table view. In the right circumstances, this is an effective solution. However, what it means for this app is that most of the controls are hidden behind doors, sacrificing time and more importantly screen real estate. For example, opening the trunk remotely requires two taps, once inside the app. And the climate control page has three buttons taking up the entirety of a single page.
But it’s just two taps; why does it matter that much?
It matters, as this is the primary way many Tesla owners are interfacing with their car, due to the lack of a key fob. The application should not only be easy to use but also, more importantly, as quick as a key fob. And so I ask, why not bring all the buttons and interactions to the forefront of the experience?
However, I didn’t just want to make a glorified key fob, I felt that this app could be so much more. This app should be the application for your car. The ultimate, no holds barred, go-to app that you use each and every time before you drive. The mobile application that makes your neighbors just as jealous of your app as they are of your car.
The Solution
Initial Research
I didn’t want to limit my initial research to just Tesla users and owners. If I was to create the ultimate driver experience, I also needed to consider valuable insights from all types of car owners.
What I quickly found out through my extensive survey’s and interviews, was that there are three things that most users do or want to do before entering their car, and these are:
- Maps and Navigation: “I can’t go anywhere without Google Maps.”
- Climate Control: “Heat seaters are love; heat seaters are life.”
- Audio Control: “Hand me the aux.”
Besides audio control (as Tesla automatically connects your music options through Bluetooth), these use cases are sorely missing or plainly underdeveloped in Tesla’s current build of their application. And so, I made sure to bring these core use cases to the forefront of my redesign.
Wireframes, Ideation, Process
Just like any other design project, I first took to pen and paper to ideate, experiment, and really just get everything that’s in my head out in the real world. I found it especially difficult with this project, because I was trying to restructure so much of the current nine pages into as much little space as possible. Compounding this fact was that early on I had ruled out structuring this app with a conventional tab view, since this would put me back where I started, as it required many of the functions to take two or more taps to complete.
Whenever I design, I like to look at many different sources of inspiration, and not just solely the pure competition in the market that it resides in. Throughout the years, I’ve found that:
Creativity is often taking two points from opposite ends of the spectrum and bringing them together into one cohesive idea.
And when it comes to design, that is no different. So I looked not only into car applications, but also TV remotes, Apple’s Control Center, smart homes, camera apps, health apps, map apps, and, weirdly, a really cool application about bugs.
And finally, through many iterations, critiques, reviews, a change from light to dark mode, two separate Sketch documents, and a lot of pixel pushing, I finally came to the screens that are presented today.
Core Experiences
Maps and Navigation
Although the Tesla app has a location page, this does no more than show you where you are in relation to your car. And users currently need to either enter the address they are going to once inside the car or turn to other map applications to navigate. This obviously creates some friction to the overall experience of driving a Tesla. Sure the big touch screen is nice and fun to use, but that novelty runs out quick, and tapping away hunched over a big screen to enter in directions soon becomes clunky and annoying. Users come from a place where entering information into Google Maps is not only the norm, but just so much faster and easier. Looking for a place on Yelp? You can immediately link out to maps, press “start”, and you’re done in no less than two taps.
Keeping in line with my principles, I chose to include the search bar in the middle of the application, so that it’s right at the user’s fingertips. This, of course, would sync with the navigation in your car, so anything entered into your phone would be immediately displayed in your car. Now, users will not only experience the same convenience as they would from entering addresses in Google Maps, but more importantly experience a seamless transition from their phone to their car.
Augmented Reality Wayfinding
I want to bring your attention to an icon that you may have noticed on the right side of the search bar.
Through my various iterations, one feature that I wanted to add was a better way of finding your car. It’s honestly slightly embarrassing just how many times I’ve forgotten where I’ve parked my car. Although the map does help it’s not always the best tell of where it actually is. To solve this problem, I designed an Augmented Reality Wayfinder.
I have limited experience when it comes to engineering, but I thought that it would be possible for your phone to save the car’s elevation and location when you parked. This information could then be used to locate the car later.
From a user’s perspective it makes finding your car an easy and enjoyable experience. With a map, you first have to figure out how to orient yourself to it, and the compass can often be inaccurate. With this feature you don’t even have to think about where you’re going; you just point and go.
Climate Control
As mentioned above, I found that one of the fundamental steps of a user’s journey before starting their trip was setting all the climate controls in their car. Currently, all the Tesla app can do is change the air temperature.
The Model 3 already has a beautiful control panel for climate, so why not bring that to the app?
By bringing users their entire suite of climate controls in a familiar package, it not only gives users more control than what they’ve previously had, but also makes interfacing between the car and the app a seamless and cohesive experience. With my redesign, I have put more climate functionality into the same space as one of Tesla’s own table cells than they had included in their entire app. And because I have been able to remove the entire climate page, your most important controls are now just a single tap away.
Borrowing a pattern from iOS’s Control Center, I went a step further and added 3D touch capabilities to reveal more advanced options, so that users can access the same controls that are available inside their car.
General Improvements
Unlocking
In addition to these core use cases, I aimed to also add some quality of life improvements as well as a visual overhaul to the app. To start, I came back to the key fob. One of the sacrifices of giving up a standard key fob for a purely digital one is the loss of tactile feedback; drivers today are used to being able to access a variety of functions just through touch and feel.
To accomplish this same effect, I designed a system that uses gestures and haptics, so now all a user has to do is swipe down anywhere and they will know exactly what they are doing, without ever having to look at it. This may seem slightly less intuitive at first than simply having buttons on the screen, but I think the tradeoff is worth it because it gives you back that sense of place that you get with a key fob.
Driver Settings
The icon in the top left corner accesses the hamburger menu. This is mostly a cleaned up version of the current application, but there are a few notable changes.
A great feature of Tesla vehicles is their ability to remember driver profiles — positioning of mirrors, seat, and steering wheel specific to each user. Currently, this can only be controlled through the car’s main interface. I wanted to be sure that these unique profiles were added to the app, enabling the car to know exactly who you are, and adjust these settings automatically when you approach the car.
Two other changes I’ve made are to move the valet mode and the charge limit to the driver settings. I moved the valet mode because I felt it made more sense if this option was under account settings, as it is essentially an extension of the ability to sign in and out of different user accounts.
I also felt the battery charge limit could live as an account setting since its purpose is just to limit the maximum charge on the battery. As this is something that is modified rarely, it seems wasteful for this feature to take up the real estate of an entire page. In contrast, I moved the charge port button to the row of icons at the bottom of the main screen, since this is accessed frequently.
Summon
In the current application, Tesla chooses to occupy the top right corner of the screen with their loot box, and places their “Summon” feature in the table view below. To me, the only reason why Tesla would choose to prominently display their loot box icon is to use it as a marketing tool. Although I can see how this may be a justification, I feel it’s effect on your ability to refer a friend to buy a $35,000+ car is pretty negligible, and apparently so did the many Tesla owners I interviewed. So, I have decided to leave it only in the settings menu.
I have decided to use this new found space for the summon remote, because, unlike the controls at the bottom of the screen, its function is more complex than simply changing a state or toggling a feature. Instead, it requires a full page with its own controls.
Besides a visual refresh, the summon remote page stays mostly the same as the one on the current application. Although I have experimented with different interactions, I felt that the current model was effective at its job, and was probably backed by countless hours of research on what would feel the safest to pilot your $35,000 car from your phone.
Status Snapshot
The next area of improvement is what I call the “status snapshot”. As the name implies, this is simply an overview of how your car is doing. This information is kind of all over the place with the current application. For example, interior temperature is a caption underneath the climate table cell, and ‘parked’ just appears awkwardly underneath the battery.
In my model, these status indicators all reside in the same place, making it easy to assess your car at a glance. I felt that keeping the car as it is in the current application was also necessary as it provides the ability for visual indicators of the car status; such as whether or not a door has been left open.
The Bottom Row
By reorganizing the entire structure of the application, I was able to populate a second row of icons with additional necessary remote functions. This row is the closest extension of the key fob metaphor, as these are all functions you’d find on a typical key fob. As mentioned before, I took the open charge port button from the current app’s “Charging Page” and placed it here. And, while I do have my gesture-based opening method for the frunk and trunk, I still wanted to include standard buttons for these actions as a secondary option. I also added an option to vent the windows and/or sunroof. Lastly, I combined flashing the lights and honking the horn into one “panic” button. Frankly, I don’t like the name, but looking at the many different key fobs on the market, the designation of “panic” for this kind of feature seemed to be an industry standard.
Reflection
I started this redesign really as a challenge. A challenge for me to start a personal project, and to see it through to the end. And I’m so glad I did.
Throughout school, I’ve done projects I’ve been assigned to do. In my internships and client work, I have worked on products the businesses needed. However, this was an opportunity to do something for its and my own sake; to fully explore my own sense of creativity and passion for design.
And well maybe it’s because it’s my last year in college, but that existentialism really has started to hit me. I remember in high school, I’d stay up long nights, working tirelessly on creative projects and passions. I’d grind until to 2 or 3 AM forgoing sleep and studies, because that was the only time in the day that I could work on it. I’d zone out in school, not because I was bored, but because to focus on anything else would be remiss.
I’m lucky and grateful that I’ve been able to study a creative field, and even more lucky to pursue it as a career. And although creative work is my life now, I think I’ve forgotten just how important it is to still get away from it all and do something by myself, for myself.
Thanks for Reading
Thank you so much for reading through this case study! I really didn’t expect to write this much, but honestly I’d quite like to try it again sometime. Hope you enjoyed learning about my design and thought process, and I’d love to hear your feedback and learn from you!
Sketch, Principle, Photoshop, and After Effects were used in combination for this project.
Hi, my name is Matthew Farmer.
I’m a digital product designer based in the Bay Area.
Feel free to reach out through Email or LinkedIn.
Catch me on Instagram | Dribbble.
