Tesla Controller

A user-friendly redesign
of the Tesla mobile app.

Class:
Senior Project

Year:
2019

Tools:
Adobe XD

For my senior project I set out to analyze the issues with Tesla’s official mobile application and redesign it into my own user friendly application. Currently, the official app has multiple usability issues like being unable to set the exact battery charge limit and having complications with the responsiveness and speed of the controls used to change the temperature in the vehicle. Based off of my research users asked for a more iconographic application where they could perform almost all functions on one screen.

The challenge was to use the skills I had learned from my focus areas in school (web design and user experience) and come up with a project that illustrated that I had mastered these abilities. Within an approximately 3 month time period I had to go through the whole user research process, the design process, collaborate with a software engineer to realize the design, and test it with users so I could make some final iterations.

Disclaimer: A lot of the issues that are mentioned within this page about the official Tesla application have been fixed in recent patches.

Survey

Created a demographics survey and sent it to Tesla users through forums, Reddit, and Facebook to better understand the demographics of the Tesla user base and find their likes and dislikes of the current mobile application.

81% of Tesla owners from the survey were male.
Males were more likely to own the Model S.
Users favorite thing about the current app was the iconography.

Personas

3 Personas were created that fit the demographics of the users surveyed. These were used to keep in mind who the application was being designed for during the whole design and user testing process. Each persona lined up with the users of each vehicle model.

Wireframes

Low fidelity wireframes were used to create the initial look of the application. Based off of the user surveys, users wanted a clear and simple interface to interact with. Many mentioned how they liked the icons from the official application so those were used as a starting point.

Mockup

Using Adobe XD, a mockup was created to provide a detailed view of the application. The mockup is used as both a prototype to view interactions with the app, as well as used by the app developer to use during the development process.

User Testing

After the app was coded, user experience testing was conducted with 5 representative users. According to Nielsen, 5 users are able to find 85% of usability problems. Based off of the user testing, the times to complete tasks were significantly improved when using my app.

Tasks

  1. Open the trunk.
  2. Unlock the car.
  3. Change the car temperature to 80 degrees F.
  4. Turn on the driver side seat heater.
  5. Open the charge port.
  6. Set the charge limit to 85%.