Accessible Data Visualizations to Break Usability Barriers

“Many organizations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.”

Paul Smyth, Head of Digital Accessibility, Barclays

Accessible design improves overall user experience and satisfaction, especially in a variety of situations, across different devices, and for older users and users with varied capabilities. It helps drive innovation by solving unanticipated problems, enhances the brand value of the business, and expands its market reach.

Background

Our client is a US-based company providing clinical molecular diagnostic solutions that provide fast and accurate results. It is a leader in infectious disease diagnostics, empowering healthcare professionals to make better diagnostic decisions and lower healthcare costs.

Their data-driven environment relies heavily on well-designed, powerful solutions to analyze, store, and safely manage data. This overwhelming quantity of data requires adept management solutions, allowing users to make the right analysis and interpretations and detect anomalies in record time with a minimal rate of errors. 

A reactive approach in such an environment can cause irreversible damage; they have to be proactive in eliminating problems before they appear. A well-designed and user-friendly analytics tool that interfaces with diagnostics instruments minimizes the risk of human errors and improves data circulation. 

Objectives

1. Help Lab Managers maintain a birds-eye view on lab operations. Clearly recognize and address red flags or items that require their attention.
2. Allow them to easily derive trends and forecasts to optimize processes and utilization of resources within a lab.

Problem Statement

The initial UX Audit revealed that a few users had trouble discerning the color blocks in the bar graphs. From a design standpoint, relying on color alone for readability and affordance (possible actions that the user can take) was making it difficult for users who were color blind.

Color differences are absolutely vital in data visualization i.e., graphs and pie charts.

Ideation 

Worldwide, there are approximately 300 million people with color blindness, almost the same number of people as the entire population of the USA. Source

Most color-blind people experience difficulties that can affect them in the workplace. Many have problems in fully accessing information from all kinds of everyday workplace sources including the internet, documents, and presentations, photographs, maps, charts, and diagrams.

With this into consideration, we explored UI options to present the data and see how it could be made flexible enough to accommodate users with varying levels of capabilities. We built a few options along with some variations and tested them with users to learn how the new solution faired. The new solution complied with WCAG standards and conformed to WAGC 2.0 level AA. This ensured that the system was Perceivable, Operable, Understandable, and Robust as mandated. 

These iterations were tested with users to study if the new analytics were processable and were actually helping the users make decisions on the go.

DIRECTION A 

1A. Invalid Rates – Failed Runs

2A. Utilization

DIRECTION B 

1B. Failed Runs by Users

2B. Utilization

Validation and Iteration

We iterated and finalized a direction after UT sessions with users and reviews with Subject Matter Experts and Internal Stakeholders. Based on the learnings, we recommended creating an ‘Accessibility mode’ for color-blind users using the following design alternatives –

• Patterns and textures to make it easy to differentiate different segments.
• Adding text labels to segments wherever required to make them even easier to understand.
• Simplified visualization to reduce the cognitive load and improve decision-making.
• Alternative visualization for each metric, to help interpret the same data in different ways (eg. line chart, stack chart, and pareto).

Design

Accessibility mode

Normal mode