Case study · 05
UGEAFI
A bilingual site for a Congolese NGO working across eastern DRC and South Sudan, built around eight programmes, country-level content and a CMS the team edits in English and French.
- Year
- 2026
- Role
- IA, UX/UI, Next.js development, bilingual CMS setup, editor training
- Stack
- Next.js · TinaCMS · NGO · DR Congo
- Live
- ugeafi.org
01 · The brief
What the client needed.
UGEAFI needed a site that could carry four decades of community-led work across two countries, publish in English and French from one place, and stay editable by staff across its Uvira, Goma and Juba offices rather than by a developer.
02 · Discovery & IA
Structure, audience and sitemap.
The structural question was how to hold two countries and eight programmes in one site without doubling it. Discovery established that DR Congo and South Sudan run the same programme areas with different figures on the ground, so Our Work splits by country first, then reuses a single programme template with country-level overrides. Language was treated as a content layer rather than a second site, so English and French share one URL tree.
Sitemap · ugeafi.org
06 routes · 02 countries · 08 programmes
- ·English and French share one URL tree. Language is a switch in the header, and each section keeps an en and fr content file, so the team edits a page once and sees both versions side by side.
- ·Our Work splits by country first, then by programme. DR Congo holds the base record; South Sudan overrides headline, stats and body per slug instead of duplicating eight more pages.
- ·Eight programmes run through one template: health, education, food security, WASH, economic empowerment, environment, peacebuilding, protection.
- ·Donations are handed off to UGEAFI's existing Keela page rather than rebuilt, so the finance team keeps the reporting it already uses.
03 · Wireframes & UX
From wireframes to prototype.
The wireframes were used to work out how much evidence a programme page could carry before it stopped being readable. Each one had to hold a narrative, four headline results, optional field video and a route onward to the next programme, in either language, without the layout shifting when a field was left empty.
Programme detail wireframe
Mid-fi · /programs/[country]/[programme]
- 01Language switch sits in the nav; English and French share the same URL
- 02Breadcrumb keeps the country in view: Home › Our Work › DR Congo › Food security
- 03South Sudan reuses this template and overrides only headline, stats and body
- 04Four stat fields per programme, edited in the CMS without touching layout
- 05Field video is optional; the slot collapses when a programme has none
04 · Outcome
What changed after launch.
The site launched at ugeafi.org with the programme, news and impact content in both languages, and with a visual CMS and a plain-language editing guide at /guide so staff could publish without a developer. Donations were pointed at the organisation's existing Keela page rather than rebuilt, keeping the finance team's reporting intact.
