Revised information architecture, filters, deal tiles and weekly ad page view for desktop, mWeb, aOS and iOS
Date Completed
April, 2023
Overview
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 CVS.com, collaborating closely with our accessibility designer, team lead, manager, and product leads. The updated version is scheduled for release later this year.
Feature requirements
- 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.
- 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.
- List and page view tabs were mixed with the open close for filters for weekly ad content.
- The close for the filters menu was an incorrect mix of carousel and modal functionality.
- The mixed use of a banner, button, and badged label on tiles was in need of a more visually consistent treatment.
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
- Has oversized tabs icons in an unusual stacked orientation.
- 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.
- 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.
- 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.
- Tiles are engineered with nearly no top margin and a gulf of empty space between content and the shop now button.
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.
- 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.
- 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.
- 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.
- Including an all offers chip rather than a reset link allowed us to differentiate visually the two groups of chips, choose circular & filter results.
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.
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.
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.
.png)
The future state would follow other desktop product detail page patterns and open a full page modal.
.png)
.png)