Mike SOBTAMFOEngineer · Digital solutions
FR
Let’s talk

Demonstration project — fictional brand

Fondation Ndolo

The website of a children’s foundation, where each donation shows what it funds and what it really costs the donor.

NGODouala and LyonCameroon and France

View the site A similar project?
Home page of the Fondation Ndolo site on desktop, with the heading, a child at school and the donation widget
The same home page on mobile

Project sheetNDOLO

Sector
NGO, childhood
Market
Cameroon and France
Type
Website and online giving
Pages
38
Languages
French, English
Built in
2026

The need

The Ndolo Foundation funds water, schools and health in five regions of Cameroon. Its donors live mostly in Lyon and Douala. They want to know where the money goes before they give, and to be able to stop whenever they like. Many read on a phone, some with a screen reader.

For their customers

A donor chooses €20 a month and reads straight away: “€6.80 after tax relief”. She sees what it funds, then gives in four steps, with no traps. When she wants to check, she finds the accounts, figure by figure.

What I built

  • Step 1 of the donation: €20 a month selected, with the cost after tax relief and the impact in the summary

    A donation that shows its real cost

    The donor picks an amount. The page tells them what it funds, and what it costs them after tax relief. The payment is simulated: no money moves.

  • The Projects page, with the map of Cameroon, the filters and the list of projects

    A project map you can filter

    Sort by programme, region or progress. The map and the list update together, and everything also works with the keyboard.

  • The Transparency page: a donut chart showing that 84% of spending goes to missions, with the choice of euros or CFA francs

    Accounts anyone can read

    Every chart has its data table. Visitors choose to show amounts in euros or in CFA francs.

  • The site’s Display panel: text size, spacing, font, contrast and animations

    A display that adapts to each visitor

    Each visitor sets the text size, the font, the contrast and the animations. Their choices are kept on their device.

Design choices

Cream paper and a deep green, for a tone that is warm and serious. Sunshine yellow is kept for giving: the button is spotted at once.

  • Bricolage Grotesque for headings and buttons
  • Literata for reading text
  • PaperBackground#F8F5EA
  • InkText#152318
  • SunDonation#FAC131
  • LeafLinks, accents#246E3A

Measurements

Home page of the demo, on mobile and on desktop.

MetricMobileDesktop
Performance81100
Accessibility100100
Best practices100100
SEO100100
Largest Contentful Paint (LCP)2,465 ms628 ms
Transferred size194 KB235 KB

Measured on 3 October 2026 with Lighthouse 13 (default profiles), page served compressed from a local server, as in production.

Built with AI

Design, art direction and checks by me. Code and content produced in collaboration with AI agents, then reviewed and tested.

How I work with AI

All work

Let’s talk about your project.

Tell me what you do and what you need. I reply within one business day.

You talk to me directly

Mike SOBTAMFO · engineer · Cameroon (UTC+1)