Footer Redesign & A11y Optimization | Project Details

< Back

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

Legacy Health Services Footer Design Legacy Health Services Footer Design
figure: Legacy health services page Footer Elements on Desktop & Mobile Devices

Footer Design Inventory

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

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

Redesigned Footer

Redesigned Desktop & Mobile Footer Landmark 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 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.

Mobile - Footer Legacy & Redesign Comparison Mobile - Footer Legacy & Redesign Comparison
figure: comparison of the old Legacy [ Before ] and Dark Blue background Redesigned Footer [ After ] Mobile Device

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.
Jump to Start of Main Content