Redesigning Our Interface for Exploring Product Variants

Overview

Timeframe: September, 2016
Company: Home Depot
Role: Interaction design, prototyping

At Home Depot, our associates are constantly working with customers to determine which products they need, assess their options, and make informed decisions about what to buy. It’s a very busy environment and time is precious for both the customer and the associate.

Some of the products we offer have a number of variables like color, length, and edge type. The process of finding the “right product” can be complicated.

I redesigned our interface for exploring product variants to provide optimal flexibility and clarity.

Problem

Home Depot associates need to be able to freely explore all of their product options as they reconcile what their customer is asking for with what is actually available.

Ultimately, these folks need to be focusing on the sale, not the system.

Our design made it difficult to explore our product catalog with confidence, which, in turn, would cause friction in the sales process.

This was the design of the product information page at the time. The vertically-stacked layout for the product options made poor use of screen real-estate.
In the left-hand image, the 12′ option looks disabled but is actually clickable. When you do click 12′ (see the right-hand image), your selected color does not persist and the interface appears to be in an error state.

Solution

After defining the problem, I envisioned what a successful outcome would look like: an associate should know what their options are and be able to confidently select a valid combination.

Here’s a peak into my design process:

1. First, I addressed some known issues with the current layout through rapid sketching.



2. Next was the interaction design. My guiding principles at this point were: a) support a natural conversation with the customer, b) optimize for exploration, and c) reinforce confidence in making selections. I decided to build a coded prototype at this point so that I could actually “experience” the implications of my design choices.

Coded prototypes are not suitable for every design problem, however, I’ve found code to be an excellent prototyping medium if I need to do highly detailed work.
My prototype in action.

3. Once I nailed the interaction design, I added some helpful visual cues to the interface to enhance usability.

Notice how only the third concept (on the far right) makes it feel like you have a path forward. We called this our “glimmer of hope” style, because it makes you feel like the system is moving you forward with each subsequent selection, instead of making you feel like you’ve reached a dead end.

4. Finally, I worked directly with our team’s lead developer to implement all the changes.

Outcome

On its face, this sounded like a relatively simple problem to solve. I had been involved in at least two previous design iterations on this exact interface but this time I dove deeper than ever before, and in the process discovered a level of depth and nuance that I had not expected.

The new design allowed us to move ahead with our product launch with greater confidence that store associates would be successful in exploring our catalog, finding what their customers need, and making the sale.