WHAT
Group Project

ROLE
UX Research | UX Strategy | UI Design (Android)

Redesigning the CVS App
for low vision accessibility

User Interviews

Persona Development

Competitive Analysis 

Current Interface Audit

AEIOU Framework

Mental Model

Wireframing

Prototyping

UI/Interaction Design

User Testing

 

As part of a semester long accessibility study, we were tasked with redesigning the CVS app to meet WCAG accessibility compliance standards for people diagnosed with low vision. 

Under the guidance of the lead accessibility designer at Aetna, we learned to solve design challenges for those suffering from retinopathy, glaucoma and other vision impairments without detracting from the overall experience. This became an important lesson in being aware and empathic to users who experience interfaces in entirely different ways than the average user.

I believe technology should be used to improve and simplify everyday tasks, like filling prescriptions, rather than complicate them. This became the focus of our redesign efforts to the CVS app.  

How might we modify the CVS pharmacy app such that users
with low vision can accomplish tasks more successfully?


How might we disrupt the existing health insurance industry while empowering customers with a greater understanding of their healthcare coverage?


Understanding users with low vision impairments.

Since no one on our team directly has experience with low vision, we set out to understand what life is really like when you've been diagnosed with low vision. We discovered many people percieved low vision to mean anyone who wore glasses, contacts or needed any assistance with vision. This is incorrect - low vision is significant visual impairment that cannot be corrected fully with glasses, contacts, or any other eye treatments. There are several types of low vision causes, including cataracts, glaucoma (often impacts peripheral vision), and retinopathy (causes blind spots, blurriness and distortions). Each of these impairments impacts a user in different ways - meaning that our designs had to be aware and sensitive to the different ways vision can be impacted. 

The users we interviewed with low vision brought to our awareness that low vision is often combined with other disabilities - such as colorblindness, or in one user's case, Usher's Syndrome - which impacts both hearing and vision. These visual impairments significantly impact how these users interact with mobile apps depending on the severity of their condition and often use accessibility tools such as zoom, invert settings and voice over. 

 

glaucoma

GLAUCOMA

Screen Shot 2018-05-27 at 2.18.57 PM

RETINOPATHY

Our hypothesis.

 

The current CVS mobile app is not accessible to low vision users and can be improved to meet AA accessibility compliance.

 

Deriving insights from our user research.

We developed a screener in order to locate a sample of both users with low vision and without who use pharmaceutical apps for refilling prescriptions. We wanted to understand how current users across the board utilized the app and how we might improve the experience for those with low vision, but keep in mind all users. 

Here are some of the key insights we derived from those interviews, after combing through them and developing postcards for each interview:

  • Prescription numbers can be too small or hard to read
  • Preference for icons when icons are clear
  • Simple interface with clear call to what action is required
  • High contrast is important for those with low vision
  • Often prefer website because of zoom and text size increase capabilities

To see some key quotes from our interview, scroll through the gallery to the right --->  

RESEARCH INSIGHTS

We developed a screener in order to locate a sample of both users with low vision and without who use pharmaceutical apps for refilling prescriptions. We wanted to understand how current users across the board utilized the app and how we might improve the experience for those with low vision, but keep in mind all users. 

Here are some of the key insights we derived from those interviews, after combing through them and developing postcards for each interview:

  • Prescription numbers can be too small or hard to read
  • Preference for icons when icons are clear
  • Simple interface with clear call to what action is required
  • High contrast is important for those with low vision
  • Often prefer website because of zoom and text size increase capabilities

To see some key quotes from our interview, scroll through:  

Hannah_postcard

Building mental models from our findings.

Because we were designing for an audience that struggled with a very different problem than ourselves, it was important to make sure we understood closely how people with low vision percieved the process of filling a prescription and other jobs to be done around their pharmacy experiences. 

We used our interviews and insights to pull out perspectives, opinions and thoughts our users felt around the process and used those to build a mental model. This gave us the ability to see a bigger picture of the thoughts and feelings of our user. This model gave us insight into how we wanted to support our users in the app and how to pull out key points that would help ultimately improve accessibility and the user experience navigating the CVS app. 

 

mentalmodel

A mental model built using Indi Young's diagram´╗┐, used as a research tool to understand sentiment and user's mindset around key tasks. 

Meeting WCAG compliance.

We wanted our solution to meet WCAG AA level compliance for accessibility, particularly for low vision users. This means:

 


 Providing text alternatives for content that is non-text

The contrast ratio between the background and the text should be at least 4.5:1

Text should be able to be resized up to 200% without losing content or function


 

 Providing text alternatives for
content that is non-text

The contrast ratio between the background and the text should be at least 4.5:1

Text should be able to be resized up to 200% without losing content or function

 

Highlighting key interface changes.

This guided our decision, along with research insights, on what areas to target in the app. Our solution ultimately focused on:

  • Increased contrast in interface and in redesign of iconography
  • Accounting for dynamic text, which current CVS app does not
  • Creating alt text and grouping text so that Voice Over and other screen readers
    will read app correctly
  • Update the information architecture of the app to decrease visual clutter on the
    home screen and allow for more discoverability

