Case Study

Demographics Reporting

UX / Data Visualization / Accessibility / Front-End

Fluxx is an industry-leading cloud platform for grants management, used by dozens of the world’s most well-known foundations and charitable nonprofits. As lead product designer, I designed a new component to help funders analyze the demographic makeup of grantee organizations in order to hit institutional goals.

Problem: Granting foundations need a way to integrate demographic data into their decision-making process in choosing grantee organizations

Goal: An easy-to-scan interface that presents demographic info in an unbiased way

Team: Myself and 1 other designer, 1 product manager, 1 engineer


Timeline: 3 months

Background

In 2023, Fluxx was approached by longtime partner Candid with the opportunity to integrate self-reported demographic data from potential grantees, enabling clients to make more informed decisions around giving, and to hit institutional goals for supporting under-represented groups. The data delivered by Candid is fairly fixed, but determining how it should be "reported" to grant-makers was an opportunity to differentiate.

Process

From the beginning of the project, it was obvious that charts would be a natural fit for making data scannable, accessible, and useful. However, the sensitive context of the data collected (categorizing people by their race, ethnicity, sexual orientation, etc) and a non-negotiable minimum of WCAG 2.2 AA compliance made this specific use case especially challenging.

Candid demographics default visualization
An example nonprofit demographic profile as presented on Candid.org

Much of the data delivered by Candid is simply counts of employees at a specific nonprofit by demographic category, like Race & Ethnicity, Gender Identity, Disability Status etc. Visualizing this kind of categorical data is relatively simple, but starting with a critique of Candid’s own internal charts, a few challenges presented themselves:

One of the biggest, and most potentially fraught decisions in building out our data visualizations was picking appropriate colors. After lots of competitive research in the space, my design partner and I came to the conclusion that The vast majority of data visualizations on the web do not take color seriously. Accessibility, legibility, and actionability are often thrown out the window for harmonious or “eye-catching” palettes, even in industry-leading products.

We set out to select 10 categorical colors that were:

  • Fluxx UI color palette
  • Fluxx UI color palette with duplicate colors removed
  • Fluxx UI color palette with non-accessible colors removed
  • Final acceptable color palette
  • Color palette filtered for various color-blindness conditions

Solution & Further Considerations

The shipped solution delivered approachable visualizations with one-click access to the underlying data, encoded with comfortably spaced, easily distinguishable stacked bars. Hover states for both the charts and the tables highlight specific segments for legibility. Conditionally styled inline micro-charts in the data table make it easy to determine the biggest segment in each category in cases where the stacked bars might be ambiguous.

  • Final visualization
  • Final visualization with individual data point hovered

This version is now live inside Fluxx's Grantmaker platform, used by hundreds of nonprofits on a daily basis. Read more about the feature on Fluxx's blog →

While the delivered component is very useful for reviewing grantee organizations one-by-one, the real power in this kind of data comes from aggregation and automation. Executives want to know not just the composition of a single nonprofit, but how the demographics of their entire giving portfolio stack up. Fluxx plans to build out more robust reporting infrastructure to support these use cases in the future.