Helping shoppers plan their next digital purchase and/or store visit by making it easy to organize favorite products into shoppable lists.
Date Completed
January, 2022
Overview
CVS health is one of the US's leading pharmacy's. However, their shopping experience lacks functionality for list making.
To increase revenue and improve customer loyalty I advocated for a simplified feature closer to common SKU based favoriting functionality. After months of work and hundreds of screens produced and presented in high fidelity, product leads descoped written list functionality. Shopping list is scheduled for development for iOS and aOS in the coming months.
Taking over for a team member as a new hire I I led the entire project working closely with our accessibility designer, team lead, manager and product leads.
Feature requirements
- A shopping list experience that provides customers a quick and easy way to add an item to their shopping list from a PLP, PDP, and carousels
- Dedicated shopping list page with header, global search and access to cart
- Ability to see previously purchased products (Buy it again/easy reorder) and easily add them to the shopping list
- Ability to view the items on the shopping list based on either 'Shipping' or 'Pick up' criteria
- A filtering option to allow the customer to view the shopping list based on their selected filtering criteria
- Display a savings summary to inform the customer about the savings associated with the items on the shopping list
- Recently viewed and affinity product recommendation shelves from which a user could easily add a recommended product to their shopping list
- Ability to take take actions such as delete select items, delete all , send selected products to the cart, send all products to the cartA
- A text based list to allow customers to add non-sku items to their shopping list with the ability to delete. Search can be launched from the text based list. (descoped)
- Access to shopping list from the account page, shop landing page, deals and rewards page and global navigation (in consideration)
Process
Leaning about shopping list started with reviewing user research, competitive analysis, and hifi sketch UI assembled by designers in the previous year in Miro
User research
In 2021 CVS began conducting an ongoing annual study to measure baseline usability of the end-to-end shopping experience on CVS.com (desktop and mobile web) and the CVS app. The studies goal is to provide a benchmark comparison year over year as new features and UX enhancements are brought to market.
The first year study found that users of weekly ad were interested in replicating the age old experience of creating a shopping list with or from the sunday circular.
Others reported having adopted the practice of using the cart as a list and often using "save for later" lists to cull the cart but keep track of items they didn't want to forget.
Competitive analysis
While no one of the competitors are so similar to CVS that we could look for a one to one comparison, a broad survey provided a range of insights born from the varying patterns found. In early meetings with product leads Target's lists experience was a primary focus. Target had both written and SKU based lists.
Star market, Walmart, and Target are all examples of what not to do if the directive from research "Keep the design as simple as possible — do not try to add too much to it" is a valid constraint. Each mix multiple intents together when they offer notes like support, promotion lists, and favorites, indiscriminately.
When making lists, participants tend to use methods that are extremely easy to use. They are using pen and paper in most cases. When they use apps, they use bare-bones options, like notes. Keep the design as simple as possible. Do not try to add too much to it.
With the first round of analysis complete I began synthesizing research and patterns down into more manageable collections of insight. I then planned, conducted and documented task-based usability testing
Synthesizing research
- The conceptual model of list making is tied to written lists for in store shopping. Listers cross items (not SKUs) off their list. Other conceptual models are part of online shopping, such as favorites, save for later, and wish list. These latter features are more common with big box retail, Walmart Target and the like.
- Prioritize in-store shopping
- Listers are interested in promotions but lists begin with the need for an item rather than a browsing experience. When an item is added provide a search result of related promotions, "related deals".
- The exception to lists beginning with a though, is working up a Sunday circular into a list. This makes weekly ad, an already popular page across CVS, into an important entry point for lists based on promotions.
Synthesizing patterns
- Research indicates that tab based pages for deals and buy again are outside of the conceptual model for lists. These features are part of a shopping experience distinct from list making. Shopping takes place after — is organized by, list making.
- Stores with larger and more diverse inventory have more controls in the header of the list page. Advocate for fewer controls to remain within the constraints identified by user interviews.
- CVS's global fulfillment pattern filters search results by online and in-store, and same day delivery. Store locator and fulfillment controls are present on the shopping list page.
- The exception to lists beginning with a though, is working up a Sunday circular into a list. This makes weekly ad, an already popular page across CVS, into an important entry point for lists based on promotions.
Problem patterns
Headers compared
Early UI flows
Early flows show a three tabs solution with list, buy again and deals. This Miro board was handed off from a team member.
Using a template provided by the CVS shared services UXR team, I developed and executed an unmoderated user testing plan for a prototype that consisted of early UI patterns created by previous teams.
Research goals
- Does combining tiles and manually added items (aka text) on the list page cause confusion to the customer?
- What are user's first impressions of this page?
- Do users understand the actions they can take on this page?
- Can they add a manual item to the list? (success metric: time taken to complete)
Testing the hybrid text & SKU list UI
Gaining valuable insights from user testing, the ideation process unfolded in weekly design reviews and stakeholder presentations, leading to the creation of hundreds of high-fidelity screens.
Ideation goals
- Provide hifi UI flows to present and collect feedback from product leads and stakeholders.
- Learn about technical limitations for potential UI solutions.
- Find alternatives to UI with known usability issues, such as the hybrid text & SKU list UI
Insights from user testing
Users facing the task of "add an item to shopping list", searched if not asked to enter a written entry. The presence of the search field in the same location as shop pages turned list making into shopping. Removing the search field was discussed but rejected by product leadership.
Written entries presented a range of technical issues and edge cases.
- How many characters should we allow?
- If these entries are to be used as search queries, what about people who write themselves reminders?
- Other lists are able to pre-populate information for a written entry. Isle number and number of promotions are a few that appear. CVS merchandising does not support this functionality without a SKU. Categories cannot be returned for entries.
- Due to their importance for one click conversion SKUs on the list appear above written entries. This separates written entries from their controls and pushes them below the fold
Atomic structure
By working with autolayout and atomic structure I was able to make cascading edits, often in real time in meetings with product leads and stakeholders. Building components as I went allowed me to build numerous screens quickly through duplication.
Many small iterations of controls were proposed but one alternative to dual input fields using the iOS pulldown button promised to resolve a fundamental usability issue.
having found usability problems with the presence of the search bar and an add control, or dual fields, an alternative was designed. The iOS pulldown button is perfect for such a dilemma.
A number of other iterations were under discussion
- Can BOPIS be folded into the filters?
- Filters, a truncated set or PLP filters or as is?
- Filters in a pulldown menu. A new iOS pattern that would be consistent with the new pulldown button.
- Add pages vs full page modals
- Add actions, search & browse. Or seperate options and pages?
The final prototype abandon the complexity of the both written and SKU list. Future sprints plan to pick up this more "favoriting" like experience for development on native applications.
having found usability problems with the presence of the search bar and an add control, or dual fields, an alternative was designed. The iOS pulldown button is perfect for such a dilemma.
A number of other iterations were under discussion
- Advocated for and ended with shopping list being its own page free from tab navigation for other shopping experiences like buy it again, and deal and rewards.
- Advocated for and ended with a SKU based list inline with findings from research. Researchers and myself felt that CVS users were likely to use other options for text based lists.
- Filters in a pulldown menu. A new iOS pattern that would be consistent with the new pulldown button.
- Add pages vs full page modals
- Add actions, search & browse. Or seperate options and pages?
Final prototype (with written list)
Final handoff file
Reflections & takeaways
Shopping list features across e-commerce can be overly complicated. What I felt would be important and valuable is to learn and understand what CVS users wanted and needed to enhance the shopping experience.
Taking a cue from the speed at which user testing participants engaged the prototype and ended up searching, I pushed for search and add from PLP as the solution.
Were CVS merchandising able to support category based pre-search the way some competitors are, a more seamless text based list could be developed. However, I still question the tendency to replicate list features from big box stores or grocery, as I believe CVS is different and warrants it's own solution for lists as a shopping tool.