Tesla Motors Model S Design Studio - Alternate design

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 : 

Actual Tesla Motors Model S Design Studio

Actual Tesla Motors Model S Design Studio

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.  

These 2 drivetrains configurations' effect on range, acceleration and top speed are never shown together but instead require the prospective buying to flip the all-wheel drive selector on and off to compare how the All-wheel drive options affect the range acceleration and top speed of the 60 kWh battery car.

These 2 drivetrains configurations' effect on range, acceleration and top speed are never shown together but instead require the prospective buying to flip the all-wheel drive selector on and off to compare how the All-wheel drive options affect the range acceleration and top speed of the 60 kWh battery car.

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.

Prospective buyers need to flip back and forth many times from the Rear Wheel Drive and All-Wheel Drive option in order to see the impact these options have on Range (+8 miles), Top speed (No impact) and Acceleration (-0.3 second) on the 60 kWh car.

Prospective buyers need to flip back and forth many times from the Rear Wheel Drive and All-Wheel Drive option in order to see the impact these options have on Range (+8 miles), Top speed (No impact) and Acceleration (-0.3 second) on the 60 kWh car.

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.

Price summary

Price summary showing the guess-timated price  on top and the real invoice price the buyer will have to pay to get the car, at the bottom.

Price summary showing the guess-timated price  on top and the real invoice price the buyer will have to pay to get the car, at the bottom.

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). 

Comparison/Configurator Chart

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.

Price summary

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.

Final Result

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!

Pierre Roberge

 

 

Tesla Energy Indicator still does not scale properly

As I mentionned in my old post, Tesla's dashboard energy regeneration indicator does not use the same scale as the energy consumption indicator.  Even with the new revision of the dashboard that came with the Autopilot, Tesla did not fix this problem.

As you can see below, consuming 100kW or regenerating at 50kW are at the same distance from the  0 kW, giving a false impression to the driver that they are equivalent.  They are not.

This false impression can only be intentional and quite easy to defend against because Tesla can say : "It is easy to see that -50 kW and 100kW are really different quantities".  Good explanation but it does not matter, our reptilian brain will see both numbers as being the same absolute quantity.

This will give the false impression to the driver that stop-and-go traffic does not deplete the battery much because we can SEE we are putting back as much as we consume.  .

 

Tesla Model S configurator small improvement

Looking closely at the Tesla Model S configurator, I noticed that the options show a price only when the "Cash" method has been selected.  

Why not also show a price per month, cost per option when the "Lease" or "Loan" options have been selected?  That is not a complex calculation to make and would help people select the options that would satisfy their budget without having to  check and uncheck options to see their impact on the monthly payment.

Bad Password Rules can impact the User Experience

The company ADP.ca offers payroll services to enterprises.  They provide their clients' employees a portal where they can see and download their pay statements in PDF.

So far, this is great.  What is not great is that the first time employees access the site, they have to choose a password.  Look at the rules they have for choosing a password : 

There are way too many rules.  In fact, there are so many rules that they cannot even keep track of all of them themselves.  In the above picture we see that the password must contain at least 1 special character but when you try to enter a password with more than one special character, it gives you an error message, similar to the text above, saying that there must be only 1 special character!!!

By focusing on security above all else, they have stricter password rules than my own bank, they have sacrificed the experience of their clients' employees.

Almost correct

Graphic Designers think in terms of color, typography, space, ...  They are visual thinkers.  And yes, the visual aspects of a software impact the user experience.

UX designers focus on what is the problem that the client/user is trying to solve, what functionality will the software need to solve that problem and how does that functionality will be presented to the user.

Then we can start thinking about color, typography other visual design aspects.

UX experience first, Graphic design second.