CVS Health
Browse and Shop redesign
CVS needed to improve and optimize their online store user experience to respond to pandemic-driven market changes where customers were shifting from buying in the physical stores to preferring other delivery methods.
Role
Product Designer
Year
2020-2021
Problem
CVS Health, one of the largest American retail companies wanted to improve its online shopping experience. Competitors such as Walmart and Walgreens had been making steps towards providing better customer service, and new features and had invested in modernizing their user experience. These needs became even more critical in a pandemic environment that was contributing to less traffic in physical stores and potentially less revenue.
Goal
A series of internal and externally conducted research and user data indicated some of the reasons why CVS Shop was seeing their conversion rates fall.
Business and Product wanted to improve our information architecture, introduce new features and improve customer price perception. Our team focused on the Product Listing and Product Detail pages.
Research
Research review (Baymard and Internal research)
Every two years CVS hires the Baymard Insititute to perform an entire website UX audit, measuring it against leading e-commerce sites. In the end, they publish a complete report including, accessibility, best practices, technical performance, and a set of recommendations. We used this Baymard report to understand user pain points, design and accessibility debt, and define what were the most critical ones to address.
UI audit
I then performed and documented a more in-depth UI Audit of the Product Listing and Product Details pages so my team could start to have more focused conversations. The scope was very large and I wanted to make sure we could have specific and precise examples of the issues we would likely be solving for. Some of the UI issues found were mostly related to information architecture, design debt, layout and component inconsistencies, whitespace, accessibility, and interaction design.
Competitive analysis
The internal research team performed a competitive analysis based on the issues we have found previously. They compared CVS’s shopping experience on web desktop, mobile, and app against large e-commerce players such as Amazon, Walmart, Target, Wayfair, and Wallgreens. Below you can find some high-level recommendations that we then anchored our efforts for the design phase.
Recommendations
Improve price perception across the shopping experience.
Focus on the product listing and product details page. Provide clear information on product sales, regular price and any savings available.
Expand the fulfillment options.
Competitors are already providing delivery, shipping, store shopping and Buy Online and Pickup in Store (BOPIS). CVS needs to provide BOPIS in order to be competitive.
Modernize the UI Design.
Current design is dated, oftentimes confusing and clunky. Competitors are investing a whole lot in their digital platforms, digital experience and updating the visual language. CVS should invest in implementing a consistent and pleasant experience for their customers to be relevant and cater to the younger generations.
Design
This was a large project and the design process was divided into multiple sprints and iterations. Each iteration ran for approximately one quarter of the year and was then divided into sprints. For each sprint, we focused on different aspects of the experience.
The first body of work was to understand how to translate the research findings into actionable pieces of work and plan how these could be continuously delivered.
Brainstorming
We started brainstorming as a team so we could map out the features we needed to work on and that led us to better define the strategy. I had to work with the engineering and product teams to prioritize and later sequence the work.
These brainstorming sessions allowed us to identify a few critical places we wanted to invest the most time in optimizing: The top section of the Product Detail page (Price display, Image gallery, and the order fulfillment options) For the Product Listing page our priority was to improve the product tile design and the sorting and filtering functionalities.
Information Architecture
I worked with the research team to set up a few unmoderated user tests. We wanted to understand how were people reading and understanding the information on their screens.
The feedback was very clear. For instance, when it comes to the PDP and PLP experience, not only was the price perception confusing and inconsistent, but customers also felt uncertainty when it comes to what were they purchasing when adding to the basket.
We needed to provide more complete product information, as well as position and sequence that information in a more natural way like telling a story about that product:
Primary story
This product is a shampoo, I can clearly see the images and ingredients, it has great reviews and costs $5 but I can get it for $3,99 after savings.
Secondary story
I can also get different sizes and scents, and also get it delivered at my door as soon as 3 pm today.
Wireframes and Flows
The CVS shop experience had been growing organically and as such for a long time there hadn’t been a deliberate attempt to map current flows and interfaces to find opportunities to create consistency across the shopping experience.
We also used these maps to identify any dependencies with other teams, such as the checkout team for the new required fulfillment options or the physical store’s team to provide us with store availability and store change.
UI Design and Components
To address user feedback and research recommendations we needed to improve several components of the user experience. Here are some examples:
Price display
I made some adjustments to the way we were displaying the price to make it consistent across multiple locations and facilitate a better price perception. I created a component with different variations containing the current price, price per unit (PPU), regular price (if on sale), and the price for CarePass members. I also provided price ranges if the product had different variants (size, scent, etc).
Image Gallery
The image gallery had a couple of issues and so I replaced the dotted navigation with thumbnails for the images and removed the arrow navigation for Desktop while adding the “dot navigation” for mobile for easier orientation.
Variants
These product variation selection controls had a few issues as well – small target footprint, non-accessible colors, and didn’t provide price per unit information. The new design tested extremely well throughout user-testing.
Product Tile
This component was redesigned to accommodate the price display changes as well as pickup or delivery availability.
Accessibility
Accessibility was a critical aspect of our design strategy. CVS’s core business was pharmacy-related products and as we all know a large percentage of its customers were older and many of them with difficulties navigating the stores, websites, and apps. More than being compliant with federal and state regulations on accessibility, we wanted to provide the best possible experience for any user, regardless of age, or physical and mental disabilities. For that, I collaborated with accessibility specialists in order to review, test, and get recommendations for improvements.
We focused on improving and sometimes redesigning, components and flows. We made font size and color contrast adjustments in order to fit within the WCAG accessibility standards and therefore provide the best possible user experience.
User Testing
We performed user testing throughout the entire process. We collected important data by testing initial flow drafts with participants using qualitative and quantitative metrics.
We mostly used the platform www.usertesting.com for unmoderated tests. Collaborating with the research team to craft surveys, test Invision prototypes, and gather the insights that allowed us to make informed design decisions and optimizations.
Final Designs
Results
The combination of these various design initiatives had a significant impact on the online store performance in the following quarters. Here are some highlights:
Increased cart conversion.
~65% increase in ATB (Add to basket) from the PLP, which suggested that people were feeling more confident shopping the new experience. An interesting point was that we saw this increase mostly associated with non-price-sensitive products. People don’t tend to change, for instance, their shampoo brand if the price becomes slightly more expensive. Reducing the friction to the cart had a positive effect and therefore reflected in the overall checkout conversions.
Improved price perception.
Research surveys showed customer price perception had improved with the new design. We suspected that a better and more complete price information display and changes in the information architecture had a significant positive impact.
Increased quarterly revenue.
Providing BOPIS (Buy online pick up in-store) had a large impact on revenue. Opening a new alternative shopping modality for the customer base brought the opportunity to satisfy different shopping models.