E-Commerce Product Page Redesign

Before

With an individual page for every variation (e.g., size, color) of every product on the site (over 50,000), customers had a hard time finding the product they wanted. Once on the product page, customers had problems finding content because of poor layout.

Project Goals
Based on metrics data, feedback from support and online surveys, and e-commerce best practices, I created an IA, content, and design strategy:

Information architecture: group products that share the same description but differ by size or other variations into "product families." This simplifies navigation and search by reducing the number of product pages from 50,000 to under 5,000.
Interaction design: enable customers to select product size (or other variations) from the product family page.
Page layout and content: redesign product page to be more user friendly and content rich.

Early Concepting for Selector Design

Once we grouped products into families, we had to figure out a way to make it easy for customers to select options like size, color, etc.

For complicated products where customers need to choose multiple options (the product shown at the left has 5 options), we decided to create a button/selector design.

Wireframe Iterations

This is a more evolved wireframe of the product family page selector design. In this particular case, the product only has one variable (size), so there's only one set of buttons.

Prototyping & Usability Testing

Based on our wireframes, we made some basic clickable prototypes and tested them with customers.

I led all aspects of customer testing, including recruiting and creating the screener and test script. I ran most of the testing sessions with customers, though we did work with a third-party usability testing firm for eye tracking sessions.

At the left, eye tracking data shows that customers spent most of their time interacting with the selector buttons, and almost no time at the price/Add to Cart area (the gray box at the right of the page), which is obviously a big usability issue.

New Designs Based on Usability Feedback

Solution to Usability Issue
By placing the buttons for selecting product options directly above the area for showing the catalog number, price, and the Add to Cart button, we created a linear customer flow from top to bottom. This change increased our design's usability by 90%.

Annotated Interaction Designs

I worked with our team's interaction and visual designers to create a series of detailed design comps, which I then annotated before handing over to our developers.

Final Design & Implementation

As is the case in many complex e-commerce projects, technical setbacks required us to launch the redesign in phases.

In phase 1 (April 2011), we launched our improved product page layout, but, unfortunately, without our beloved "selector design" or product families.

The rest of the redesign and IA improvements are slated for phase 2 (Summer 2012).

See a live example from this project >

< Back to main Work page