CVS - App Redesign for Accessibility

Background

In this semester-long project, we were tasked with redesigning an app to meet WCAG accessibility compliance standards. My team redesigned the CVS app for those with low vision (glaucoma, retinopathy, cataracts).

Role: UX Research, UX Strategy, Icon Design


Process

hypothesis

By better defining the information architecture of the CVS pharmacy app and decreasing the visual clutter on the app’s home screen, users will be able to accomplish tasks more successfully—particularly users with low vision.

User interviews & insights

We interviewed users with and without low vision who use pharmacy apps or websites in order to understand their typical usage and pinpoint any current frustrations.

Key Insights:
-Users prefer a simple interface where there isn't an overwhelming amount of information being presented.
-Low vision users prefer icons to text; however, outlined shapes are more difficult to read than solid ones.
-Low vision users prefer high contrast.
-There is a preference to web over app due to zoom and text capabilities 

 
vline-24.png
 
I hate when there’s not really any contrast and then I have to go digging to look for content...I feel like there’s too much going on...it goes so much further to just simplify it.
It’s very easy for somebody who has very narrow vision to get overwhelmed with too much content...That’s why I don’t use like 90% of my apps.

mental model

Following Indi Young's guidelines, we generated a mental model from insights collected during our user interviews to fully comprehend user goals and needs in order to create a product that provides the best overall user experience for all users. Below is a section of the model we generated.


Final Icons

When redesigning the icons, it was important to keep in mind a few key insights from interviews with low vision users—icons are preferable for navigation, but only when they are recognizable, mostly solid, and high contrast. Below is a before and after of a few of the icons as well as the complete final collection of icons I created.

Before and After icons

 

final icon collection


Final App

Key interface Changes

  • Made changes to the information architecture to decrease visual clutter and allow for more discoverability
  • Increased contrast in overall interface and icons
  • Grouped text and buttons for improved experience when using voice over or screen readers
  • Included dynamic text

Explore the clickable prototype below and view before and after homepage images on the right.

 

Current CVS home screen (Feb 2018) and our redesigned Android home screen