Revised information architecture, filters, deal tiles and weekly ad page view for desktop, mWeb, aOS and iOS

Man at a desk in front of an iMac viewing CVS weekly ad online.

Date Completed

April, 2023


The weekly ad is one of the most visited pages in the CVS suite of platforms. However, both the desktop and mobile web experiences suffer from non-standard and inaccessible design patterns.

In order to boost revenue and enhance customer loyalty, I undertook a redesign of the tab navigation, filtering experience, deals tiles for the list view and framed in circular content for the CVS weekly ad.

I spearheaded the initiative to enhance one of the most visited pages on, collaborating closely with our accessibility designer, team lead, manager, and product leads. The updated version is scheduled for release later this year.

Feature requirements

  1. The label for location needed to describe it's function which is different from the home store (My CVS). Selected store reflects the action taken on store locator to view an ad for a store.
  2. And selection presented a number of problems. The options are not well described as weeks as one is a latin ad. Exposing the options is preferred for greater visibility of system status.
  3. List and page view tabs were mixed with the open close for filters for weekly ad content.
  4. The close for the filters menu was an incorrect mix of carousel and modal functionality.
  5. The mixed use of a banner, button, and badged label on tiles was in need of a more visually consistent treatment.
Redesigned navigation and controls for CVS weekly ad desktop.

The current experience

A number of small fixes add up to a refined page with accessible navigation and sort and filtering rendered in established patterns

The current weekly ad

  1. Has oversized tabs icons in an unusual stacked orientation.
  2. Sorting the tab body content by date is controlled by a drop-down menu. This is an incorrect pattern. This would be something like a combo-box if it were wrapped in a stroke.
  3. Filters is not a view like page and list are. Introducing material design treatment of choice and filter pills allowed for removing it from tabs navigation.
  4. The page loads with filters collapsed. Opening them exposes this, something like a, modal with a close in the upper right. This also is not a known pattern. Open and close with an X is used in modals which takeover the page preventing interaction with the rest of the page.
  5. Tiles are engineered with nearly no top margin and a gulf of empty space between content and the shop now button.
Screenshot of the current CVS weekly ad page1

Looking to material designs choice and filter chips resolved accessibility and architecture usability concerns

The CVS circular is offered in a list and page view, current and next weeks, and also as a spanish products version. Employing choice chips allowed for easy resolutions to a number of problems.

  1. While List and page are common labels for views and familiar labels for navigating tab content, filter is not a view and should not be a tab as it belongs to a different category of control.
  2. Choice chips controls for versions of the ad resolved two problems. They allowed for exposing the options which improves visibility of system status. They also allowed for a more accurate label for the controls by exposing the dates and communicating the categories of difference between versions of the ad without requiring labels. There are some circumstances in which there are circulars that are covering multiple weeks and spanish versions. Using a task specific label "Select ad" allowed for the content of chips to define the content categories when "this week" would have been a poor label given the versions which were a language category in addition to date.
  1. Using filter chips allowed for the use of a standard control for opening an accordian to expose filter chips. This was a significant improvement over the non-standard use of a mixture of an accordion and modal in the current version.
  2. Including an all offers chip rather than a reset link allowed us to differentiate visually the two groups of chips, choose circular & filter results.
Close crop of the choice & filter chips on the weekly ad page

Redesigned deal tiles were produced with autolayout and a min height spacer. This allows for the tallest content tile to set the height for the row of tiles.

In addition to defining a front end development solution for tiles, the fulfillment messaging was folded into an existing pattern consistent with other coupons across CVS.

Screen-grab of old weekly ad page

Redesign weekly ad tiles follow the pattern of product list page tiles with the exception of the replacement of red buttons with this outlined button style being adopted across CVS.

The redesigned elements of the page shown to the left

Redesigned controls allowed for a future weekly ad page view concept free from overly complex and clumsy navigation

The current weekly ad is a framed in experience provided by a service. The current service employs a right rail within the framed in experience as a product detail page for a selected ad product. This functionality as well as ad selection, and category anchor links are patterns CVS would like to revise if technically possible without taking up all of the responsibilities the current service oversees.