Tesla
Responsive Website Redesign | Concept
“You can buy a Tesla online in less than 2 mins”
— Elon Musk, CEO of Tesla
Design Challenge
How might we give users confidence that they are purchasing the most suitable Tesla model at the best price?
Research
“You never really know if you’re getting the best deal”
Key Takeaways:
Lack of trust & transparency
Dealership process takes too long
Stress over pricing/bargaining
Prefer not to work with sales representatives
To discover user needs, goals, frustrations, and behaviors, we conducted user interviews with 6 participants. Our inquiries ranged from broad questions about their experiences purchasing expensive items to more focused questions about purchasing cars online or at a dealership.
Identifying the Blind Spots
To discover user expectations and existing pain points, we conducted remote, unmoderated usability testing with 5 participants on Tesla’s current website.
T is for Tesla, Trust & Transparency
Through data gathered from 6 user interviews, 5 usability tests on Tesla’s current website, and competitive and comparative analysis following task analysis, feature inventory, and pluses and deltas approaches, we prioritized our takeaways to focus on 3 target areas.
“The only part I liked about buying at a dealership was driving my new car off the lot”
Adam is an amalgamation of users interviewed and is representative of a typical Tesla user. Adam was referred to throughout our design process to ensure that our design decisions were intentional and made with Tesla users in mind.
Design Solution
Hitting the Gas on Trust & Transparency
Through insights from user research, we individually sketched website redesign solutions and collaborated in a design studio. With this rapid, iterative approach, we solidified our design with a mash-up of the best elements from each sketch.
Key Redesign Elements:
Model comparison
Detailed guidance for specs & terminology
Upfront and detailed pricing
“Sleek, modern, & minimal feel, similar to Apple”
We created a design system to maintain consistency while digital wireframing on Figma. During usability testing, users mention that they like Tesla’s current sleek, modern, and minimal website design comparable to Apple. Therefore, we based our design system off of Tesla’s current design.
My Contribution:
Header
Footer
Atomic Design Elements (buttons, vectorized logo, icons)
Building Frames in Figma
My Contribution:
Home Page screens
“Compare Model Specs” for Home and Product Pages
Arranged alignment of elements on Order Page
Led Prototyping in Figma
1. Home Page
Clear Navigation for a Smooth Ride
Global — reduced cognitive load by moving “Solar Panels” and “Solar Roof” under “Solar” for 5 main categories
Local — added vertical navigation bar for consistency with product pages, kept current screen names static
Various ways to navigate through site: scrolling, clicking on down arrow, clicking on vertical navigation bar
Transparency in Pricing
Listed price “Ranging from $XX,XXX to $XX,XXX” for car models instead of current site’s “Starting at $XX,XXX”
2. Product Page
“It’s hard to tell differences between the cars”
During usability testing, users had trouble understand differences between different models, so I created this side-by-side “Compare Model Specs” feature for clarity in product differences
Visual Aid
Guiding users in their decision making with visuals to represent car terminology
3. Order Page
Upfront Pricing
During usability testing, users shared frustration with increase in price after each step of checkout process, so we included static pricing for options throughout
Defaulted pricing set on “Purchase Price” instead of current sites’s default at “Include potential savings”
Prototype
Goal: Purchase a black, 7-seater Model X
Responsive Mobile Design
From user interviews, I learned that most users prefer purchasing expensive items on their laptops rather than their mobile devices. After understanding the context of users visiting the responsive mobile website, I focused on retaining product feature pages and model comparison on mobile. To adjust for the smaller screen size, I made “tiny tweeks” to the header and product images, while maintaining the bright blue contextual navigation elements.
Results
Test-Driving the Redesign
Scenario & Task: “You are a Silicon Valley dad looking to purchase a new Tesla for his family. Show me how you would purchase a black, 7-seater Model X.”
User Needs & Goals Met:
80% Reduction in time to complete task (7-15 mins → 2-3 mins) — ease of use, guided process, simple checkout page, “Compare Model Specs” feature
Trustworthy brand and site — added static prices for customizations, defaulted on “Purchase Price” instead of “Include potential savings”, added price ranges for models instead of solely starting price, added estimated state specific fees in payment summary
“Clean” and “Elite” feel — kept brand and design consistent
Very informative — included accordion view for more information on car terminology
Conclusion
Through comparing data from user testing of Tesla’s current website to our redesigned Tesla website, users showed increased trust and significantly reduced time to complete task in our redesign. Our redesign focused on increasing trust & transparency in Tesla’s website through seamless and intuitive navigation, pricing visibility, and clarity of car terminology through UX writing and visuals. As a result, users gained confidence in product knowledge and pricing and checked out with a seamless purchasing process.
Reflection
Collaboration
During the design phase, our team wanted to work synchronously on wireframing and prototyping, so I introduced Figma as a collaborative tool. Since I had previously learned the basics of Figma, I provided a mini-onboarding experience for my teammates. However, prototyping on Figma was a new endeavor. Learning how to use a tool while simultaneously building our product on it was a challenge, but through Google searches and watching video tutorials, we overcame the hurdles together.
Growth
I learned how effective design studios are in taking the best aspects of each person’s design to create a mash-up that everyone feels they have contributed to. Following agile methodology, the design studio consultation allowed for multiple concepts to be introduced in a short period of time and produced an open space for ideation and feedback. In addition to design studios, I enjoyed taking on a project management role with laying out the project plan, leading daily stand-ups, and touching base in each phase of the process. Reflecting on the project overall, I appreciated the opportunity to lead, mentor, collaborate, discover, and design.
What People Are Saying
“Your redesign is subtle yet so concise…I believe it instantly gains more trust from users.”
— Yilan Dong, UX Designer“Such a sleek design that is truly easy to navigate.”
— Anabelle Garnier, UX Designer“I thought a comparison chart was a great addition for users to break up and compare information that they might have otherwise been overwhelmed by.”
— Mireya Cano, UX Designer