Katie Lamp

Walgreens Product Comparison

Creating a new site feature from scratch, using a mobile first strategy.

KEY CONTRIBUTIONS:

  • SKETCHING
  • CONCEPT VISUALIZATION
  • WIREFRAMING
  • PROTOTYPING

PROBLEM

Customers on walgreens.com were looking for a more straightforward way to compare prices, ingredients, and other features across products. The current way to get certain information was on a single-item basis, clicking back and forth between the product listing page and the details page.

One more challenge was that this was to be a project that could showcase the UX team’s adoption of a mobile-first design strategy.

MY ROLE

Product Compare Initial Mobile Sketch

I was the primary UX designer on this project, responsible for organizing and conducting concepting sessions, creating sketches of concept options, and creating wireframes and defining interactions once a concept was chosen.

I used a combination of competitive analysis and customer survey feedback to create the initial concept options. Based on some initial brainstorming sessions with our user research and mobile app teams, I focused on making the process of selecting products to compare as easy as possible.

Initial sketch showing faceted filter concept

Working through some initial ideas – showing a filter by facet concept.

Salient Differences Initial Concept

Another initial idea – display products with significant differences highlighted.

Creating a user flow by selecting options within each step

I created this grid to help guide the decision about which version of each step would make the most sense in the overall flow, in a discussion with other UX team members and our director.

Wireframes of the possible checkbox states

This displays just a small part of the wireframes I created, but shows how different states of item selection would work on a product listing or search results page.

RESULTS

Product comparison went live in April 2017. The design that I launched includes a feature that is called “Quick Compare”, which is unique to Walgreens. If a customer just wants to quickly see a product of interest compared to the top selling items, or the best rated based on customer reviews, it only takes the click of one button to populate the grid.

Product Comparison Grid as launched
A view of a comparison grid on the live site. The product features field was created to be flexible, reflecting the availability of product data in the catalog.