twoscreens

CURRENT CVS HOME SCREEN (AS OF 02/2018)  VS. NEW

CURRENT CVS HOME SCREEN (02/2018)  VS. NEW

Designing wireframes around a more accessible experience for all users.

We took care to design our wireframes with our insights and key changes as a priority. We knew that we could leverage the current design and colors to create a minimal, branded experience that was accessible to those suffering with a vision impairment, while still keeping the design visually appealing to our average customer base. 

Designing wireframes around a more accessible experience for all users.

We took care to design our wireframes with our insights and key changes as a priority. We knew that we could leverage the current design and colors to create a minimal, branded experience that was accessible to those suffering with a vision impairment, while still keeping the design visually appealing to our average customer base. 

Home_wire
Current RX_wire
Refill Scan_wire
Refill Info Copy_wre
Home Expanded
Home – Expanded – Dynamic Text
Current RX
Current RX Dynamic Text
Refill Scan
Refill Scan dynamic
Refill Confirmation
Refill Confirmation – dynamic

Creating a new icon system for increased contrast and recognition.

We One of the key takeaways we had from our interviews was that icons were a preferred method of navigation, however, low vision users find that they are often hard to decipher what they are, and if the contrast and line thickness is not great enough, users struggle to use and recognize them.  

Creating a new icon system for increased contrast and recognition.

We One of the key takeaways we had from our interviews was that icons were a preferred method of navigation, however, low vision users find that they are often hard to decipher what they are, and if the contrast and line thickness is not great enough, users struggle to use and recognize them.  

icons

Validating our design changes.

After we had implemented our design changes to the interface, we put our prototype back in front of our low vision users to see if we had indeed improved their experience of the app.  We also spoke with an iOS developer for insight into the compliance of our changes with iOS system regulations. From these conversations, we believe next iterations of our design would be speaking with an Android developer for the same confirmation of meeting regulations, as well as testing the screenreader and tab controls which were outside of our scope for this first leg of the project.

Wrapping the project up & things we would re-evaluate.

After two months of research and combing through interviews to build a mental model of our users, we believe the changes we implemented into the new interface for the CVS app creates a more accessible experience for users with low vision. By simplifying the color palette and increasing contrast, users with low vision will more readily be able to identify and read text and icons. Revisiting the information architecture to prioritize prescription refills and management over features users claimed not to use will allow them to accomplish their tasks quicker. Finally, adjusting the interface for dynamic text and grouping text for screen readers will greatly improve the experience for users with low vision. 

We were limited by our data on CVS' end for this project, as it was a hypothetical redesign. If we had had access to more in-depth analytics from the current CVS app, we might have seen data that differed from ours - as we had to go completely off of User Interviews and feedback. We struggled at the beginning of our interviews to find low vision candidates, and went through some ups and downs to find users to speak with (like bribing people on Next Door with Starbucks gift cards). We did 2 user tests with our low vision users, but we would like to go back and do more to understand a variety of user cases. 

Some of the UI feedback we received we would like to revisit and test:

Wrapping the project up & things we would re-evaluate.

After two months of research and combing through interviews to build a mental model of our users, we believe the changes we implemented into the new interface for the CVS app creates a more accessible experience for users with low vision. By simplifying the color palette and increasing contrast, users with low vision will more readily be able to identify and read text and icons. Revisiting the information architecture to prioritize prescription refills and management over features users claimed not to use will allow them to accomplish their tasks quicker. Finally, adjusting the interface for dynamic text and grouping text for screen readers will greatly improve the experience for users with low vision. 

We were limited by our data on CVS' end for this project, as it was a hypothetical redesign. If we had had access to more in-depth analytics from the current CVS app, we might have seen data that differed from ours - as we had to go completely off of User Interviews and feedback. We struggled at the beginning of our interviews to find low vision candidates, and went through some ups and downs to find users to speak with (like bribing people on Next Door with Starbucks gift cards). We did 2 user tests with our low vision users, but we would like to go back and do more to understand a variety of user cases. 

Some of the UI feedback we received we would like to revisit and test:

Screen Shot 2018-07-13 at 12.06.36 AM

During onboarding, when the app asks for location permission - it uses the phrase 'deliver a more personalized in-store experience', and our low vision users were unsure what that meant or what benefits that would provide, since the beacon concept did interest them and they wanted more information.

Screen Shot 2018-07-13 at 12.06.50 AM

During onboarding and sign up, users mentioned that the 'Sign In' and 'Create Account' button looked like one large button to them and they wasn't clear as separate actions.

Screen Shot 2018-07-13 at 12.08.31 AM

On our homepage, our key call outs are refilling prescriptions, managing your family prescriptions and your current prescriptions. Due to dynamic text accommodations, we had shortened 'Current RX' to 'Current' but then realized our users were telling us that title was unclear now. We would like to go back and card sort and test other phrases in it's place for clarity.

cvs_mockup

Maria Diodati. ┬ę 2019.

 

minimedium1
miniinsta1
minilinked1