Accessible design at Color

Designing healthcare solutions for large-scale populations.

Overview

As a product designer at Color, I owned the end-to-end designs for the precision care team. One of Color’s largest initiatives was returning genetic test results to ~200k participants of the NIH’s All of Us research program.

After identifying issues in the current genetic ancestry web report, I improved the product’s accessibility and comprehension by paying attention to the right details and utilizing data.

Project details

Time: Sept 2022
Tools: Figma, Metabase
Team: While I was the only designer staffed on this project, I gathered feedback frequently from cross-functional teammates: project managers, engineers, genetic counselors, data scientists, and other designers.

My contributions

1. Rapid prototyping for creative solutions
2. Creating a new data dashboard to inform designs
3. Ensuring WCAG 2.1 accessibility compliance

Providing value to a diverse pool of participants from a national research program

All of Us is a large-scale national research program that intentionally recruits 80% participants who are historically underrepresented in biomedical research. I found it extremely important to design an inclusive and accessible product for these users.

A problem that is easy to miss and easier to ignore

The genetic ancestry results had a few accessibility issues. In order to meet WCAG 2.1’s requirements for web accessibility, boundaries between colors need to have at least a 3:1 contrast ratio in order for users with moderately low vision to distinguish boundaries. The results did not have a dedicated header, so users with screen readers often missed the most important section of their report. I also discovered some comprehension issues that hindered users from fully understanding their reports.

Rapid prototyping for creative solutions

I created 20+ prototypes to understand all possible solutions and weigh the pros and cons. With a simpler design, users get less information. With a more complex design, users with low vision get excluded.

Gathering feedback and evaluating edge cases

My cross-functional teammates had mixed opinions. Designers and engineers appreciated solutions that were simple and elegant, whereas genetic counselors called out certain edge cases that would underwhelm and disappoint.

I realized the conflict could be solved by data: What does an average user see on their map, and how many users fall outside the norm? Because every user has unique results, I needed to understand all the possible edge cases.

Creating a data dashboard to make an informed decision

After digging around Color’s existing databases and asking 4 different teams, I learned that the dashboard I was looking for didn’t exist. So with my background in economic research and the advice of a bioinformatics colleague, I merged datasets and made the necessary queries to get the data I needed.

I was surprised by what I saw. Turns out, certain edge cases were not a concern at all, and the edge case that would underwhelm and disappoint was no edge case at all. A heaping 25% of our users only have one ancestral region!

Of all the design solutions I prototyped, the original design was the most fitting after all. I had come full circle, but there were still many things that needed to change.

Paying attention to the details that matter

I changed some key details for better accessibility and comprehension:‍

  • ‍Contrast ratios. I crafted a color palette of 21 regional colors so that every region has a 3:1 contrast ratio with the light background as well as the dark gray map. Only the areas that intersect with land are colored so as not to obscure the shape of the geographic region. Finally, an additional black border adds to the visual contrast.
    ‍
  • Section header. Adding a section header not only allows users with screen readers to know what the percentage chart is about, but it also improves user comprehension overall.
    ‍
  • Clear association between the map and the percentage chart. I added a color code with numerical values so that even without previous knowledge, users can easily tell which region is associated with which geographic area.

Wrapping up

Outcome

  • Our product team plans to implement these changes by second quarter of 2023.
  • The data dashboard I created caught the attention of our business lead, who found the metrics to be important measures of success. Our data science team repurposed the dashboard as a guide to further the Color lab’s genetic analysis capabilities.

Takeaways

  • Data tells a story about users. It’s worth the pursuit.

    When I first learned that the data I wanted wasn’t readily available, I wondered if it was worth the effort to keep digging. If I had given up, I would never have known the true story of the product’s user experience. Staying close to the data is staying close to the user. Though counterintuitive, data is a critical piece of human-centered design.
  • Accessible design makes a better product for everyone.
    
This project started off with a focus on accessibility. My target user was the person with a screen reader or moderately low vision. However, every accessibility improvement led to a clearer, more thoughtful design for all users. Accessible design is challenging and may not seem worth the investment, but the value it brings goes far beyond the immediate target user.

Other Projects

Object-oriented UX

Streamlining operational complexity / object mapping / supply chain tool

Almanac

Product design / Startup work / Business growth

911 Dispatch

User research / rapid prototyping / design systems