top of page
Projects
About
Contact
hero red strip.jpg
hero asset.png

Toyota Build & Price

LEAD UI/UX DESIGNER  |  WEB DESIGN  | SAATCHI & SAATCHI

In 2019 Toyota Canada wanted to re-design their Build & Price tool, in order to help users with their car buying process. Working as the Lead UI/UX Designer on the digital team at Saatchi & Saatchi, which consisted of Project Managers, Developers, QAs, and Strategy, we worked on  re-designing the tool by creating a new, immersive and user-friendly experience.

venza tablet.png

The Challenge

Toyota Canada has a wide variety of vehicles, and our challenge was to create an online experience that made it easy for users to understand the Toyota line-up and available pricing options. The Build & Price tool we created has various aspects to it, in order to help users do just that.

 

From vehicle configuration and customization, pricing and payment options, a vehicle comparison feature, cross-platform configuration sharing, integration with a credit application tool, as well as the ability to get in touch with local toyota dealers, we wanted to make sure our users had the necessary tools to help them on their car buying journey.

User Flows & Mapping

I created various user journeys and mapping diagrams for the different pages and aspects of tool. From entry flows into the tool, to comparison and model selection flows, I began to map out the various journeys users would take when navigating the Build & Price tool.

Wireframing

models.png
compare.png
accessories.png
payment.png

Interactive Prototyping

Along with creating wireframes, I also created various interactive prototypes to present to our client and our internal teams. The goal of our interactive prototypes was to explore user flows, experiment various interaction designs with our developers, as well as present various user journeys to our client.

Design Phase

Our first stab at design began with the model selection step. The model selection step displayed below, was one of the most complicated flows of our tool. We wanted to ensure that users and customers understood the many available models and packages available for each vehicle in the large Toyota Line-up.

models-desktop-mobile.png
design red strip.jpg

Configure & Customize

Once a user chose a model and package, and began to customize their vehicle they would most likely land on the exterior step of the tool. We wanted to create a game-like and app-inspired UX for the vehicle configuration portion of the tool. We explored various ways for user to navigate the tool on different devices such as desktop vs. tablets vs. mobile devices.

exterior-design.png
interior-design.png
accessories-design.png

Comparison Tool

One of the features of the tool which was also a large challenge was designing a way for users to compare the many models and packages available for each vehicle. The Toyota line-up includes vehicles that may have 1 model, or vehicles which have up to potentially 13 models. Our challenge was in creating a comparison tool that worked for all vehicles.

compare overlay.png
compare table.png

Payment & Pricing Options

Another aspect of the Build & Price tool is the Pricing Options. We worked off an existing framework that was in place on the previous Build & Price tool, but re-designed the UI and added a new feature for users to compare Lease, Finance & Cash payment options. 

lease.png
design red strip.jpg

Taking the Next Step

As a post-launch item we began to add new features such as Suggested Items for users in the Summary step of their Build, as well as the addition of a 'Build Code' feature. The feature allows users to obtain a code via clicking on a link in the tool, or by e-mailing it to themselves and their local Toyota dealer as well. By doing this, users are able to retain their build, and also discuss their vehicle & pricing options further at a dealership.

summary sharing.png

The Mobile Experience

Majority of the tool's traffic comes from mobile, and we had to ensure that our tool was just as accessible, and had a similar app-like experience on mobile and touch devices as well.

mobile-row.png

Conclusion

After launching the new Build & Price tool, our post-launch results showed that we had higher rates of completion with both, desktop and mobile traffic. In addition we saw higher rates of users downloading or e-mailing their builds as well. Our exit rate across all devices was also considerably lower after launching our re-designed Build & Price tool.

ryh test-default.png
RENEW YOUR HEALTH
bottom of page