CVS Pharmacy App Accessibility Redesign
During this graduate project, I worked with a team of student designers to redesign the CVS pharmacy app for people with low vision.
Role: Research Lead, UX Strategy & Wireframe Design for iOS
Challenge:
During an immersive, semester-long class dedicated to accessibility design, my team improved the CVS pharmacy app experience for users with low vision.
Solution:
Major insights from user interviews and other research led us to four key design changes.
We updated the information architecture of the app to decrease visual clutter.
We ensured buttons and text were grouped together to improve the experience for people using VoiceOver and other screen readers and designed new screens with dynamic text in mind.
We also redesigned icons to increase their visibility and reduce the amount of icons used in the app overall.
Process
Compliance Research
In order to meet WCAG AA level accessibility compliance for low vision users, we made sure our design met the following benchmarks:
Provide text alternatives for content that is non-text
Ensure the contrast ratio between background and text is at least 4.5:1
Ensure text can be resized up to 200% without losing content or function
Definition of Low Vision
A person with low vision has significant visual impairment that cannot be corrected fully with glasses, contacts, or any other treatments. Some types of low vision include cataracts, glaucoma, and retinopathy.
Heuristic Analysis
While evaluating the CVS pharmacy app with accessibility settings enabled (large text and VoiceOver), we quickly learned that the current CVS app was not properly designed for a screen reader or dynamic text settings.
Insights:
Opportunity to improve the experience for people using screen readers by grouping buttons and text
New screens should be designed with dynamic text in mind
User Interviews
For interviews, we sought out people who used pharmaceutical apps to refill prescriptions. One third of the users interviewed for this project had low vision. I interviewed participants about their app usage and frustrations, and observed low vision users completing tasks on the current CVS pharmacy app.
Insights:
The amount of information presented on the first screen of the CVS pharmacy app was overwhelming for both low vision and full vision users
Although low vision users preferred highly recognizable icons over text in general, the CVS icons, which use a thin outline, were very difficult for low vision user to perceive.
Mental Model & Persona, based on interviews
We used Indi Young's method of mental modeling to comb through our interviews and organize insights and created a persona based on our low vision interviews.
Early Sketching and Planning for Information Architecture
Each designer on the team sketched independently, then we brought our sketches together to share ideas.
At the same time that we began sketching, we began reorganizing the information architecture of the app.
Key Design Changes
While observing people using the old version of the CVS app, we noticed users experiencing friction due to the lack of a clear information hierarchy. We decreased visual clutter on the home screen and gave more prominence to the app's main functions.
During interviews I conducted, I learned outline-style icons were difficult for users with low vision to see. One of my fellow student designers redesigned the app icons to increase their visibility based on this feedback.
Low-Fidelity Wires for iOS
High-Fidelity Wires for iOS
UI for high-fidelity wires was done by a fellow student designer.
User Testing to Validate Design Changes
After finishing our prototypes, we reached back out to two of our interview subjects with low vision for usability testing. We also sent our designs to an iOS developer to gauge the success of our design changes in terms of complying with iOS system regulations.
Overall, we got positive feedback, particularly from our low vision users regarding the new icons and color contrast. We also got a few ideas for improvement. One area for improvement was in the shortened names we created for dynamic text accommodations (a few phrases were confusing to users). We would like to go back and test other phrases to find wording that works with dynamic text constraints while still adequately conveying meaning.