Toyota
Vehicle Configurator
With 3.3M monthly visitors, this 10yr old product needed a full 0-1 redesign — a fundamental rethinink of how our vehicles and configurations were presented to the user.
PROJECT DETAILS
ROLE
Lead UX Designer
CREATIVE TEAM
Brady Tuazon, Stevie Spencer, Jamie Sun
TOOLS
Figma, Principle, Jira
ENGINEERING TEAM
iCrossing.com
Stephen Menesick, Josh Spears, Sean Shedlarski, Grace Huang Ditsworth, Nagender Singh
GOALS
PROJECT GOALS
Complete Redesign of Build & Price tool to increase education & engagement across upper, mid and lower funnel users.
STRATEGY
Education
PERSONAL GOAL
Dissect the complexities of vehicle manufacturing to present an effortless experience to users.
Research
Heuristics
No way to get clear comparison of trim levels; No way to find out which trim levels have which options available.
Duplicate vehicle cards for multiple model years; eg. "Tacoma 2023" & "Tacoma 2024"
Engine choice included more than just the engine, often including transmission, drivetrain, and in the case of Sienna, seating configuration.
Accessories increased from a around 25 to over 100.
Cab & Bed selection had inconsistent and conflicting language without any visual depiction until selected.
Problem
Users are unable to find options they are looking for, it's unclear which grade to select to add desired options.
"Which grade has Apple CarPlay?"
"I want a moon roof."
"I want heated seats."
Cognitive load among certain steps is unecessairly high.
Vehicle render scrolls out of view on both mobile and desktop.
Strat Overview
Primary Goal Education
Among both high & low funnel guests, educating about vehicle configuration possibilities is the main goal of the tool.
Experience Pillars Effortles / Conclusive / Gratifying
Conflict.. Among users who encounter conflict, a larger percentage complete through summary.
Challenges.. "Which grade has Apple CarPlay?", "I want a moon roof.", "I want heated seats."
Architecture
User Flow Update
Design
Reimagined Interface
Option 1
Horizontal interface — Individual Category Pages allow focus on single step at a time.
Option 2
Vertical interface — Individual Category Pages allow focus on single step at a time.
Option 3
Mobile: Vertical interface
Desktop: Combination Horizontal interface + vertical
Continuous scroll - “everything at your fingertips”
Vehicle Select Page
Updated Experience
Vehicle Select Card
Vehicle Selection Cards were increased in size allowing for the inclusion of more engaging lifestyle photo.
Options “card-flip” interaction added to educate users about what options are available for any vehicle.
Model Year toggle included to reduce redundancy of cards when more than one model year was present.
Previous Experience
Vehicle Select Card
Comparison: Mobile & Desktop
- Previous Experience Left
- Updated Experience Right
Reduction of the number of vehicle cards by ~35%, going from around 67 to 50 cards.
This also reduced the density of content and overall scroll height of the page.
Model Select Page
Updated Experience Trim Select Page & Trim Details
Previous Experience Trim Select Page & Trim Details
Redesign & Rearchitect
Packages
Redesign ..eliminate the modal overlay.
We were able to eliminate the need for an overlay buy creating an accordion feature that kept user within the configurator interface when details existed, and otherwise eliminated the redundant overlay when it didn’t have any additional info to offer.
Previous Layout
Updated Layout
Rearchitect ..eliminate the endless concatenations.
Users were bewildered, and so were we.
Careful analyzation reveled that only a few different items were combined in countless ways creating upwards of 25 slightly different choices …nearly all with the same label.
Leveraging check box functionality rather than radio button functionality allowed us to significantly reduce cognitive load.
No longer was every possible combination needed. What was 25 choices is now 7.
Previous Functionality
Updated Functionality
Prototype
Fully functional 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
Vehicle Selection Card (Options) CTA with animation
TRD Off-Road & TRD Sport details (comparison view)
Additional Working Features (Configuration):
Vehicle rotation
Interior/exterior view
Configuration cost
Working conflict: To add audio upgrade, user must add weather package.
