INFF
A knowledge platform for UNDP and the countries using the INFF approach
- The project
- A knowledge platform for the Integrated National Financing Framework, the approach countries use to plan how they pay for their national priorities and the SDGs.
- My role
- Information architecture, UX and UI design, and the full Webflow build, as a UNDP consultant.
- Where it is
- Live, and used by 80+ country offices that publish their own pages and news.
The problem
Two audiences, and a lot of dense material.
INFF guidance is long and technical: assessments, financing strategies, country examples. The platform had to work for the people reading it, government officials and practitioners looking for guidance or for how another country did it. It also had to work for the people publishing it: UNDP staff in 80+ country offices, most of whom aren’t web specialists.
Finding your way in
Three doors on the home page, and two ways to find a country.
The home page starts from what a visitor wants to do, not from how UNDP is organised: learn about INFFs, connect with other countries, or partner with UNDP. Country experiences can be reached two ways. A mega menu grouped by region works for people who know where they’re going, and an interactive map works for people who want to look around.
Making long guidance readable
Guidance had to work as web pages, not only as PDFs.
The guidance is organised into building blocks. Each block opens on a short overview of its parts, such as financing needs, the financing landscape, risk and binding constraints, with a way to read each one on the page or download the PDF. Report pages keep a table of contents beside the text, with numbered sections and figures, so a long document is something you can move around in.
Built for country offices to publish
Any country office can publish without breaking the design.
I built a component library in Webflow with locked styles: a fixed heading scale, colour contrast that meets WCAG 2.1 AA, and one class naming system. Country pages, news and events all come from templates, so staff in Nairobi publish the same way as staff in Mexico City, and the platform stays consistent and accessible whoever edits it.
How it’s built
Webflow’s CMS couldn’t handle the interactive map or fast filtering across hundreds of records on its own, so I added a layer of custom JavaScript for search, the map and filtering. There’s no separate backend to maintain: the whole platform is still edited in Webflow’s visual editor.