Product Page Redesign for the BuildDirect Marketplace

Shortly after joining BuildDirect in Feb 2015, I was asked to help lead a UX redesign
of the Product Detail Page (PDP) on BuildDirect.com

The Challenge

The Product detail page suffered from a cluttered, dated design, and the leadership at BD wanted to give it a makeover. The PDP is the highest-trafficked page on the website, which is visited by 2.5 million unique shoppers every month. Since the PDP garners 70% of traffic from search engines, it was in many ways the "face" of BuildDirect, so the company was keen to make that first impression a good one. 

Vision, Goals & Metrics

Vision: Provide a simple, modern experience that gives customers the right information and confidence to move ahead in their purchase journey (i.e. order product or samples).

Goals: 1) Maximize customer confidence and trust, 2) simplify customer decisions by ensuring information is relevant, prioritized, available, and understandable, and 3) create a responsive mobile design that brings mobile performance on-par with desktop.

Target Metrics: 1) Increase conversion rate of PDP to cart by 15%, 2) Increase product orders by 10%, 3) Increase average order value by 10%.


Audit

I started with a thorough audit of the PDP to gauge its current effectiveness and identify areas for improvement. Below are the different methods I used for this.

thumbnail_IMG_1209.jpg

Best Practices Review

Used Neilsen Norman's exhaustive E-Commerce UX research report to find best practice guidelines for product detail pages, and rated the current experience against these.

user-tests.jpg

User Research Review

Reviewed existing user interviews and usability tests.

metrics.gif

Metrics Review

Reviewed all available PDP metrics and how they trended over time. 

ab.gif

AB Tests Review

Reviewed previous AB Tests to see which ones had an impact and which didn't. 

best-practices3.gif

Competitive Review

Reviewed & evaluated competitor sites, as well as sites outside the home improvement space.

reps.gif

Customer Service Feedback

Set up 2 roundtables with 15 reps each to hear about what was and wasn't working for customers.

 
 

By the end of the audit, we had identified 9 major problems,
37 improvements and 12 feature ideas for the Product Detail Page


Design

De-Clutter & Simplify the Information Architecture

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
— 10 Usability Heuristics for User Interface Design by Jakob Nielsen

After the audit, the initial hypothesis that the PDP was too information-dense was confirmed. I learned from customer interviews that undertaking a big renovation made them feel overwhelmed and stressed. And I could see from user tests that this page amplified those feelings.  I decided to use a strategy called Progressive Disclosure to simplify the information architecture, which involves disclosing secondary information only when a user asks for or needs it. To do this I would have to prioritize the available information.

declutter.png

The new design progressively discloses our price tiers, and reveals price calculations only after the user enters their desired coverage. By doing these things, it reduces many units of information on the page without eliminating them.

Previous AB Tests showed that removing the right-side column didn't affect any relevant KPIs, so I was able to cut it out. After reviewing the metrics on the left-side recommendations, it turns out there was no positive correlation between their click-through and KPIs. Removing these elements made it possible to increase the size of the product image, which user tests showed to be the #1 buyer concern ("How it looks is the most important factor for me").


Prototype & Test

A high-fidelity functional prototype was created with Axure. I conducted 1-hour remote moderated usability tests with 5 homeowners. Each homeowner was given a series of tasks, and the tests were evaluated based on task success, time-on-task and satisfaction. Based on these findings, aspects of the design were edited or redesigned.

Implement

I created a set of specifications for the development team and worked closely with them throughout the development process, joining stand-ups and other sprint meetings. 

Measure Impact

The PDP Redesign project resulted in an 11% increase
in PDP-to-Cart Conversions

Iterate

Improving the design and effectiveness of the PDP is an ongoing project. As of this writing, the UX team is working on lifting Average Order Value (AOV) by re-organizing accessories and linking them smartly to products. This is something we identified as a potentially effective lever in the initial audit.

Learnings

  • Don't over-study the subject. I spent a great deal of time reviewing existing research and auditing the existing design. In retrospect, I believe I could have cut this down, in order to get to the moment of truth (the moment when user meets design) more quickly. That being said, I was new at the company, so the additional work was useful for getting up to speed on our user research, and e-commerce in general.
     
  • Do the right thing. My UX Manager at the time insisted that the old design didn't need to be benchmarked, and that we couldn't afford to do a fresh round of user testing to accomplish it. This didn't sit well with me, but I didn't press the matter. Even though we had a wealth of metrics to make a comparison, by the end of the project I had regretted not making a stronger case for those tests. They would have given our team a clearer picture of how the new design was performing against the old.