Case Study

Non Profit Funding Tool

Helping nonprofits understand funding concentration and plan a more diversified mix.

Independent product — designed and developed by me.

Non Profit Funding Tool mockup on a desktop monitor showing a step-by-step funding entry form

Overview

Non Profit Funding Tool is an independent product designed and developed to help nonprofit leaders understand how concentrated their funding is and plan a more diversified future mix. The application guides users through a four-step flow: enter current funding sources, review the current mix, set target allocations, and compare results with planning prompts for team conversations. All data stays on the user's device.

The problem

Nonprofit teams often lack a simple, structured way to see how dependent they are on a few funding sources or categories. Spreadsheets can capture the numbers, but they rarely make concentration risks easy to discuss or help teams model what a healthier future mix could look like.

My role

Key decisions

  • Built a guided four-step wizard so users could move from data entry to planning without getting lost.
  • Kept all data in local storage with clear privacy messaging instead of sending information to a server.
  • Used custom accessible chart patterns rather than a heavy charting library for donut and comparison views.
  • Separated funding calculations and validation into testable utility modules.
  • Added concentration warnings, export options, and planning prompts to support real team conversations.

Technical approach

The tool is built with React and Vite as a client-only application. A single state model tracks organization details, funding sources, and future target allocations, with changes persisted to localStorage. Pure utility functions handle funding math, validation, and chart segment generation, while custom visualizations and form components keep the experience lightweight and deployable as a static site.

Accessibility considerations

The interface uses live regions for dynamic validation and status updates, associated labels and error messaging on form fields, keyboard-friendly navigation between steps, and descriptive labels on chart visualizations. Focus management moves users to the first invalid field when a step fails validation, and print-friendly results support sharing outside the browser.

Outcome

The tool gives nonprofit leaders a practical way to visualize current funding concentration, define a target mix, and compare the gap between where they are and where they want to be. Export and print support make it easier to bring the results into planning conversations.

What I learned

Tools like this work best when they respect privacy and reduce setup friction. Keeping everything client-side made the product easier to trust, while a step-by-step flow helped users who are not finance specialists still reach useful insights.

Technology stack

  • React
  • JavaScript
  • SCSS
  • Bootstrap
  • Local Storage
  • Accessible Data Visualization