How We Built Data Visualization Best Practices Into Resilia’s Platform
by Rebecca Larson, Senior Product Designer @ Resilia. Data capture and visualization is an essential part of a nonprofit’s work, but most nonprofit staff don’t have time or resources to become data experts. Recognizing this, Resilia’s R&D team worked to bake data visualization best practices into our platform so our users can spend less time worrying about data and more time making an impact.
Why it’s important
Nonprofits need to track quantitative data for a variety of purposes. In our research, we found that nonprofits use quantitative insights to assess their impact and development of programs, document certain metrics for grant reports, and show impact that inspires community support and funding.
Despite recognizing its benefit, we kept hearing from users that the actual process of collecting and visualizing data is overwhelming. When faced with a lot of potential data to gather and no central tool to capture the data, we discovered that nonprofits often find themselves either not knowing where to start in capturing data or are collecting all data possible in unorganized systems.
From our research, we realized there was an opportunity to build a tool that made it easy for our users to capture intentional data, organized into goals to help them track and communicate impact.
What makes a good data capture tool
I began this project with focus on making it easy for users to add data. A data capture and measurement tool should be built upon a framework with data organization and best practices built in. One of the biggest challenges is setting up a meaningful structure in which to collect data. Our team found that the following hierarchy resonated with our users:
- Establish a mission
- Create initiatives to support that mission
- Set up measurable goals to show progress on that initiative
Since the data is collected at the goal level, I prioritized building a guided experience in which to create goals. I needed to validate that we were using language that resonated with our users, so the team conducted research with internal subject matter experts, got feedback from users, and set up usability tests to iteratively produce this goal creation form. My aim was to break down goal creation into easy-to-follow focused questions with embedded definitions for additional clarity.
During the ideation phase, the team pushed ourselves to come up with ways to make this data capture even easier to understand by clearly integrating it into the system hierarchy. We came up with an idea to achieve this — we would position the form in a side panel on the page and as a user fills out each input, the graph to the left would update to show the user exactly where that information will live. As implementing this idea required more engineering effort, I conducted an A/B test to see if there was a significant improvement in user understanding before building this feature.
The results were conclusive — I found that users looked from the form to the chart while filling in input and had a greater understanding of the purpose of the form. The dynamically updating chart helped users make the visual connection between the form and the chart, explaining each element as it became relevant in digestible pieces.
The dynamically updating chart helped users make the visual connection between the form and the chart, explaining each element as it became relevant in digestible pieces.
Best practices built in
With the design for our user input completed, I turned my focus to ensuring that we had data visualization best practices built into the tool. The two principles I prioritized were making our charts accurate and accessible.
Accuracy
In designing the line charts for this tool, it was important to make sure the charts represent data in an accurate and truthful manner:
The Best Practice: Only data points that have been entered are shown on the chart.
The Why: We don’t want to imply there is data where there isn’t.
The Best Practice: Lines connecting each data point on the chart are not artificially smoothed.
The Why: Artificially smoothing lines inaccurately implies a trend.
The Best Practice: All y-axes start at 0.
The Why: Show an accurate comparison between values.
The Best Practice: A y-axis only has 1 measure.
The Why: If more than 1 measure is displayed on the same chart’s y-axis, the data ends up being re-scaled in artificial ways and may imply correlation where there is none.
Accessibility
We also wanted to make sure all graphs are accessible and readable to every user, and clearly convey their meaning in the first 5 seconds.
Color
One of the most complex aspects of maintaining accessibility in charting was with establishing our data visualization color library. Our charts can display more than one categorical variable to help our users get nuanced insight in their program evaluations. For example, if we’re tracking attendance of an elementary school program, we might want to segment our attendance data by grade to see which grades have higher or lower attendance. Each grade is a dimension of our full dataset. Since one chart can display multiple dimensions, we needed our color palette to have visually equidistant colors. This means that any person, with any type of color blindness, can distinguish each color from another — important when it comes to comparing categorical lines on a chart.
To accomplish this goal, I began by learning about how to use color theory to create a visually equidistant palette that works with different types of color blindness. Colors are represented by their hue, saturation, and lightness. For users to be able to distinguish colors, a palette needs a wide variety of hues. You can then play with the saturation and lightness to ensure that together, the palette continues to be distinguishable across each type of color blindness. To test this, I used the Coolers tool until I reached a palette that worked for all vision types.
After many iterations, I arrived at the below categorical color library for our data visualizations:
Once establishing the color library, we had to establish rules about how to best use color in our charts.
The Best Practice: One chart should not have more than 6 different colors plotted.
The Why: More than 6 categorical colors on one chart makes the chart too difficult to read and process. Once a chart becomes unreadable, it loses its purpose.
To ensure charts stay readable, it’s important to remember the following rule:
The more you emphasize different things, the less that emphasis counts. The more you emphasize a single thing, the more that emphasis counts.
In research, I found that limiting the number of dimensions shown on one chart is a standard data visualization best practice, as used by Google, Chartio, Infogram, FusionCharts, and more. If our users need to use more than 6 dimensions, it’s best practice to try grouping larger categories or using multiple graphs with a narrower focus.
These best practices are built in to the goal creation form:
Labeling
In addition to color, it’s important to ensure variables always have a secondary label to ensure accessibility to the vision impaired.
Our tooltip and legend includes both a color and text label:
Conclusion
Throughout this journey, we worked to make Resilia’s charting tools accessible to our users — from goal creation to readability of the final charts. We learned how to better use language, present information, and maintain accessibility so our nonprofits users can more smoothly track impact and grow their organization. We are collecting feedback from users to iterate on this tool. As we expand its capabilities, we are focused on continually building in data visualization best practices to our users’ data processes to empower nonprofits to easily capture and share their impact.
Stay tuned for our upcoming blog post from our internal data analyst expert, Hayden, on how he is incorporating data visualization best practices into our internal data!
