Meredith Maines
UX designer

Custom Countertops:

Making Custom Services Easy to Buy Online

My Role: Lead UX/UI Designer & Lead UX Researcher

The scope of this project spanned two years of work—online and in store platforms across multiple devices, re-merchandising a product category, payment integration, etc.

This case study is merely an overview, so don't hesitate to reach out with specific implementation questions.

Overview

Home Depot's custom countertops product category is a multi-million dollar market. But the online experience was lacking. Our team was asked to revamp an outdated, third-party project estimator on HomeDepot.com and make custom countertops transact-able online for the first time.

The idea was that a customer shouldn’t have to deviate from their typical shopping patterns, just to select a custom product. The solution also needed to be "interconnected", so that a customer working with an in-store associate could easily finish the purchase from home online, and vice versa.

Above, the existing estimator tool we're replacing

"How might we..."

  • Make a complex product understandable for online shoppers who may never speak with an expert in a store

  • Ensure customers feel comfortable with a non-traditional buying process—paying in full before an expert sets foot on site

  • Create a workaround for the existing online cart, currently unequipped to transact store SKU products

We needed to accomplish these goals within the framework of a “lift-and-shift” strategy. This didn’t allow us to make the unilateral merchandising changes that would make the fee structure much easier for a customer to understand.

Home Depot Custom Services

Competitive Analysis

I identified top category competitors and discovered none offered the ability to purchase custom countertops online.

I developed comparative usability tests on these competitor sites and ran remote, unmoderated tests to gauge effectiveness of different feature approaches, compared to Home Depot's existing tool.

The results showed me which features were must-haves for an MVP release and helped me define a backlog of future expansions.

Home Depot Custom Services

Personas

I began my investigation into our target personas by reviewing customer insights decks developed by Home Depot's business intelligence teams in 2016. They provided a jumping off point with demographic information to create screeners for user research. 

I launched surveys to help me better understand trends in customer's remodeling projects and trends in their shopping behavior. I used these results to make recommendations for how our experience would fit within the larger site ecosystem.

My results allowed me to hone in on participants to interview. These conversations helped me develop a better understanding of customer pain points and motivations, which informed my persona work.

I visited local stores to interview kitchen associates to determine understand their existing workflows and how they consult with a customer to build the right project.

Home Depot Custom Services

Customer and associate journey maps of interconnected experience

Customer Journey Maps

I mapped a customer's path from the project inspiration phase all the way through the installation and enjoyment of the new countertop.

Because the experience is interconnected, I developed an associate paths as well to close the loop on the entire purchasing process.

These journeys are used in two ways. As I complete user testing, I can demonstrate which parts of the journey have the most pain points, and then recommend prioritizing improvements in those areas.

Secondly, because other product categories are creating similar platform experiences, we can use the maps to compare our approaches and make sure teams aren't duplicating effort or implementing varying patterns that could create user friction down the road.

User Flows

We leveraged the time-tested Home Depot online conversion funnel (product information page, product customization page, cart, checkout) to integrate custom countertops into the e-commerce website and augmented it based on the nature of the purchase and user needs.


My user flows were instrumental in discovery conversations that helped us plan our project roadmap for a phased delivery.

Home Depot Custom Services

My user flows were used as a discussion tool with my product owner and tech lead to determine project scope

Home Depot Custom Services

An early concept of the new estimator


Wireframes

Early wireframes helped get buy-in on project scope and identify how we would move away from a wizard experience. I used Sketch to create artboards for Invision during early validation testing.

Design in Phases

I utilized Home Depot's UI component library and created our own additions that were specific to more complex use cases. 

For Phase 1, I opted to move away from a multi-page wizard experience to a single page estimator, so the customer could see dynamic pricing with each selection. The initial launch got our estimator live in rolling test markets so we could begin learning, though still required the purchase to be made in store.

As the team worked to roll out Phase 1 nationally, I began work on Phase 2 to make the countertops finally purchasable online. I designed our own microsite cart, checkout, and confirmation flow to process the orders online, mirrored store orders on the backend systems.

Phase 2 is still in progress but should be live in early 2020. I am simultaneously working on Phase 1 improvements to the experience, based on my user testing.

Above: phase 1 live in production

Above: phase 2 prototype for user testing

Home Depot Custom Services

vector created by slidesgo - www.freepik.com

User Testing

I've run more than 40 user tests throughout the course of this project, validating everything from mental models to the usability of an individual feature. Most of these were remote and unmoderated, conducted through UserTesting.com's panel.

A few of my testing objectives:

  • Identify desired features in a "drafting tool" to visualize a customer's countertop layout
  • Determine the viability of allowing customers to draw their layout on a mobile device
  • Improve the online experience of purchasing samples
  • Capturing users' expectations of how their customizations should be visualized within the estimator
  • Verify the level of confidence users have when using a microsite cart

"This is the quickest way I can do my measurements at home and get a price. It was so self-explanatory; it was so easy. I feel confident that if I had an idea in mind of what I wanted, I could be through this entire process in half an hour."

- Recent User Testing Participant

Learnings

This project has taught me how important it is to factor in business value to every decision. My team was able to launch in multiple phases in order to begin gaining attributed revenue and lift while the remaining phases were still in discovery and development.

I've had to learn the true definition of MVP as well, which is sometimes a difficult pill to swallow. But this has encouraged me to be even more strategic in the ways I recommend improvements and prioritization.

I look forward to what I can continue to learn from our national rollout and anticipate more custom product categories with similarly high price points to follow suit in becoming purchasable online.