Data-driven redesign

Honda Comparison Tool Case Study

Project Overview

The product

The comparison tool and other shopping tools are important components of American Honda’s automobile website.

The compare tool provided detailed product information in a format that allowed shoppers to compare what matters most to them across the Honda model they are considering and similar competitive models. On this project I worked on:

Competitive audit of other OEM compare tools
Content audit of existing compare tool
Wireframes and prototypes

Project duration

2012-2013

The problem

The existing comparison tool was outdated and it prominently featured characteristics about the vehicles that were unlikely to be top evaluative criteria, for example, intermittent windshield wipers. It also had verbose specification headers that were harder read and compare.

The redesign goal was to improve the comparison tool completion rate because analytics indicated significant drop-off on the second step in the existing multi-step comparison process. The team designed, measured analytic KPIs, then iterated again. Analytic KPIs validated the redesign.

The goal

Most OEMs had a one-step process, e.g. they provide a competitive comparison topre-selected competitors by default.

Most OEMs provide competitive comparisons, Toyota provides a trim comparison tool. Few OEMs provide a model to model comparison tool.

My role

I did UX design and design research for this project and I worked with a visual designer/art director to create the final visuals. This project began with an insight from analytics and had two phases. The first phase involved updating the comparison tool to address the problem identified by analytics and update the design. The second phase post-launch involved evolving the design to better match the way we saw users using the new comparison tool.

Responsibilities

Creating wireframes, UI flows and clickable prototypes.

Analytics Insight

Research

Analytics indicated that most drop-off occurred at the second step of the process (below). Looking at the second step suggested that the “Next Step” button was being cut off by the right edge of users browser windows because the old comparison tool was not responsive.

Competitive Analysis

In an effort to learn from the strength and weaknesses of competitors, an analysis of all the OEM websites in the United States that had comparison tools. I discovered many comparison tools with interesting features but I also discovered features that bridged the gap between compare and bookmark. I proposed simplifying the language of the results categories to make them easier to scan and compare.

I evaluated the competitors by focusing on the 10 Nielsen Norman Groups's Usablity Heuristics for User Interface Design:

1. Visibility of System Status
2. Match Between the System and the Real World
3. User Control and Freedom
4. Consistency and Standards
5. Error Prevention
6. Recognition Rather than Recall
7. Flexiblity and Efficiency of Use
8. Aesthetic and Minimal Design
9. Help Users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation

Exploration and Iteration

Sketches were mostly done on paper, many different UI interactions were explored including a change vehicle menu for quickly configuring the comparison.

The new compare tool would be responsive and the wireframes featured multiple breakpoints. I proposed fixing the headers at the top of the browser window as the user scrolled down, similar to how the headers in the iOS contacts app animate as the list is scrolled. I created a simple HTML prototype to demonstrate how the headers would behave.

A gif showing the sticky header behavior

A screenshot from the clickable prototype

I created a click-through prototype of the whole compare process to show how users will either be shown results immediately or choose a vehicle depending on their context.

User flow

Traffic from model specific pages is directed immediately to competitive results for the model the user is currently viewing.

Wireframes

I added filters to the vehicle selection step.

I added larger photos of the Honda model. We also included space for three competitive models and added a scrolling table with sticky headers to detail the results.

High-Fidelity Designs

Quinn Fu turned my wireframes into this finished designs.

Compare tool High-fidelity designs - Results

Post-Launch

Analytics showed that 30% of users who started at the home page while 23% accessed the tool from Build & Price (pictured below).

Post-Launch User research

Research Question

Is it likely that users leaving this page for compare are searching for a trim comparison? A survey run on users of the Comparison tool confirmed our hypothesis, discovering that 59% wanted to compare Honda models to another Honda.

Post-Launch User research

Summary

After launching the redesigned comparison tool analytics indicated that 70% of users accessed the comparison tool from a model page.

In addition, 42% of users who came from a model page came from the Options & Pricing tool. A trim comparison tool will make it easier to understand the differences between trims than the feature list shown below.

Exploration & Iteration

While inelegant, a modal window on model pages allows the user to choose between the two different compare use-cases to go directly to results.

We added a trim comparison screen to the compare tool accessible from the modal displayed when the user clicks compare on model pages.

Final Designs

Outcome

Results and what I learned:

Analytics data can indicate existing usability issues. Metrics like bounce rate, conversion rate and engagement can help measure the effectiveness of new design iterations.
The new compare tool had a higher completion rate than the original tool.
After the compare tool was redesigned to include trim-level data, the bounce rate from the compare results page to trim pages dropped.

Honda Compare Tool Wireframes [PDF] Automobiles.honda.com

Want to work together?

If you like what you see and want to work together, get in touch!

chuck@chuckmcquilkin.com