Demographic Data Visualizations
Using data visualizations to drive nonprofit giving
ROLE + YEAR
Product Designer, 2023
PROBLEM SPACE
Data silos: Nonprofit data stuck in Candid’s platform, hard to integrate into workflows.
Manual intake: Time-consuming imports slowed productivity.
Fragmented experience: Disjointed workflow created friction and churn risk.
User Experience Gaps
Annually, grantmakers within Fluxx distribute ~$1B to nonprofits, often guided by DEI goals. However, our users’ ability to make data-informed decisions was limited by disconnected tools and inconsistent data practices.
Through user research spanning program officers, grants managers, and site admins, three core challenges emerged:
Manual workflows: Funders repeatedly requested and re-entered demographic data for every applicant. A time-consuming process that was often outdated the moment it was captured.
Inconsistent data formats: Submissions varied across organizations, complicating comparison and analysis even for advanced users.
Limited insight generation: Non-technical users struggled to interpret raw data, while experienced analysts were frustrated by the lack of integrated analytics or export flexibility.
While Candid’s internal platform began to standardize nonprofit data, funders still had to step outside their core Fluxx workflow to view and analyze it. This revealed a clear design opportunity: integrate standardized demographic data directly into Fluxx, empowering users of all data literacy levels to act on insights without leaving their ecosystem.
Mapping the API
After research, I partnered with engineering to break down Candid’s Demographics API—focusing on what data could be surfaced directly in Fluxx. The API delivered standardized nonprofit demographic data on leadership, staff, and boards, including race/ethnicity, gender identity, sexual orientation, disability status, and data completeness percentages.
Together, we:
Mapped API endpoints to user needs, identifying which demographic fields could power in-app benchmarking and portfolio summaries.
Defined aggregation logic for visualizations, ensuring raw values rolled up accurately into percentages for charts and tables.
Prototyped visualization patterns (stacked bars, comparative breakdowns) aligned with the structure of incoming data.
Validated edge cases early, such as missing or incomplete data, to ensure the UI rendered accurately across all scenarios.
This close design–engineering alignment cut iteration time by ~30% and accelerated prototyping by two weeks, allowing us to deliver a technically sound, insight-driven experience.
Turning Constraints Into Design Opportunities
Navigating Design Constraints
The visualization needed to fit within Fluxx’s record view, tall but narrow, and with limited horizontal space. This shifted the challenge from what to show to how to show it clearly.
Key takeaways:
Spatial limitations: Limited width required a careful visual hierarchy and compact component design.
User needs: Users needed to interpret demographic data quickly, without losing trust in accuracy.
Technical constraints: The Candid Demographics API surfaced standardized but fixed data (e.g., race/ethnicity, gender, orientation, disability, and completeness scores), defining what could be visualized.
Iterative Exploration
Another designer and I explored multiple visualization styles. From tables to interpretive charts, testing for clarity and usability.
What we learned:
Designed for a wide range of data fluency. From non-technical users seeking simple, easy-to-scan visuals to more technical users needing consistency and depth.
Labels and percentages were essential for trust and data accuracy.
We refined designs, finally landing on a stacked bar-chart visualization optimized for quick scanning and data integrity.
Fast feedback loops with users and engineers kept iterations feasible and focused.
We continued to work towards a final direction to ensure constraints were not blockers and met users where they were in their data literacy.
Designing for Accessibility
Accessibility shaped every design decision. Because it’s often missing from data visualization practices, I advocated for the time and focus needed to make these charts fully compliant and inclusive for all users.
My work on defining accessible colorways for data visualizations was especially impactful. By testing palettes across multiple types of color blindness and validating contrast against WCAG guidelines, we ensured that the charts were not only visually clear but also universally interpretable.
This investment paid off: the final visualizations reduced the likelihood of accessibility-related support issues and set a new design standard for accessible data visualization within the Fluxx product.
Final Design + Outcomes
The final designs introduced data visualization into Fluxx for the first time, making complex information both accessible and actionable.
Key outcomes included:
Engineering alignment early: Ensured feasibility while uncovering opportunities for design innovation.
Designing within constraints: Transformed limited horizontal space into clear, scannable charts that emphasized labels and percentages.
Accessibility-first approach: Tested colorways across multiple forms of color blindness and validated contrast to meet WCAG standards.
Future-ready framework: Established design patterns that could scale to future visualization features.
Impact on adoption: Improved usability, increased engagement, and raised the overall standard of the product experience.
This project demonstrated how aligning technical discovery, thoughtful design, and accessibility can accelerate delivery while raising the bar for user experience across the platform.
Read about this project on Fluxx’s Blog
