Introducing e-commerce shopping lists with the CVS core loyalty team using Figma and Miro

Imac mockup with design system on screen

Date Completed

August, 2022

Overview

Currently CVS has no way to save products to a list to help customers remember what they plan to purchase. Customers use workarounds like, adding products to cart, or sending deals to card and using the on card tab as a list. CVS shoppers need a better way to remember products and plan for purchases.

I was tasked to help CVS shoppers plan their next digital purchase and/or store visit by making it easy for them to organize their favorite products in shop-able lists.

Working remotely with accessibility, content strategy and user research designers, I entered user stories into the sprint planning platform, conducted competitive analysis and produced high fidelity screens for Android, iOS. mobile web and desktop. Hi-fi work was then pulled into Miro to assemble user-flows for presentation to senior leadership, and handoff for developers.

Team Goals

Create final design assets including accessibility annotations
Maintain linkages with masters for all component variants.
Create end to end user journeys including access points in Miro
Design functionality for adding products to list - from PDP, PLP, SFD, search results, product shelves and all locations where products are displayed.

Add to list & edit list

User feedback + competitive analysis

The CVS research team collected user feedback which we organized on a Miro board along with extensive competitive analysis.

"I loaded coupons onto card to go get some items at cvs near me. I wish there was a spot in this app to create a shopping list and tie the coupons to it so you know what you have and what you need. I am a pen and paper person when it comes to list, but today I forgot mine and it would be nice to see my coupons I downloaded into a list form by qty/ brand / item- on what I need so I know I am getting to use my savings! Just food for thought :) thanks! Other than that you guys are awesome!
"I would love to be able to create a shopping list that would give you an idea how much your shopping trip would cost and that it could also include any CVS & manufacturers coupons you've checked."
"It would be nice if I could access and use a shopping list from any page. Locating it in the banner near shopping cart or menu icon would be nice."

Design functionality for adding products to list - from PDP, PLP, SFD, search results, product shelves and all locations where products are displayed.
"Ability to print out a shopping list of the items sent to my card"
"Allow me to push my deals into a list"
"It would be nice if I could access and use my shopping list from any page. Locating it in the banner near shopping cart or menu icon would be nice."

Hi-fi pages were created to build userflows in Miro

Through a regular schedule of daily stand-ups and dedicated critiques, Figma components were created to produce both, end-to -end userflows and developer ready files illustrating all components and states.

Reducing the visual weight of recurring buttons

Advocating for a lighter visual solution for add to list buttons lead to the development of this multifunction roll-out solution.

In addition to my work on shopping lists

Sketch to Figma migration work is underway. I have used this transitional moment for CVS to advocate for cross train Figma work strategy and a federated approach to company wide design system management.

Global coupon migration work was produced with atom masters for all elements allowing content strategy to make global edits. Which they are super excited for.

Component auto-layout structure in Figma

Reflections & takeaways

CVSs core loyalty team is a great experience working with product owners team leads, content strategists, accessibility & UX designers to produce leading customer experiences.

Transitioning to Figma and building a robust federated design system makes for an exciting time to be at this company as a UX designer.