MG Foundation
A bilingual welfare app that proves every rupee moved, without ever exposing who received help.
- Role
- Product designer. Built the app with AI as my engineering pair
- Timeline
- Aug to Sep 2026, spec to a hardened app
- Team
- Solo designer, with Claude Code as the engineer
- Platform
- Android and iOS, English and Urdu
- Tools
- Figma, Claude Code
My contribution2 roles, 27 app routes, 24 designed screens
MG Foundation
MG Foundation is a mobile app for a volunteer-run welfare foundation in a Pakistani city. Around 200 residents give every month for ration, education, health, funerals and city works. The committee records every rupee in one shared ledger and publishes a dated monthly position. Contributors see where money went and their own giving. The people who receive help are never named outside the committee.
A city's giving, kept in notebooks and WhatsApp
Contributions, spending and balances lived across several collectors' notebooks and a committee WhatsApp group. Writing on paper was fast. Answering a question was not.
One ledger, two views, one monthly close
Four connected areas replace the notebooks. Every figure on screen names its fund, and nothing becomes public until a named person publishes the month.
Prove the money moved, without revealing who received it.
A month from spec to a hardened app
Design and build ran together. The spec and Figma file set the target; a real phone decided what shipped. Every round started from feedback on the device.
A designer with an AI engineering pair
72commits co-authored with Claude Code, Aug to Sep 2026
Me, the designer
- Wrote the spec and set the constraints
- Designed every screen in Figma
- Tested each round on a real Android phone
- Caught layout shift, clipped Urdu, raw ids
- Decided what shipped and what didn't
Claude Code, the engineer
- Wrote the app, rules and data migrations
- Ran typechecks and rules compiles
- Fixed what I found on the device
- Flagged security holes before deploy
- Explained trade-offs so I could choose
AI wrote the code. Every decision, and every bug it missed, came from testing on the phone.
Rules of the room that shaped every screen
Some came from the brief, some from money, some from faith. Each one got a design response, not a workaround.
Dependencies frozen
package.json could not change.
17 components hand-built on the installed stack. No UI library added.
No paid Firebase
No Cloud Functions, no SMS codes.
The committee approves new sign-ups. Rules check every published figure.
Recipients stay private
A name on the public app is harm.
People we help live in an admin-only collection the database won't serve.
Zakat is restricted
It may only reach eligible people.
A fund note on every spend, and Zakat published as one total.
Urdu readers first
Nastaliq clips at Latin line heights.
Its own Urdu type ramp, full right-to-left layout, names transliterated.
Colour is never alone
Fund hues must survive colour blindness.
Every fund carries a hue, an icon, a label and a fixed position.
No silent corrections
A changed figure erodes trust.
The first amount stays, with who, when and why, marked Corrected.
Paper is faster
A form has to beat a notebook.
One-screen add entry, recent contributor chips, saves that queue offline.
Three people, one shared worry
Role archetypes drawn from the brief, not from interviews: the committee who records, the residents who give, and the families who must never be named.
The committee treasurer
Admin · one of five committee members
Records every dayPublishes monthly
“When someone asks what's left, I want the answer in seconds, not three phone calls.”Goals
- One total everyone agrees on
- Close the month without arguing from memory
- Totals split across notebooks
- Being questioned with nothing to point at
Live balances per fund, and one clear publish step
The contributor
Normal user · one of about 200 residents
Gives monthlyReads Urdu
“I give because I know the committee. I'd like to see where it went.”Goals
- See where the money went
- Know my own giving was recorded
- Hearing figures second-hand
- Long forms and passwords
Published figures in Urdu, and my own contributions
The person we help
Never signs in · kept by the committee
Ration, health, funeralsPrivate
“Nobody on my street should know we took ration.”Goals
- Help arrives on time
- Dignity kept
- Being identified by a public figure
- Explaining their situation twice
Nothing on any screen. Only a category total goes public
Nobody asked for faster data entry. They asked for trust that doesn't depend on one person.
A warm ledger that stays calm about money
Warm neutrals keep long reading easy. Muted teal marks the one thing to act on. Five fund colours were checked under protanopia and deuteranopia, and every one ships with an icon and a word.
Status: always colour, dot and word
What changed for the committee and the city
The app hasn't lived through a full Ramadan yet, so these aren't usage numbers. They are shifts built into the product, and each one can be checked.
Checked on the device, in both languages
Every round ended with a typecheck, and with a compile before any rules deploy. This is what the checks found, including what failed the first time.
- TypeScript typecheck, whole app0 errors
- Security rules compile, then deployReleased
- Text keys match across languages557 of 557
- Phone numbers moved to +92 format4 records, 3 users
- Urdu names backfilled8 records, 3 users
- Security holes found before deploy3 closed
Built for one hand and a busy street
Large amounts, 48-point tap targets and nothing hidden behind a long press. Every screen names its fund, and Urdu mirrors the whole layout rather than swapping words.
Recording and closing the month
Seeing where the money went
Getting in, and getting answers out
A committee treasurer through one month
Following one month of money, from collection on the street to a question in the WhatsApp group after the figures go public.
Takes cash, bank and wallet payments across the week
Adds each one: amount, fund and who gave it
Scans Records by fund and fixes a wrong amount
Reviews per-fund totals, then publishes the month
Answers “where did my money go?” in the group
Two apps in one, split by role at the door
One sign-in flow routes people to the committee or the contributor view. The same components work at different scopes, and every navigating control carries a visible label.
- Language
- Phone number
- Password
- Sign up
- Waits for committee approval
- Home
- Records
- Entry details
- Add entry
- Choose or add a person
- People
- Contributors
- People we help
- Committee
- Profile
- Make a report
- Publish the month
- Channels and funds
- App users and roles
- Home
- Where to contribute
- My contributions
- Contribution detail
- Profile
- About
- Committee
- Published records
Who sees what
The scope changes; the components don't.
| Capability | Committee admin | Approved contributor | Waiting for approval | Guest |
|---|---|---|---|---|
| Live fund balances | All funds | Not shown | Not shown | Not shown |
| Published figures | All funds | Public funds | Public funds | Public funds |
| Contributions | Every entry | Own only | After approval | Not shown |
| People we help | Admin only | Not shown | Not shown | Not shown |
| Publish the month | Named sign-off | Not shown | Not shown | Not shown |
| App users and roles | Approve, disable | Not shown | Not shown | Not shown |
Redrawn in pencil to argue about the model
Lo-fi redraws of shipped screens, used to explain the decisions behind them rather than to fake an early sketching phase.
Argue about the model, not the colours
One token set, 17 components, two languages
Hand-built from the spec on the stack the app already had. The same components serve the committee and contributors; only the scope changes.
What the components carry
What this project taught me
Six lessons I now carry into any product that handles other people's money.
How we'll know it worked
Downloads and daily actives don't fit a 200-person foundation. Targets are set per promise instead, and checked at every monthly close.
Can anyone on the committee answer “what's left in Zakat?” in seconds, without phoning anyone?
- Figure questions the app can answerTarget: all of them
- Disputes settled by pointing at RecordsTarget: all of them
- Corrections without a written reasonTarget: zero
- Time to answer “what's left in a fund?”Target: under 10 seconds
- Days from month end to publishTarget: under 7
- Entries recorded the same dayTarget: most
- Beneficiary names the public app can readTarget: zero
- Categories published under 3 peopleTarget: zero
- Zakat spend split by categoryTarget: never
- Strings missing an Urdu versionTarget: zero
- Status shown by colour aloneTarget: zero
- Typecheck errors in a releaseTarget: zero
Names and amounts in the screens are sample data. The foundation, its rules and its privacy model are real.