Honda Comparison Tool Case Study

Redesigning the comparison tool

My role

• Design research
• UX design
• Prototypes

Team

• Pramit Nairi, Design
• Chuck McQuilkin, Design
• Quinn Fu, Design
• Bradley Stone, Developer

The comparison tool and other shopping tools are essential 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 models they consider 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

THE PROBLEM

Web analytics indicated that the existing comparison tool had a high Drop Off or Abandonment Rate. The most significant drop-off occurred on the second step of the four-step process, where a "next step" button was positioned on the far right corner of the screen. The tool was not responsive or mobile-friendly, and the comparison featured vehicle characteristics unlikely to be top evaluative criteria such as intermittent windshield wipers. The comparison table also had verbose specification headers that were hard to scan and compare.

The redesign goal was to reduce the abandonment rate, redesign the tool to be responsive, and shape the evaluation criteria to be more relevant to shoppers. Once the team and I launched the redesigned tool, web analytics confirmed that the new tool reduced the abandonment rate. Web analytics from the redesigned tool indicated that although the new design reduced the abandonment rate, there was still a high bounce rate to the trim comparison tool. The second phase of the redesign was to incorporate the most relevant comparison data from the trim comparison tool into the comparison tool to enhance the comparison tool completion rate.

RESEARCH

Analytics indicated that most of the drop-off occurred at the second step of the process. Looking at the second step suggested that the "Next Step" button was being cut off by the right edge of the user's browser windows because the old comparison tool was not responsive.

I performed a comprehensive competitive audit of other OEM comparison tools.

I proposed simplifying the language of the results categories to make them easier to scan and compare.

THE OPPORTUNITY

A single-step comparison process would reduce drop-off. The sets of pre-selected competitors that would make it possible would also allow the tool to highlight critical differentiators between Honda models and competitors to reassure the customer about their initial purchase preference and answer their technical questions.

Using pre-selected competitors eliminates empty states and simplifies the mobile-friendly experience by eliminating any create or setup flow.

Exploration and Iteration

I explored many different UI interactions for the update competitors flow on paper.

I put together a prototype with HTML/CSS/JavaScript to demonstrate how the tool would scroll smoothly to links to link the user to a section of the comparison data and show how the sticky headers would animate user scrolled.

I created a click-through prototype of the whole comparison 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.

Finished design

Quinn Fu turned my wireframes into this finished designs.

Phase Two: Adding Trim Comparison

Analytics indicated that 70% of users accessed the comparison tool from a model page.

Also, 42% of users who came from a model page arrived 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.

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

A survey run on the comparison tool users discovered that 59% wanted to compare Honda models to another Honda.

Exploration and 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.

Finished designs

OUTCOME

Results and what I learned:

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

Wireframes:

Honda Compare Tool: Wireframes [PDF]

American Honda: automobiles.honda.com

#ui #interaction