Toyota
Vehicle Configurator
Our existing product was last worked on aproximately 10 years ago and was well overdue for an update. It had a dated interface, unnecessairly increased congnitive load, and was optimized for neither mobile nor desktop.
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 grades; No way to find out which grades have which options available.
Duplicate 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, configuration (seating).
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
On Conflict: Among users who encounter conflict, a larger percentage complete through summary.
On Challenges: "Which grade has Apple CarPlay?", "I want A moon roof.", "I want heated seats."
Architecture
User Flow
Design
Interface
V1
Horizontal interface
Individual Category Pages allow focus on single step at a time.
V2
Vertical interface
Individual Category Pages allow focus on single step at a time.
V3
Mobile: Vertical interface
Desktop: Horizontal interface + vertical on page build summary
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
Packages
We were able to eliminate the need for an overlay buy creating an accordion feature that kept user within the configurator interface when details existing, and otherwise eliminated the redundant overlay when it didn’t have any additional info to offer.
Previous
Experience
Updated
Experience
Often only 5 different items would be combined in various ways, creating upwards of 25 choices.
We approached package selection as check box options rather than radio buttons.
This allowed us to eliminate the concatenations and reduce unnecessary cognitive load and the redundant package labels “…with Options”.