Redesigning Tesla’s Charging UX
A breakdown of growth.design’s tesla case study and it’s future applications
I came across the amazing case study repository from the guys over at growth.design as they have multiple case studies formatted in this “choose your adventure” way where you can go through as many design case studies as you want! I literally fell in love of with them — they feel like you are watching a story unfold and giving you a lesson with every page!
That being said, I went down a rabbit hole of these case studies and really liked how they redesigned tesla’s charging experience — here are the biggest highlights:
💎 Skeuomorphism
During the first analysis of the car OS and the phone OS, they brought up the term skeuomorphism. Skeuomorphism is when you take aspects from the real world to implement into the design (look above 👆)
This is an effective way in showing users how much battery is left in the car that is more creative than just simply using a battery icon that we are used to on most mobile devices.
🧠 Value > Cost
As they start analyzing the car’s OS — they get into a section of the car where they pose the question above → how can the screen show the impact over the costs you incur?
This then led to the first psychology lesson: emphasizing value over the cost.
For tesla, this means to “bring more focus to the benefits (gasoline savings, environmental advantages)” From this lesson, this is what they redesigned it to 👇
🧲 Word-of-Mouth
With tesla’s OS fixed, the second component was to redesign the mobile OS so that it prompted to better word-of-mouth marketing. Here’s a before & after of what they did:
Here’s what changed:
- Minimized the charging icon to allow for more screen real estate
- Added a rendering of the car in the foreground (making skeuomorphism more apparent here)
- Highlighted how much they saved (Value > Cost)
- A call to action button to create better word-of-mouth marketing through social media, tesla supercharger stations, tesla retail spaces, & more!
🧠 Peak-End Rule
The last highlight in the case is the offboarding process. Here’s a before & after 👇
here’s what changed:
- Provided value by showing the user what they just did
- Created a sense of brand loyalty and a a possible dopamine hit of the user’s actions.
These two changes were all caused by another psychology concept of the Peak-End Rule.
The Peak End Rule essentially states that — “We judge our experiences almost entirely by their peaks (pleasant and unpleasant) and how they ended.”
By providing the company values from start to end in the charging experience will get consumers to start identifying with the tesla brand more and moreover — making them feel better anytime they decide to enter a supercharger!
With that being said here are some personal takeaways & applications from this case:
(1) 💎 New Era of Design: With the highlight of 3D renderings of the car, it got me thinking about how we are moving away from flat design and using skeumorphism as the gateway to a new era of design. check out brian chesky’s article on the shift from flat design into a new era here.
(2) 👁️ Company Vision: the vision of the company needs to be implemented into the design from opening to close of the product. The vision sets values of the company and if the value is not conveyed to the customer in the easiest way possible, things need to be re-strategized.
(3) 📊 Fogg Behavioral Model: The fogg behavioral model says that “small nudges in our personal path remind us to take action”
I’ve never seen this concept mapped out before, but it can explain a lot in our personal lives, the more we are nudged, the more action we can take. It explains so much about our own personal lives & design.
For example, think of the C2A button that the case used or even present in how we work with 🤖AI’s like chatGPT, there are prompts there to ensure we take some type of action! This is one of the best concepts I have seen that can be quanitified for my personal life & design!
💎 + 🕶️ Potential Applications
From these takeaways, the biggest future for design is rooted in skeuomorphism. I then questioned how can we apply skeuomorphism for ai What can we do now?
Here’s a quick idea: I recently talked to the CEO of a company called fauna bio . They are a genomics company that looks at animal genomes to create therapies for humans all over the world. What if as a promotional experience, you could have a VR application that would showcase the genetic sequences of different animals and renderings of animals that would be helping patients! You would use skeuomorphism as the basis for the renderings for the animals!
That would be pretty sick right?
🚀 In the meantime, check out my latest project in visionOS where I check out the depths of space and an immersive rocketship experience. Here’s the video & article.
Hey i’m Piram and i’m an aspiring UI/UX designer, exploring how AI is changing the design world. connect with me on linkedin to follow me on this journey!