Toyota
Vehicle Configurator
With 3.3M monthly visitors, Toyota's configurator needed a fundamental rethink of how vehicles and their options are presented to shoppers.
31%
Increase in Build Completion Rate
PROJECT DETAILS
ROLE
UX Design Lead
CREATIVE TEAM
Brady Tuazon, Stevie Spencer, Jamie Sun
TOOLS
Figma, Principle, Jira/Confluence
ENGINEERING TEAM
iCrossing.com
Stephen Menesick, Josh Spears, Sean Shedlarski, Grace Huang Ditsworth, Nagender Singh
GOALS
PROJECT GOALS
Redesign the Build & Price tool to increase education and engagement for upper-, mid-, and lower-funnel users.
STRATEGY
Educate, show users what’s possible with each vehicle, so they can choose and configure with confidence..
PERSONAL GOAL
Analytics showed trim selection was a major bounce point. Users couldn’t tell what separated one trim from another, so many left before they ever began configuring. My goal was to give them a clear, effortless starting point.
PROBLEM
Assembly Required
Users had to open modal after modal to piece together the full picture. Unable to find the features they wanted, many bounced before getting past trim selection.
What shoppers kept asking
Which trims have Apple CarPlay?
I want a moonroof and heated seats.
What's the difference?
Recurring themes from usability sessions, paraphrased.
PROBLEM
Cognitive Overload
The original configurator was built to keep users from choosing incompatible options. It exposed every business rule up front and repeated the same labels and details from card to card, overwhelming users and leaving them to hunt elsewhere for the information they needed. And it was about to get harder: Accessories were set to grow from around 25 to more than 100. It needed a full rework, not a facelift.
PROBLEM
Mobile Was an Afterthought
Even on desktop, shoppers had to scroll away from the vehicle render to reach the options, losing sight of the car they were building. On mobile it was worse: users scrolled in every direction just to discover content and view their build.
THE APPROACH
Teach, Don't Sell
Whether someone was idly browsing or ready to talk to a dealer, the configurator had the same job: show people what's possible. Education was made the primary goal.
The data backed that up in a surprising way. Shoppers who ran into an incompatible combination finished their builds at a higher rate than visitors overall. Conflicts weren't the dead end everyone assumed. Handled well, they're the moment the tool teaches you something. So instead of hiding them, we leaned in.
61.2%
Completed a build after hitting a conflict
53.7%
Completed a build, all visitors
THE FLOW
User Flow Update
Moving Trim Select out of the configurator meant it no longer had to reload every option, and let us focus on trim education, right at the step where so many shoppers were bouncing.
We also split the old Engine choice into three deliberate steps: engine, drivetrain and transmission. That surfaced standout options that used to be buried in the details, like the Supra’s manual transmission.
Previous Experience
Updated
EXPLORATION
Fresh Prespective
I designed two distinct UI patterns, plus a hybrid that straddled both, then built low-fidelity working prototypes of each to feel out how they behaved. Usability testing wasn’t in the budget, so the team worked through the options together. The team chose the second concept, and the launched design is an alternate version of it.
Given the time, I’d have run unmoderated tests of each model with minimal task prompts, to see which one people moved through most easily without biasing the results.
CONSTANT ACROSS ALL OPTIONS
The Build Stays In View
V1 Horizontal swiping interface.
V2 Vertical scrolling interface.
V3 Hybrid: horizontal + vertical interface.
Where it landed
Concept 2 alternate
Before: shoppers scrolled away from the render to reach the options, and on mobile, scrolled in every direction.
Whatever the layout, one rule held in every option: the vehicle render is a sticky component, side by side with the options on desktop and stacked above them on mobile. Every choice updates the build you're looking at.
The Build
Model Select
Before: each model year got its own card, and so did each hybrid version, so one vehicle could take up four cards and wrap to a second row.
~25%
Fewer model cards
A model-year toggle replaced the duplicate cards, so a vehicle now shows two at most: gas and hybrid. On mobile the gain was even bigger: the scroll area dropped from 67 cards' worth to 41.
The cards also got bigger, giving the content room to breathe and space for a more vibrant lifestyle photo. A new Options button flips each card to show what's available for that vehicle, so shoppers learn before they commit. The old configurator had nothing like it.
Solves · Cognitive Overload · Mobile
Page Comparison
Same Trucks filter, before and after. On the left, each model year has its own card; on the right, one card with a year toggle.
The Build
Trim Select
Before: there was no way to compare trims. Seeing what a single trim offered took the right path and several clicks, and even then shoppers were left with questions, often bouncing to the vehicle’s main page or leaving the site entirely.
Moved out, trim gets its own step and the room to actually inform. A full comparison tool was out of scope for this release, so I designed a lightweight compare that still answers which trim has Apple CarPlay.
Solves · Assembly Required · Cognitive Overload
The Build
Powertrain
Reduced cognitive load through clarity & control.
By braking up the concatenations, we created a powertrain step that was quicker to grasp for users.
Updated Experience
Previous Experience
The Build
Packages
Eliminate the modal overlay.
Where a card had more to say, an accordion now opens it in place, so shoppers never leave the configurator. Where it had nothing to add, the “View All Details” link is simply gone.
Updated: Accordion
Previous: Modal
Eliminate endless concatenations.
Users were bewildered, and so were we. Just seven items were being combined in every possible way, creating 25 near-identical choices.
From radio buttons (pick one) to checkboxes (pick any), with the conflict flow managing which items depend on each other, we let shoppers build their own combination. No longer was every possible combination needed.
25to7
package choices
Updated: À La Carte
USABILITY TESTING
Prototype
Fully functional variable prototype built in Figma for final usability testing. Prototype features include new “model compare” modal, decoupled packages, dependent packages and package conflicts, cost calculation, updated layout and animations plus functional summary page.
Prototype Flow: Build 2023 Tacoma TRD Off-Road
Toggle Trucks category >>
Tacoma vehicle card, toggle 2023 then (Select) >>
TRD Off-Road vehicle card, (Build)
Additional Working Features (Pre-Configuration):
Vehicle Category Tabbed Carousel on Model Select Page
Vehicle Selection Card Options CTA with card-flip animation
TRD Off-Road & TRD Sport details comparison view in Trim select details
Additional Working Features (Configuration):
Vehicle rotation
Interior/exterior view
Configuration cost
Working conflict: To add Audio Upgrade, user must add Weather Package. If weather package is already added, there is no conflict. Dependency also exists upon removal of Weather Package if Audio Upgrade is present.
HEAD TURNING NUMBERS
The new configurator has been wildly successful. Over the first year after launch, user engagement has increased dramatically compared to the previous experience.
31%
INCREASE
Completion Rate
20%
INCREASE
Accessory Add-Ons
65%
INCREASE
Dealer Quotes
124.9%
INCREASE
Payment Estimator Usage
63.7%
INCREASE
Credit Applications
Source: TMNA Analytics Readout
NEXT UP
