Navigation Design

Part I. The Vehicle Selector

The Toyota Owners website delivers a highly personalized experience with the more information you provide it about yourself and your vehicle. The first agent that facilitates personalization is the navigation vehicle selector. Upon selecting your vehicle model and year, the contents of almost every page in Owners will filter (globally) by the chosen vehicle.

Original Navigation Design
Original Navigation Design

Analytics revealed the vehicle selector had low engagement rate, proving that the intended experience was unpromising. By filtering page content according to the owner’s vehicle, users take the first step in maximizing the effectiveness of Owners as a personal resource. The low engagement also implies that users lack comprehension for the fundamentals of the Owners platform. The client requested a design update that would both increase engagement and educate newcomers about personalization.

Different states to be considered
Different states to be considered

Design

I began identifying paradigms that would achieve the following goals:
1. Promote engagement — Focus the user’s attention on the vehicle selector
2. Educate users — The vehicle selector’s purpose is to personalize page content

Logged out state — I explored existing conventions and decided the automatic rollout micro-interaction would be effective at engaging site users. When users arrive at the website for the first time, the menu would automatically rollout to grab their attention. The animation would hint that this is the suggested first action.

Vehicle Selector dropdown

  1. The copy atop the model and year selection fields succinctly explains the purpose of vehicle selection.
  2. Model and year selection fields are shown in selected state.
  3. Message that explains to users the benefits of saving their vehicle to their account promotes registration. This message appears only after the user has selected the vehicle model and year — making use of progressive disclosure to simplify the initial experience.

The downside to the experience is we had to limit the automatic rollout interaction to desktop platform only. In mobile, automatically displaying the vehicle selection may confuse users — a full-screen menu takeover on launch will make them feel lost.

Nonetheless, the analytics team did mention that the engagement with the vehicle selector dropdown increased significantly — from under 10% to over 50% engagement.

Vehicle selector historyAfter showing the initial designs to our client, they wanted an easier way to recall previously selected vehicles. We created a history of your most recently selected 5 vehicles.

Logged in state — The logged in state reveals the ability to save vehicles and a garage of previously saved vehicles. This is a great way for users to access vehicles that were added by a 17-digit vehicle identification number (VIN). Some Toyota Owners services require the 17-digit VIN and the ability to save it to user accounts have proved to be a real time saver.

Part II. Information Architecture

The second part of the navigation redesign focused on the information architecture of the menu, and ultimately the entire sitemap. The objective is to promote clarity for the menu choices and lessen confusion. We had the following goals in mind:

  1. Simplify the menu choices
  2. Provide context to guide users to their intended destination
  3. Improve user engagement

Existing navigation structure prior to redesign shown:

Mobile menu - Hamburger
Mobile menu - Parts & Services
Mobile menu - Resources
Mobile menu - Community
Menu Dropdown - Parts and Services
Menu Dropdown - Resources
Menu Dropdown - Community

Discovery

Google Trends — We looked at Google Trends and looked up ambiguous nomenclature used on our site. We compare our nomenclature with synonyms to identify the more frequently searched terms.

Google Trends — dashboard icon warning lights
We found that dashboard lights was more familiar to users than our current label, dashboard indicators. Dash lights may be highest ranked, but the terminology isn’t as concrete.
Google trends - telematics
Customers use Owners to set up their vehicle telematics and app services. It was important that we chose a label that was more familiar with customers. Head unit was definitely the most popular search phrase, but it was a business decision to keep the term Connected Services.

Card sorting — We conducted a card sorting study to identify patterns in user groupings. Speaking with the participants helped us gain an understanding of their mental model.

Analytics and New Categories — The team made use of analytics and business priorities to identify the order of the new navigation categories. We also identified 3 dropdowns to consolidate all the CTA’s — My Vehicle, Parts & Service, and Resources. The simplified navigation structure gives users more obvious menu choices. We used the card sorting study to help inform some grouping decisions.

The menu order is as follows with corresponding CTR’s shown:

My Vehicle — house pages that generate personalized information pertaining to an owner’s specific vehicle or set of vehicles.

  1. My vehicle page — 135K
  2. Service History — 29K
  3. Vehicle Specs — 65K
  4. Audio Multimedia — 19K
  5. Connected Services — 3.3K

Parts & Services — house pages that provide information for finding and scheduling service, information on extended service coverage, and shopping for Genuine Toyota Parts and Accessories.

  1. Service Centers — 123K
  2. Service Specials — 77K
  3. ToyotaCare — 29K
  4. Toyota Genuine Parts — 63K
  5. Maintenance Schedule — No data
  6. Accessories — New item
  7. Toyota Express Maintenance — 16K
  8. Certified Collision Center — 3K
  9. ToyotaCare Plus — No data

Resources — house pages that provide valuable information pertaining to Toyota vehicles across the lineup.

  1. Manuals & Warranties — 246K
  2. Dashboard Lights — 128K
  3. Safety Recalls & Service Campaigns — 3.5K
  4. Videos — 2.2K
  5. FAQs — 5.4K
  6. Toyota Safety Sense — 4K
  7. Contact Us — No data

Some lower engaged links are still placed higher based on business priorities. For example, ToyotaCare (no-cost maintenance plan) sits above Toyota Genuine Parts, because it’s a business priority to inform customers of the complimentary service.

Design

Find A Dealer found a higher position next to the search CTA (desktop) and on the nav bar (mobile). The 3 top level categories were laid out as shown below.

The team noticed that a majority of user engagement is captured in the top 4 links. They also wanted to mirror the navigation UI of Toyota.com, the primary marketing experience. As a result, we used 4 large icons to represent the top 4 links in each of the top level categories. To provide context for users, the links were grouped by sub-headers.

Mobile search — I noticed the Owners search field had significant user engagement on desktop (~7% user engagement, enough to place it in the top 25 of most engaged features). However, the functionality wasn’t available on mobile. We integrated mobile search design in this iteration.


Results

After the new designs were implemented, the analytics team was able to provide us with data that revealed significant improvement to user engagement. With the new navigation design, analytics observed a 3% increase in engagement on desktop and 1% on mobile.

Pages that experienced double engagement or better — ToyotaCare, Service History, Vehicle Specs, Audio & Multimedia, and Vehicle Home.

Future consideration — Maintenance Schedule experiences higher engagement than many of the top 4 tile CTAs in its category as a mere text link. It might be worthwhile to consider promoting this link to the top 4.

Visit the current Toyota Owners website to see the navigation.