Tesla Motors Mobile UI Design


Tesla Model X

Description:

There are few companies I respect more than Tesla. The cars that they create are beautiful in both form and function, and their commitment to fostering sustainable energy is above admirable. I began following them as an admirer, and now I don’t think I will be able to justify buying a new car unless it is a Model 3. When I find a company that I respect this deeply, I almost immediately start analyzing their website for insights on design, architecture, and best practices.

While I was examining the Tesla Motors website, I found a discrepancy between the functionality and attention to detail between the sleek desktop site and the functional, but lackluster mobile site. I set out to solve some of those problems with a UI redesign that would extend up to the desktop and provide a truly responsive and more usable experience. Note: This is reflective of the Tesla site as of Summer of 2016.

Challenges:

  1. Create a more enticing and engaging mobile site that matches the polish of the desktop site.
  2. Improve mobile navigation usability without detracting from the brand identity.
  3. Create a truly responsive template that wouldn’t require completely separate layouts between devices.

View the Tesla UI Design

Tesla’s Current Mobile Homepage:

Current Tesla.com mobile homepage

This is a screen capture of Tesla’s current mobile site (as of July of 2016). It is by no means displeasing, but when it is compared to the desktop site - the layout and user experience feel lackluster. To get started, I’ll show you the large, scrolling mockup I have created. It provides all navigational and functional options of Tesla’s current mobile site, as well as its desktop experience as well.

My mockup of Tesla.com mobile homepage

The Interface:

As you can see from the first screenshot, the current Tesla mobile site feels almost like a fallback in comparison to the desktop site. If a user goes to the desktop site first, and then later visits teslamotors.com on their mobile device, they may be underwhelmed by the difference in experience. I am a firm believer that, despite the small screen size, a mobile interface can be just as rich and compelling as a desktop interface.

My addition of diagonal blocks and lines also breaks from the traditional box model of many modern web layouts, which serves to further illustrate the way that Tesla is far more than simply another car company.

Current Tesla.com mobile navigation

The Hamburger Menu:

In the current Tesla mobile site, they are using the “E” of the Tesla logo, or “3” as in “Model 3” for their hamburger menu icon, due to the similarity in shape. From a branding perspective, I understand this practice, however, by their very nature, hamburger menus obfuscate content. Now that hamburger menus have been adopted by Google in their material design design framework, they have a certain level of ubiquity that offsets usability problems with hiding nav items, but because some users aren’t incredibly familiar with hamburger menus to begin with, I thought it would be a more user-focused decision to use a typical hamburger icon. Using a traditional icon also has the added bonus of being easier to animate for into an “x” for closing the menu. Currently, on the Tesla mobile site, clicking on the hamburger icon activates an off-canvas menu, but the icon does not change or give the user any indication of how they may close the menu.

My mockup of Tesla.com mobile navigation

Mobile Navigation:

The changes I brought to the mobile navigation help visually break up the different sections of the Tesla website, which would help first-time users be able to navigate the site with more confidence. Additionally, the highlighted “Shop” and “My Tesla” buttons at the bottom of the navigation stick out far more than on the current navigation and draw more attention to two of the more important links in the navigation list. In particular, the red “My Tesla” button creates a distinct target for users that frequently come back to that portion of the website. Lastly, the typography in this mockup is significantly larger than the text in Tesla’s current off-canvas menu, which would help users with visual impairments see the navigation items better, and users with physical impairments to select the intended navigation item with ease.

Responsive Scalability:

While their are advantages and disadvantages to responsive design versus separate desktop, tablet, and mobile sites, I believe that the user interface design should be consistent across all platforms and devices, while still highlighting the benefits of each device (touch functionality, etc.). Below are the tablet and desktop variations of the site. You can see how the navigation and content change slightly to accommodate the screen size, yet still remain true to the look and feel of the mobile mockup.

My mockup of Tesla.com tablet layout

My mockup of Tesla.com tablet navigation

My mockup of Tesla.com desktop layout