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 

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.

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