Footer Redesign | Project Details

Overview

Problem:The main footer for the MinuteClinic repeated across many pages, contained 20+ WCAG 2.1 failures.

Requirements:

Ensure Footer Redesign Fix all defects and Meet (WCAG) 2.1 Level 'AA' Accessibility Guidelines.
Provide Development with Accessibility annotation development notes about accessibility considerations when implementation.

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.

Solution Team

The design brainstorming exploration, solution proposals, and deliverables were chiefly owned and performed by 5 members of the User Experience Design team:

User Experience Designer (UXD)
User Interaction Designer (UID)
Content Strategist
Researcher
Accessibility Designer *

My contributions as Accessibility Designer:

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.