Fund for Charity

A giving platform designed as three environments, each prototyped in Figma first.

The brief

Orphanages in Nigeria are hard for donors to find, and there has been no trusted way to give to them. The brief was a directory of verified orphanages that donors in the UK and elsewhere can give to directly.

One orphanage's page, with a fictional name: its introduction, the number of children in its care and the donation panel with preset amounts — Giving to one orphanageScreenshot, demo data, names and photos replaced2026

The orphanage page with measurements laid over it: type sizes, radii, a gap and colour swatches — Giving to one orphanageScreenshot, demo data, names and photos replaced2026

Who it is for

Three kinds of people, each with an environment of their own: donors on the public platform, orphanage administrators on their dashboard, and the platform's administrators on the internal admin system.

Browsing verified homes: location filters and a grid of orphanage cards with fictional names, each with a Donate button — The donor platformScreenshot, demo data, names and photos replaced2026

The browse page with measurements laid over it: type sizes, the card radius and size, the gap between cards and colour swatches — The donor platformScreenshot, demo data, names and photos replaced2026

An orphanage's own dashboard: totals, a chart of donations over six months and recent donations. Its name and the user's name are covered. — The orphanage dashboardScreenshot, demo data, names covered2026

The admin system's platform overview: finances in pounds, counts of orphanages, donors and children supported, recent transactions and recent orphanages, with the orphanages' names covered — The admin systemScreenshot, demo data, names covered2026

Decisions

Design came first. Every environment was a Figma prototype, validated end to end, and its components were designed in Figma before development started.

I designed the brand identity.

Each kind of user signs in to their own side, with Google or Apple sign-in as an option.

I built a first interface, then tore it apart completely. I rebuilt it with a more premium feel, and with far more thought for the experience of using it.

Choosing an amount to give: switching from pounds to naira and picking a preset, with the fees and the estimate that reaches the orphanage updating — Choosing an amountScreen recording, demo data2026

A sheet of the platform's components, rendered from its tokens: buttons, amount presets, the currency switch, the three-step progress, status badges, a field and a donation summary — ComponentsRendered from the platform's tokens2026

The brand identityBrand board, composed from the logo and the platform's colours and type2026

Flows

GiveThe donor gives once, through Flutterwave.
SplitAt the same moment, the donation splits in two.
OrphanageIts share settles in the verified orphanage's subaccount in Nigeria.
PlatformIts commission settles in the UK, in the other currency.

One donation, splitDiagram, built in code2026

VerifiedThe orphanage is checked on the ground in Nigeria.
ListedIt appears in the directory of verified orphanages.
Runs its sideIt manages its place on the platform from its own dashboard.

Joining the directoryDiagram, built in code2026

Screens

The payment step, switching between card, transfer and bank, with the fee shown before paying — Card, transfer or bankScreen recording, demo data2026

A donor's dashboard: totals given in pounds and naira, orphanages supported, donations made and recent activity, with the donor's name and the photos covered — The donor's dashboardScreenshot, demo data, name and photos covered2026

The transparency page: its heading and the two legal entities, with registration numbers and contact details removed — Fees and entities, publishedScreenshot, demo data, numbers removed2026

The transparency page with measurements laid over it: type sizes, the card radius and padding, a gap and colour swatches — Fees and entities, publishedScreenshot, demo data, numbers removed2026

How it works: the three steps, with the first, finding a verified home, beside what it means for a donor — How it worksScreenshot2026

How it works with measurements laid over it: type sizes, a gap, the callout's radius and colour swatches — How it worksScreenshot2026

The home page on a phone: the heading, the introduction and Donate Now — The home page on a phoneScreenshot, photos replaced2026

The home page on a phone, with its measurements in the margins: type sizes, spacing, the button size and radius and colour swatches — The home page on a phoneScreenshot, photos replaced2026

An orphanage's page on a phone, with a fictional name, and Donate Now fixed at the foot of the screen — An orphanage on a phoneScreenshot, demo data, names and photos replaced2026

The orphanage page on a phone, with its measurements in the margins: type sizes, a radius, a gap, the button size and colour swatches — An orphanage on a phoneScreenshot, demo data, names and photos replaced2026

Where it stands

Built and ready.

Environments, each prototyped in Figma first: 3
User types, each with its own access: 3
Currencies settled from one donation: 2

Tokens

Read from the code I wrote.

primary: #2E7D32, oklch(0.523 0.135 144.2)
dark-grey-green: #1A2E1A, oklch(0.278 0.045 144.3)
sage: #A5D6A7, oklch(0.829 0.083 145.8)
soft-mint: #DEEFDA, oklch(0.934 0.033 139.7)
amber: #E8BC8A, oklch(0.823 0.083 69.9)
white: #FFFFFF, oklch(1 0 0)
black: #000000, oklch(0 0 0)
grid gap 28: 28px (1.75rem)
radius 12: 12px (0.75rem)
radius 24: 24px (1.5rem)
heading: Satoshi, sans-serif
paragraph: Inter, sans-serif

ShowcaseSpecs