top of page
Image by Sufyan

Participatory Budgeting

Online participatory budgeting tools are often hidden behind "request a demo" walls, making them inaccessible for quick exploration. To bridge this gap, I built this simplified version based on how community-led budgeting should work: straightforward, transparent, and immediate.

Participatory Budgeting

Tech Notes

Implementation Resources

​

​This Tech Memo outlines the logic behind the Participatory Budgeting tool. The goal is to provide a "zero-sum" simulation where community members must make real-world trade-offs, ensuring that every dollar allocated is accounted for before a proposal can be submitted.

​

Global Layout Specifications

​

  • Budget Tracker. Sticky (15px top offset). Keeps the "Balance Remaining" visible at all times, even while scrolling through long lists of projects.

  • Wrapper Container. Max-Width: 1200px. Provides enough horizontal space for side-by-side project details and sliders.

  • Project Rows. Two-Column Split. Uses a fractional grid (0.4fr / 0.6fr) to balance descriptive text with interactive inputs.

Module 1: The Allocation Engine

​

The heart of this tool is a custom-coded validation script that prevents submissions until the budget is perfectly balanced.

  • Interactive Sliders: Utilizes innate Wix slider components, but bypasses standard behaviors with custom Velo page code. This manages the dynamic calculation of "remaining funds" in real-time.

  • The "Zero-Sum" Gatekeeper: The Submit Your Budget button remains inactive by default. It only becomes clickable once the "Remaining Balance" reaches exactly $0$, forcing a realistic prioritization of funds.

  • Information Pop-ups: Includes a "More Info" trigger on each card, allowing for detailed project descriptions without cluttering the main simulation workspace.

Module 2: Submission & Feedback Loop

​

To ensure the process feels "live" and transparent, the data flow is designed for immediate confirmation.

  • Two-Stage Confirmation: Clicking the active submit button triggers a Confirmation Popup, giving the user one final look at their total allocation before the data is committed to the database.

  • Instant Visual Refresh: Once the data is confirmed, the application triggers a global refresh of the community results. The "Collective Budget" graphics update instantly, allowing the user to see how their individual priorities shifted the neighborhood-wide average.

Why did I build this?

"Participatory budgeting tools should be available to all communities. However, they are often hidden behind 'request a demo' walls, inaccessible for exploration. To bridge this gap, I built this tool based on how community-led budgeting should work. The technology isn't "entry-level," but it shouldn't be a black box either. We should not need a massive tech budget to empower a community."

Image by Visax

Participatory Budgeting

Key Features

Live Data Analysis

View an instant breakdown of community outcomes at the bottom of the page as soon as you interact.

Intuitive Budgeting

Real-time calculation of your remaining funds with easy-to-use sliders.

Bias Prevention
Projects are displayed in a randomized order to eliminate "top-of-the-list" selection bias.
Deep-Dive Details

Access detailed project info and printable PDFs via a one-click side panel.

Smart Controls

Quick-action "Reset" and "Max" buttons to streamline the user experience.

Final Review

A confirmation step to double-check your allocations before submitting.

bottom of page