Model 3 Car Variations Comparison

Car shopping online can be overwhelming considering all the options you have when making the right car purchase. For this project, we created a comparison table to support customers to select the features most important and find the model 3 is best for them. I worked together with design lead band manager, and we designed the user interface for mobile, tablet and web, and put together a prototype using InVision to demonstrate how it works.

My role: I collaborated with the product team and marketing team to understand user frustrations and business goals to create model 3 car comparison table which improves data visualization cross the platform.

Problem statement

Tesla has the various segment of model 3 and our starting price with $35,000. We got some callings and emails from our customers to ask about different model 3 because they cannot decide which one is fit for them to base on budget and time consuming. 

Here are two main problems that we want to solve for customers:

• Increase content engagement of Performance Model 3 without alienating Standard Model 3 customers.

• Clearly articulate value proposition for different Model 3 variants - "Which one is right for me?"

Solution

Place in customer journey:

Before we start to design the comparison table, we walk through the customer journey and decide where are the right places to provide the information right away. While displaying the comparison table, we provide our customers a chance to design their ideal Model 3 with friendly interaction, which would contribute in their final decision making of purchasing a TESLA vehicle.

• Current Model 3 Marketing Page

• Configurator - allow a comparison prior the final decision

Design goal: 

Create the consistency in content, scannability, and a simple layout that showcases the most important specification of useful comparison tables.

Empathize customers and do It as for a friend

How to make a compare page is highly visible?

We want to users are able to use this valuable information to help make an easy purchase decision.

Lead the user to checkout from comparison

We want to create an online experience that makes customers fall in love with TESLA product. The good shopping experiences are empathetic, guided, and clearly encouraging our customers to move from the model 3 configurator page to the check-out page.

Instead of anticipating shopper’s impulses, we aim to anticipate their needs and provide useful solutions for making their final decision.

However,  the following questions to help us to identify what our customers need:

• What questions do customers frequently ask customer service about?

• What does your ideal, target customer often need but may not think to buy?

Presenting the table and testing it out

The tables received very positive feedback from our internal team and we ended up surprising folks with how far we were able to get on this pattern. Of course there were a couple things that needed refinement, but many of the components got approved and were sent off to development and documentation!

Concept 1: Utilitarian

Focus on the specs with emphasis on simplicity and utility (scrollable list)

Final Decision: Horizontal table

The data is grouped into horizontally aligned columns. On a mobile screen the user is required to pan around to see different parts of the table. 

User story

As a user in the configurator, they should be able to quickly compare the three Model 3 trims so that they can make an informed purchase decision. We focused on nine varying Specs across which vehicles are compared:  Price (starting monthly price), Acceleration, Range, Top Speed, Drive, Delivery Timing, Interior Wheels and Premium Options. Designing the journey line to our checkout counter in a thoughtful, engaging way to keep customers on our pages and find a good way with an opportunity to increase sales. 

Description

• The user should be able to view the comparison table by clicking "compare" in the model 3 configurator. 

• The top section in the gray box should be sticky when scrolling vertically. 

• The user can scroll horizontally on mobile. 

Design iteration

Plan for comparison table

We are ready to reduce if customer experience requires less for easy comparison. And we still find the way to display well the remaining 6 specs that are identical. They are valuable to all models so help making a purchase decision. For vehicle variants we keep using the 3 from columns and we take out price on the marketing page. We also be ready to drop 2 and reduce the list down to 3 if user experience is not good with 5. We decided final Nine varying specs: Price,  Acceleration, Range, Top Speed, Drive, Delivery Timing, Interior, Wheels and Premium Options. We take out the same specs and selected top 5 specs; and decide without price on the marketing page and have price on configurator page, which to make a compare page is highly visible, users are able to use this valuable information to help make an easy purchase decision.

Design

Pick the right one for you!

Tesla recently updated its product sheet with a few examples of premium features, which are easy for Model 3 buyers will be able to purchase. We provide " Design Yours" button to give some suggestions to enhance their experience to create personalized model 3 car because they're one step from getting the car. With these strategies in mind, we can further engage our potential customers and help them to choose the right cars, therefore to increase the sales.

In store kiosk

We have created a kiosk in all retail stores where to show our model 3 showcase and display model 3 key differentiators. Our solution is to bring self-service experience to help customers to customize and purchase their model 3.