I have been playing quite a bit with the Tesla Motors Model S Design Studio, in part because I love EVs and Teslas in particular. But something has been bugging me for a while. Even more so since the appearance of the Model S 60 kWh battery option. The current Design studio was changed recently to make some UI improvements regarding the initial design that appeared when the 60kWh option was first added. This problem has been partly fixed but there is still some UX work to be done on this UI. Let me show you the specific section I would like to talk about. This is the current Tesla Model S Design Studio for the Drivetrain selection at the time of publishing this post :
This section allows the future buyer select the drivetrain options, after having selected the paint color, wheels, interior and sunroof and before selecting options like Autopilot, Smart suspension and others.
Let's first look at the positives.
What is good
The layout looks very clean, is attractive, compact and easy to read. It is separated in 3 zones: on top, we see the 3 choices of battery size 60, 75 and 90. At the bottom, we see the choice of Rear Wheel or All Wheel Drive and on the right we see the actual price the buyer will have to pay based on his/her selection so far.
What could be improved
Help Buyers reach their goal easier and faster
The current focus of this design is to make the product configurator visually simple but its drawback is that it requires mental work and multiple clicks for buyers to achieve their goal.
The goal of a buyer when designing a Tesla Model S is to find the right compromise.
People tend to have an approximate idea of what they are willing to pay. Few people have a very fixed price in mind and most people have a range of price in mind. Both of them need to understand the different combinations available that conform to their fixed or approximate price range. In order to do so, they need to look at all the different combinations that are possible in their desired price range.
This is where the current design could do better. It does not show, side-by-side the different combinations within one's price range. In order to fully understand all the price, mileage and performance impact of each choice and compare them between one another, the user must be doing multiple clicking back and forth, flipping options on and off to see their effect.
For example, selecting the 60 kWh battery with all wheel-drive, does not show anymore, the cost of the rear wheel drive option neither its effect on performance nor range. So for the buyer to know exactly how much more range and how much more performance he/she is getting with dual-motor (All-wheel drive) he/she needs to remember the previous values in his/her head and click to compare the new values with the option selected.
A comparison design would serve the buyer better than a product configurator design which assumes the buyer knows the options he/she wants and only has to select them. Tesla Motors tries to fulfill this need to some extent by displaying the additional cost of choosing the all-wheel drive option where it can be selected. That is good but there is nothing that helps for the range, acceleration and top speed.
The Price summary on the right also causes some problems in my opinion.
Firstly, the first number it shows on top, which is the first number we see as we click on the options, is the guess-timated price the user will pay after estimated gas savings and Federal Tax Credit. I understand that Tesla wants to make it loud and clear that buying and owning a Tesla is cheaper than buying and owning an internal combustion engine but I think they could achieve this without confusing the guess-timated price with the real price people will have to pay upfront to get the car.
In the same vein, it is psychologically better to shock the prospective buyer with the higher price first and then mention that they may substract $7,500 because of the Federal Tax Credit and then show them the 2nd carrot, how much gas savings will amount to throughout the first 5 years of ownership.
Secondly, it shows the current price of all the options selected but does not show what are these options are, unless the user clicks on a link at the bottom. In my opinion, too much screen real estate is spent explaining that the total cost of ownership of EVs is lower. That space could be better used to give feedback as to which options have been selected so far and their impact on price.
How can we improve the drivetrain selection
Instead of letting the buyer turn drivetrain options on and off, why not show all the possible resulting drivetrains vertically along with their characteristics, allowing the buyer to easily compare them in space rather than in time.
For example, we see in the screenshot displayed on the right that the 90D is the drivetrain with the highest range (294) just by quickly glancing up and down at the Range column across the drivetrains combinations. No need to remember any number, they are all displayed.
We can also see that there is quite a bit jump in range between the 60D (218 miles) and the 75 (249 miles) for a mere $3,500 more, if someone can live without All-wheel drive.
For $10,000, you could go for a 75D to a 90D to gain 1 full second on the 0-60 mph acceleration.
Going from the 90D to the P90D would cost you $20,000, a large sum of money. But if you really want to drop your 0-60 mph acceleration from 4.2 seconds to 3.1, that is the way to do it. Don't forget, by the way, that your range will drop from 294 miles to 270 miles.
You get the idea. Prospective buyers have a price in mind they are willing to abide by BUT they might be able to go over that price somewhat if it is getting them a certain additional amount of what they care more for : acceleration, range or top speed. Only a comparison layout helps them efficiently find the right compromise for them without too much mental work.
Displaying all the possible drivetrains also helps getting rid of these 2 options button. Since the comparison layout could be used to highlight the Max range combination (Green) and Max performance combination (Red).
It is typical for e-commerce site to offer comparison charts to allow buyers to compare the different models or different option per model. These comparisons are typically shown on a separate page from the actual "Build your own car" page.
In the case of Tesla, since the Models has "only" 7 drivetrains combinations (even less for the Model X), it is possible to show them as a comparison chart would while still keeping the buyer in the "Build your own car" mode.
This works even better if we add an All-wheel drive switch. Some buyers are adamant they want All-wheel drive. For them, we could add an All-wheel drive switch that would eliminate all rear wheel drive combinations leaving 5 total combinations, making it even easier for the buyer to find the right compromise.
Last but not least, the price summary section.
In this section, I feel there is a missed opportunity to first showcase on top, the car the buyer has already customized so far to his liking on the top page of the Design studio. The buyer has already invested him or herself emotionally in designing HIS/HER Model S so why not let him/her see it in the price summary. The buyer will be more likely to buy if he sees the object of his passion, lying there, only one click away.
Then, we could show all the selections the buyer has made before the drivetrain selection. We could also put a subtotal for each section (not included in the screenshot). The goal is to show the buyer everything that goes into the price shown in the Price summary.
The actual price to leave, legally, with the car could be shown with the call to action, followed by the Credits & savings section where we could show how much money the buyer would save later on.
After the initial price shock, the Credits & savings section would be there to show him/her that in fact, he/she is not really paying the full amount because, he/she would be getting cash back and saving money on gas he/she will no longer have to pay. This trick is successfully used by Paid advertisement shows on TV late a night. You won't pay 400$, not 300$, not even 200$, only 3 payment of 59$.
Last point, the color blue is used to indicate buyer's selection so it makes sense to me to keep this concept that blue means : "this is what I am buying" when showing the options selected for purchase. This is why the Price summary is blue.
All in all, the screenshot at the bottom of this article is what all the pieces discussed so far would look like put together.
I hope you enjoyed the reading this post, I sure enjoyed thinking about this.
And yes, the selection shown in these screenshot is the Model S I would configure for myself.
Happy EV driving!