Blue Shield of California - Member Progress Bar
Project Overview
Description
Members looking to understand what their plan deductibles are and where they’re currently at use these ‘accumulators’ or progress bars to gauge their costs in regards to their health plan.
My role
I was brought in as accessibility SME and UX Designer to re-vamp the progress bar component.
Main areas of responsibility:
- Accessibility audit & development guidance
- UX analysis (requirements, gap analysis, development)
- Brand update (adding new colors to the palette)
- Design (layout, component organization)
The Challenge
Current State
The existing progress bars were confusing visually, invisible to screen readers and did not pass color contrast. In an effort to continue to uplift Blue Shield of CA’s sites and work towards WCAG 2.1 AA compliance as well as general usability uplift, there was an opportunity to improve this experience for members.
User Pain Points & Compliance Issues
There were several issues with the progress bars – users didn’t understand what they meant and how to use them to better understand their benefits and health plan.
Our goals were to:
- Create an accessible component up to WCAG 2.1 AA standards
- Increase customer satisfaction and decrease frustration by demonstrating clarity and transparency
- Cleaning up content and language
- Clarify what information is being displayed
I don’t understand what this means. What is this saying? How do I see how much I’ve paid and how much I still owe?
Blue Shield of CA Member
Research
Accessibility
Before coming up with concepts I performed an accessibility audit on the progress bar component. I discovered that the colors were not WCAG 2.0 AA compliant. Additionally, the progress bars were coded as images with no alt text or ARIA.
Design
Working within the constraints of a compressed development timeline I was limited in my ability to completely re-design the component.
In scope: content, colors, ARIA, Alt text.
Out of scope: layout, design of progress bars
Content
Cleaning up the labels and terminology would be a big win – many members didn’t understand the healthcare business terminology so we needed to use more understandable wording.
Ideation
A/B testing
Using the existing design and two new versions, I created 3 versions of the progress bars (responsive web and mobile). I then did some guerrilla testing with employees, family members and teams from other departments to garner feedback. In addition to the content and visual updates, I also advised the development team on how to correctly code the component so a user using assistive technology would be able to access the progress bar component – this was then added into the development library for future use.
The Results
Accessibility Compliance
The newly coded and updated progress bars achieved WCAG 2.1 AA compliance, success! Additionally, users now have a better understanding on what they’re seeing and interacting with.