Footer Redesign | Case Study

Comparison of Legacy and Redesigned of footer landmark

Overview

Problem: MinuteClinic's recurring main footer is problematic, as it not only contains more than twenty WCAG 2.1 accessibility errors, but also presents a dated and visually discordant appearance compared to the site's other footers.

Business Value:

Design Solution eliminated 23% Accessibiltiy design defects within Business Unit
Increased Navigation and Trust of users with proper accessibility by ensuring use of Accessibility best practiced applied to industry awards and social media.
Increased site Navigation with proper labeling of site pages.

Solution: Collect an inventory all Accessibility defects, examples of all organization footer landmarks designs and work with UX design team Content Strategists, Interaction and Visual Designer in redesign proposals that resolved all defects.

Contributions:

Took inventory of 20+ WCAG failures defects with the health footer within defect tracking system
Documented all the footers designs across the different organizational Business units/verticals inventorying different approaches to the landmark and common design patterns in footers.
Document different a11y defects visually and concerns for ux to look into and provide possible solutions to resolve defects.
Spotlight documented findings about WCAG Failure and need for Redesign area to resolve issues UX leadership, Design team members and A11y Designers & Engineers.
Stragize with UX, Marketing Branding SEO and other teams regarding the Footer and best design patterns to redesign footer.
Hold Weekly or BiWeekly Office Hours for Knowledge about Design Best practices reviewing Design proposals and supporting team or train members
Provide A11y Design Annotations along with the designs to Development for them to include in the programming of the footer.

Design Stage

Legacy Health Services Footer Design

Inventory of Designs & A11y Defects

Footer Design Inventory

Inventory the varieties of different Footer Designs across CVS Health Business units / Properities

Inventory of Footer Designs — **figure:** collection of 8 different footer designs within cvshealth digital portfolio

Redesigned Footer

Redesigned Desktop & Mobile Footer Landmark — **figure:** Redesign Footer on Desktop & Mobile to be use across all Health Services pages

Desktop - Footer Legacy & Redesign Comparison

Comparing of both the legacy and the redesigned footers on of a desktop layout

Desktop - Legacy & Redesign Footer Comparison — **figure:** comparison of Legacy [Before ] and Dark Blue background Redesign Footer [ After ] on Desktop

Mobile - Footer Legacy & Redesign Comparison

Comparing footers the redesign ensures parity with desktop and also allows for easier reading, scanability and tap target sizing for more touchfriendly interaction with devices.

Retrospective

Closing thoughts regarding project pros & cons and next steps if the project moves foward with additional enhancements.

Oppurtunity still remains for explorations of a consistent Footer Design across entire domain.
Content streamlining oppurtunities remain in the volume of content footer.