Product Comparison

Walgreens Adaptive Site

New feature for users to compare products while shopping. 

 
 
 
 

Duration of Project

2 weeks (6 sprints) for initial design with ongoing additional sprints for updates.
Currently in production on Walgreens

 

The Ask

Users were looking for an easier way to compare prices, reviews, savings, and other features between products. We were tasked with finding a mobile first solution. 

 

My Role

I was the primary UI designer, responsible for delivering visual comps to the development team.

 

Research + Discovery

Through competitive analysis, we found most sites only had an option to compare products on desktop view. We found the best practice was to use a checkbox to select which products to compare.

 

Ideation

From the initial brainstorming sessions, I worked closely with the primary UX designer to understand user needs and flows. We created a "Quick Compare" function that allows users to compare one product against products that are top sellers, highest rated, and lowest price per unit. We aimed to create a minimal viable product that worked for all adaptive views. 

 

Wires and Comps

The UX designer and I created wireframes and comps simultaneously so that design challenges could be discovered and resolved sooner. We met with the associate creative director, UX lead, business analyst, product manager, and development lead 1-2 times per week and iterated based on feedback. All team members' feedback was taken into consideration to make decisions that best fit user, business, brand, and technical requirements. Also met with upper management to present a prototype and iterated again based on feedback. 

 

Challenges

From a visual design perspective, we wanted to keep the product cards as simple as possible by not adding more elements than were already existing. Our solution was to hide the compare checkboxes with an on/off toggle so that the user could choose if she wanted to compare.

 

Prototype

Prototype was presented to upper management. 

Implementation

See Walgreens website. Search for any product.

 

Testing

  • QA Testing and Bug Bash during development to find defects.
  • A/B testing

 

Updates in Subsequent Sprints

  • On mobile, combined Sort and Filter buttons into one button, Refine, to allow more space for the toggle.

  • Added a drawer for users to preview the products they had selected to compare.

  • Removed the toggle so checkboxes are always visible.