Product Color Rollup


The site that went live in May 2011 displayed a product card for each and every color variation. In instances such as Nike Tempo Shorts, which has 30+ different colors, the product grid was filled with duplicate products. Mix in slightly varying products, such as girls' versus women's and pattern versus collegiate versus solids and the customer now has a lot to process and decipher between.

Competitive Analysis

We evaluated competitor's to grasp what customers were used to and better understand their ever-changing expectations. In 99% of cases, colors were "rolled up" under the parent as a single product card. Additionally, there was a clear pattern towards color swatches being present in the product card. At the time, some even went as far as making the swatches interactive.

Crawl, Walk, Run

Based on research, I proposed various solutions of differing complexity with the goal of creating a roadmap of the product. The deliverable was used as a discussion guide when talking about the feasibility of each solution. Ultimately, it was determined that the business process required to create swatches for our assortment of products, ranging from apparel to fishing lures was too onerous. Thus, the biggest win we could get was the "Walk" scenario.

Process Flow

One of the concerns we had was how to rollup the colors under the parent while keeping clearance items separated from full-price so as not to mislead customers online nor put stores in an odd situation where customers try to price match. Thus, I partnered with Engineering to understand our capabilities from a technical perspective and map out a process that would work for all parties.

Ongoing Testing

I coded out a low fidelity prototype with the proposed strategy (in addition to a few other style changes to clean up the grid and make it less "Las Vegas"). Per usual, I published a test with to gain feedback on the direction and validate prior to handing things off to the development team.

Problem Solving

The business challenge we faced was defining a process for swatching. Thumbnails would most likley take up too much real estate.

Carousel within Product Cards