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
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.
Working through some initial ideas – showing a filter by facet concept.
Another initial idea – display products with significant differences highlighted.
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.
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.
