DESIGN - BIG TICKET - CASH FLOW PAGE #333
Description
Context / Motivation
This is the largest and most important design ticket of the semester.
The Cashflow Page will allow BCAN to project its financial future, understand burn rate, model salary growth, incorporate grants, and anticipate financial risk. This is an internal tool for strategic planning and must feel powerful but approachable.
We will reference the client’s prototype here:
https://preview--nonprofit-flow-charts.lovable.app/
Feature-wise, this prototype contains everything we need. However, the layout, design system, and overall UX must align with our updated redesign. This page should feel like a natural extension of the current BCAN app, not a separate product.
This tool must be intuitive enough for older, less tech-savvy users while still being robust and flexible.
Ryan will lead this ticket. Rohan will support and collaborate.
Scope
This ticket includes full design of the Cashflow page, including layout system, interaction patterns, and all required flows.
1️⃣ Overall Page Architecture
Design a cohesive layout that includes:
- Top summary cards:
- Current Cash
- Total Revenue
- Monthly Costs
- Annual Increase Settings
- Input Panel (Revenue + Costs)
- Annual Increase Settings Panel
- 36-Month Projection Chart
- Summary Metrics below chart:
- Final Balance
- Lowest Point
- Total Revenue
- 36-Month Costs
Design must:
Follow our updated design system
Use consistent spacing, card structure, typography
Match Grant View styling
Be intuitive for older, less tech-savvy users
2️⃣ Monthly Interval System (CRITICAL)
All projections must operate in monthly intervals across 36 months.
Design must reflect:
- X-axis labeled by month (not just year)
- Monthly revenue inflow
- Monthly cost deductions
- Monthly compounding of salary + benefits increases
- Clear visual changes month-to-month
Users must clearly understand:
- When revenue hits
- When costs are applied
- When the balance changes
- Monthly modeling is non-negotiable.
3️⃣ Starting Cash Position
Include:
- Input for current cash balance
- Clear helper text
- Validation states
- Immediate chart recalculation upon update
4️⃣ Revenue Input System
Users must be able to:
- Add revenue source:
- Category
- Revenue source name
- Amount
- Installment schedule
- Date(s)
Grant Disbursement Must Support:
- Lump sum (single payment)
- Multi-year split payments
- Monthly installment payments
- Custom date-based installment entries
Editing Requirements:
- Once a revenue source is added, a new panel should appear with a list of revenue sources (per the prototype)
- Edit revenue source after creation
- Modify installment schedule
- Delete revenue source
- Changes dynamically update the projection
Future Consideration (Not Required for V1):
- Possible Google Sheets API sync
- Light anticipation of:
- “Import from Sheet” button
5️⃣ Cost Input System
Users must be able to:
- Add cost item
- Category (staff, events, taxes, etc.)
- Cost item name
- Annual amount
Client confirmed:
- It is important to modify cost items after upload.
Design must include:
-
- Once a cost item is added, a new panel should appear with a list of cost items (reference the prototype for more clarity)
- Edit flow
- Delete flow
- Clear recalculation behavior
- Visual confirmation of updates
6️⃣ Staff Compensation Modeling
Cashflow must clearly answer:
- How much are we paying staff?
- How does this change over time?
- Is there an annual refresh in salary and benefits?
Include:
- Personnel Salary Increase (%)
- Personnel Benefits Increase (%)
- Clear indication that increases compound annually
- Monthly impact visualized in chart
This must feel intuitive — not mathematically overwhelming.
7️⃣ 36-Month Interactive Projection Chart
The core visual component.
Must include:
- 36 monthly data points
- Distinct color coding:
- Net Cash (primary line)
- Revenue (green)
- Costs (orange/red)
- Hover state displaying:
- Month
- Cash Balance
- Revenue (that month)
- Costs (that month)
- Clear visual indicator if balance drops below zero
Chart must:
- Be digestible at a glance
- Not overwhelm users
- Align with BCAN design system
8️⃣ Summary Metrics (Below Chart)
Include:
- Final Balance
- Lowest Point
- Total Revenue (36 months)
- 36-Month Total Costs
These must:
- Update dynamically
- Use color intentionally
- Clearly communicate risk scenarios
9️⃣ Forward-Looking Only
This tool is projection-based.
Design should:
- Make it clear this is modeling the future
- Not include historical accounting
- Allow users to easily adjust and model scenarios
Consider:
- Reset projection option
- Clear recalculation behavior
🔟 Optional / Future Features (Not Required for V1)
- Export as CSV
- Export as PDF
Client expressed interest but this is not required now.
Acceptance Criteria
- Fully designed hi-fi Cashflow page
- Monthly interval logic clearly represented
- Lump sum + multi-year grant disbursement flows supported
- Revenue and cost items are editable after creation
- Staff salary growth modeling included
- Interactive monthly chart states defined
- Summary metrics dynamic and visually clear
- All client-requested features from prototype included
- Layout aligned with updated BCAN design system
- Empty states and error states defined
References
Client Prototype (Feature Reference Only):
https://preview--nonprofit-flow-charts.lovable.app/
Client Meeting Notes:
- Monthly intervals required
- Editable cost items
- Grant disbursement logic clarified
- Interest in Google Sheet API integration
- Interest in export feature
- Current BCAN Redesign System (Grant View reference)