Data Visualization

UX Design. UX Research.
  • ClientCenters for Disease Control
    @Northrop Grumman
  • RoleCo-Designer & Researcher
  • ToolsAxure, Adobe, HTML&CSS
The Centers for Disease Control and Prevention monitors health through a variety of health surveillance programs. The Active Bacterial Core Surveillance program is one such example. Each year, this program consolidates data collected across the US into a lonely, static report. So, our mission was simple—create a new data visualization system that combines data from 5 bacteria over 10+ years.
DISCOVERY

Why are we building this?

We are visual creatures. Visuals support comprehension, encourage more thoughtful questions, and enhance ability to recognize patterns. We needed to better understand what we were visualizing and why. Partnering up with stakeholders, we worked through the why.

Answer important health questions

Did we meet our health goals? Is the rate of cases or deaths increasing or decreasing? How effective are antibiotics? What are the risk factors? What is the serotype make-up?

Ask and answer more insightful questions

How effective is this vaccine? Did the new policy decrease the number of cases? How do we improve? Are there other ways we should be looking at the data?

Improve how data is shared

Surveillance programs and fellow researchers can enrich analysis, especially when combining with their own data. Accessibility and time are essential factors.

AUDIENCES

Who are we building for?

Then, we outlined core audiences. The traditional persona document wasn’t exactly the right fit for our team. We needed to outline the audience familiarity with data, level of expertise with the data, what the audience would be looking for, and what the stakeholders wanted to share with them.

DEFINE

What is our vision?

We completed a competitive analysis and literature review. We needed to educate ourselves on the dos and don’ts for visualizations, how others tackled it, and what our vision would be.  From the business goals and these findings, 6 core principles emerged.

Big visuals.
The data is the focus.
Promote exploration.
Reduce number of options.
Leave room to grow.
Easy to update.
Wireframes and prototyping

Iterate. Rapidly.

We got straight into wireframing and prototyping. That way, we could share the concept at the next stakeholder meeting in a few weeks. Plus it set us up to test early with potential users while get things to development quickly.

Lay Foundation

How will users move between the data?

How do we support exploration and discovery of the data, while maintaining flexibility? We explored 3 main ideas – step by step, top-level controls, and left sidebar controls. Left sidebar offered the most flexibility. This was an important factor. We didn’t know what other bacteria might be added. Long-term, we wanted to be able to support additional graphs for the same data. For example, a map view to see the data by state.

Step by Step

Pros

  • Supports users that aren’t as familiar with the dataset

Cons

  • Requires work to see the first bit of data
  • Restricts movement between the datasets
Top-Level

Pros

  • Bigger graphs

Cons

  • Not flexible as new filters or additional graphs are added
  • Confusing interaction as options  appear and disappear based on bacteria or topic selection
Left Sidebar

Pros

  • Flexible to add new options or additional visuals
  • Similar pattern to ecommerce filter placement, so how the filters change might be more expected

Cons

  • Smaller graphs
Exploring Data

What controls are needed?

To figure out what types of filtering controls we needed, we needed to better understand the data sets. How are they the same? How did they differ? We mapped out the different graphs by bacteria using dots to identify unique items. This helped us align.

On the one hand, we wanted to showcase options. On the other we wanted easy controls that could grow. Dropdowns worked best across bacteria, because they left room to grow, reduced choices, and simplified development. 

Visualize Data

What makes a good graph?

Who doesn’t like a good pie or donut?  There are tradeoffs for each kind of graph and how well it represents what you are trying to to do. Focus on the data was important. I took to the jQPlot sample library to clean up the graphs to have the focus on the data itself.

Before
After
Usability Testing

Getting in front of users

Armed with Axure prototype concepts, I drafted the research plan and moderator script. Every plan needs good research questions. We wanted to know:

  • Do users understand what is presented to them?
  • What types of questions do they want to answer?
  • What is the expected behavior when changing filters?
  • What opportunities do we have for improvement?

Based on our goals, I combined exploratory time and task-based scenarios to see what was working, what wasn’t, and missed opportunities. We conducted 2 rounds of remote, moderated testing through Skype. Each round had 5 participants with a mix of backgrounds – mostly scientists, some health professionals, and some communications specialists.

Insights

Iterate and backlog

I used affinity diagramming to find patterns and themes. Then, explored and prioritized what we could do now and what needed to wait. Some things were easy to update, like removing the button to change bacteria. Others definitely fell into the “great idea but nice to have” area, like exporting an image of the graph with citation.

Anticipate Intent

When asked to find data for a specific year, participants changed the year field and immediately notice the single year checkbox. Then had to reselect the year. The solution we had wasn’t the most elegant, but the dropdowns and checkbox prevented errors. We recommended that when changing to a single year, the single year selected should be the year already selected. That way, potential users wouldn’t have to reselect if this happened to them.

Words Mattered

Jargon is hard to get away from, especially when you mix Government, Science, and Health. It’s a constant battle. Too familiar of language, experts question accuracy. For example, Antimicrobial differs from Antibiotic. Antimicrobial encompasses all microorganisms, while antibiotic is a subset specific to bacteria. However, too unclear or commonly accepted, even the experts want it changed. For example, Antimicrobial Susceptibility was renamed to Antibiotic Resistance.

Legend Placement

Users struggled associating data to the legend when it’s on the left side bar. It’s even more apparent with more than 3-5 series. Moving the legend to the top of the graph would improve these associations.

Opposite Intents

The interactive legends of data visualization tools conflict with intent. Users thought “I’m interested in X” versus “I want to hide X.” While they figured it out, removing this friction would improve experiences with visualization tools.

Mouse Dexterity

When lines overlapped, it was hard to move the mouse in the right position. Combining all series and data values into one tooltip would ease the level effort on the user. Or even, using small multiples would be better.

What About?

Participants wanted to see more actionable insights or interpretations of what they were looking at. Long-term, this would be key for your average public and advancing public health knowledge.

Live site

3,2,1…Launch

The fruits of our labor are finally realized. Bact Facts Interactive launched in 2017.

View Live