WHO Foundation Website Governance & UX Overhaul

Overview

• Organisation: the WHO Foundation, which describes itself as "an independent foundation, with the freedom to inspire change for better health", whose work supports the World Health Organization (WHO Foundation, The Foundation, 2026)
• Challenge: UX failures across navigation, accessibility and responsiveness, on a site that also had to carry the Foundation's governance pages
• Approach: a Webflow migration and ongoing stewardship: the Lumos framework, a shared design system, and governance-level page development
• Outcome: a faster site, with the structural accessibility gaps closed and the Foundation's governance pages reachable from its own navigation

The Institutional Challenge

The Foundation's existing website carried significant technical debt. Navigation, accessibility and performance problems were not only UX inconveniences. For an organisation that works in public view, they were institutional risk.

Navigation breakdown:

The navbar dropdown took up so much of the screen that an already large site was hard to move around. Key pages were missing from both the header and the footer, so a visitor could not find them without already knowing they existed. For an organisation cultivating corporate donors and philanthropic partners, that is structural rather than cosmetic: deciding which audience the navigation serves first is a governance decision, not a design preference.

Accessibility failures:

Alt text existed but lacked depth. Images were not described with the specificity a screen reader needs to convey meaning. Skip to main content was absent. Keyboard navigation for links was not properly implemented. No design system governed consistency across the site. For a global health organisation, accessibility is an institutional expectation as much as a technical standard, and these were gaps the Foundation would have struggled to answer for.

Performance and security:

The previous WordPress implementation relied heavily on plugins, each one adding load time and another dependency to keep patched. Slow loading compounded the navigation problems. The plugin stack meant a maintenance burden that grew rather than shrank.

What was actually at stake:

• Institutional credibility: navigation failures and accessibility gaps on the site of a WHO-affiliated organisation
• Governance resilience: publishing the Foundation's governance pages on a site that could not reliably route people to pages it already had
• Corporate donor confidence: due diligence arriving at a site that fails on keyboard alone
• Security posture: a plugin-heavy platform to keep patched

The Approach

A Webflow migration and ongoing stewardship: clearing the technical debt, building the governance pages, and putting systems in place that stop the same drift returning.

Navigation overhaul:

Sticky navigation replaced the dropdown. A clear link hierarchy now carries the Foundation's structure (The Foundation, Areas of Focus, Become a Partner, Campaigns) without burying it. Key pages were surfaced into primary navigation, and the remaining dropdowns were regrouped by logic rather than left as catch-all categories.

Accessibility and performance:

Skip to main content implemented. Keyboard navigation working across interactive elements. Container queries replaced fixed breakpoints, so layout responds to content rather than to arbitrary screen sizes. Text scaling applied site-wide. CSS and GSAP animation replaced heavier alternatives, giving GPU-accelerated transforms without a plugin behind them.

Design system:

A design system in Figma and Webflow: consistent components, typography, spacing and interaction patterns across the site. It exists to prevent the drift that produced the original accessibility gaps, and every new page is built inside it, so the standards hold as the site grows. It also means the site can be handed on. A documented system is the difference between an asset an organisation owns and a dependency on whoever built it.

Governance pages:

The transparency page was built to hold public accountability and donor confidentiality in the same place, and it stands as permanent governance infrastructure rather than a one-off. That balance, being accountable without appearing to put independence up for negotiation, is the standing problem for an independent foundation.

Platform:

Webflow Analyze for performance and SEO reporting. Webflow Optimize in place for Core Web Vitals work. Automatic backups instead of the plugin-dependent approach. Removing the WordPress plugin layer removed the patching surface with it.

The Organisational Outcome

Technical:

• Sticky navigation with a clear hierarchy, in place of the oversized dropdown
• Key pages surfaced into primary navigation
• Skip to content, keyboard navigation, fuller alt text and scaled typography. These are the fixes that were made, not a tested conformance level: the site was not assessed against WCAG 2.2 AA, and this page claims no conformance
• Responsiveness rebuilt on container queries
• Plugin dependency removed
• A design system governing consistency as pages are added
• Animation moved to CSS and GSAP

Governance:

• Transparency page published
• Homepage redesign under way, aimed at corporate donor cultivation
• The governance architecture reachable from the Foundation's own navigation: Transparency and Independence, Financials, and the Whistleblowing Service (WHO Foundation, 2026)

Ongoing:

• New key pages designed and built as programmes change
• SEO and AEO support, so the site is findable at the scale the Foundation works at
• Webflow Analyze and Webflow Optimize for continuous monitoring
• Automatic backups, without manual intervention

The Foundation retains Socialectric for ongoing stewardship: not maintenance in the usual sense, but continued development of key pages, SEO and AEO work, and governance-level infrastructure as programmes and needs change.

Why This Matters

The Foundation's problems were not unusual. Navigation sprawl, accessibility gaps, plugin-heavy platforms and slow performance are common across nonprofit websites, particularly those that grew a page at a time with nobody owning the digital decisions. The gaps stay invisible until something forces them into view: a funder's due diligence, a journalist's question, or a change of leadership that reveals who was actually holding the accounts.

What made this project notable was the compounding effect: broken UX undermining governance credibility. The Foundation needed to publish governance pages on a site that could not reliably route people to the pages it already had.

The migration worked because it addressed both layers. The design system, the accessibility work and the performance work are not cosmetic improvements. They are what the governance pages sit on. It is the clearest case we have worked on for treating an NGO website as a governance problem rather than a design problem: a design problem is solved once, and this one was not.

For an organisation under scrutiny from donors, media or regulators, these are not separate concerns. Technical debt becomes institutional risk, and institutional risk becomes reputational consequence.