Rethinking the Mobile Experience for Low Vision Users
CVS - GRADUATE PROJECT
Overview
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 spoke to people with low vision impairments to understand their daily challenges and routines. Our goal was to make the CVS app easy to use not just for the average user but to consider users with vision impairments and their use of the app.
Role
UX Researcher
UI Designer
Activities
Competitive Analysis
User Interviews
Persona Development
Mental Modeling
Interface Audit
User Interface Design
User Testing
How might we modify the CVS pharmacy app such that users
with low vision can accomplish tasks more successfully?
How might we modify the CVS pharmacy app such that users
with low vision can accomplish tasks more successfully?
How might we modify the CVS pharmacy app such that users
with low vision can accomplish tasks more successfully?
Understanding users with low vision impairments.
We discovered many people perceived 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 different ways vision impairments can reduce visibility for people, which meant our designs had to be aware and sensitive to the different ways vision can be impacted.
Our interviews revealed 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. As a result, they often use a combination of accessibility tools such as zoom, invert settings and voice over.
Understanding users with low vision impairments.
We discovered many people perceived 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 different ways vision impairments can reduce visibility for people, which meant our designs had to be aware and sensitive to the different ways vision can be impacted.
Our interviews revealed 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. As a result, they often use a combination of accessibility tools such as zoom, invert settings and voice over.
GLAUCOMA
CATARACTS
RETINOPATHY
MACULAR DEGENERATION
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.
Through screening, we spoke to users with and without vision impairments to understand how both users use pharmaceutical apps to refill prescriptions. It was key to improve the experience for low vision users, but keep the overall experience in mind as well.
After combing through interviews, these were some key takeways:
- 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:
We used these findings to build a mental model of our users' opinions and thoughts.
We structured this using Indi Young's diagram, to better 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.
From our research, our solution 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
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 navigating the app with a vision impairment. Below you can see the wireframes transition to high fidelity UI as well as the interface with dynamic text for users with enlarged text for increased visibility.
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 navigating the app with a vision impairment. Below you can see the wireframes transition to high fidelity UI as well as the interface with dynamic text for users with enlarged text for increased visibility.
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 navigating the app with a vision impairment. Below you can see the wireframes transition to high fidelity UI as well as the interface with dynamic text for users with enlarged text for increased visibility.
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.
Creating a new icon system for increased contrast and recognition.
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 if the contrast and line thickness is not evident enough. The old icons were too detailed and relied on outlines decreasing their contrast which caused vision-impaired users to struggle to recognize them.
Creating a new icon system for increased contrast and recognition.
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 if the contrast and line thickness is not evident enough. The old icons were too detailed and relied on outlines decreasing their contrast which caused vision-impaired users to struggle to recognize them.
Creating a new icon system for increased contrast and recognition.
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 if the contrast and line thickness is not evident enough. The old icons were too detailed and relied on outlines decreasing their contrast which caused vision-impaired users to struggle to 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.
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:
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:
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.
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.
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.
