WHO Foundation Website Governance & UX Overhaul

The WHO Foundation's website had navigation spanning 30% of the viewport, key pages buried from menus entirely, and accessibility gaps exposing one of the world's most scrutinised health organisations to institutional risk. Here's how we fixed the infrastructure—and built governance capability on top of it.

Overview

• Organisation: WHO Foundation (independent grant-making entity supporting World Health Organisation)
• Challenge: Significant UX failures across navigation, accessibility, and responsiveness—compounded by media scrutiny demanding rapid governance infrastructure
• Approach: Comprehensive Webflow stewardship with Lumos framework, design system implementation, and ongoing governance-level page development
• Outcome: Accessible, performant digital infrastructure supporting corporate donor cultivation and institutional transparency

‍

The Institutional Challenge

The WHO Foundation's existing website carried significant technical debt. Navigation, accessibility, and performance issues weren't just UX inconveniences—for an organisation operating under public scrutiny, they represented institutional risk.

Navigation breakdown:

‍The navbar dropdown consumed over 30% of the viewport—an unusable experience for users trying to navigate a site with extensive page structure. Key pages were missing from both header and footer navigation entirely. Users couldn't find critical information without knowing it existed. For an organisation cultivating corporate donors and philanthropic partnerships, this wasn't acceptable.

Accessibility failures:

‍Alt text existed but lacked depth—images weren't described with the specificity required for screen readers to convey meaning. Skip to main content functionality was absent. Keyboard navigation for links wasn't properly implemented. No design system governed consistency across the site. For a global health organisation where accessibility isn't just best practice but institutional expectation, these gaps created real compliance exposure.

Performance and security concerns:

‍The WordPress implementation relied heavily on plugins—each one introducing load time overhead and security vulnerability. Slow load times compounded poor navigation, creating friction at every point of the user journey. Multiple plugin dependencies meant ongoing maintenance burden and compounding risk.

Then the governance pressure arrived:

‍The Guardian raised questions about donor transparency—specifically a substantial anonymous contribution creating perception concerns. The Foundation needed transparency infrastructure quickly, whilst simultaneously addressing the foundational UX problems that had accumulated.

What was actually at stake:

• Institutional credibility (navigation failures and accessibility gaps undermining a WHO-affiliated organisation?)
• Governance resilience (could the site respond to media scrutiny whilst basic UX remained broken?)
• Corporate donor confidence (due diligence visits revealing accessibility non-compliance?)
• Security posture (plugin-heavy WordPress exposing organisation to vulnerabilities?)

‍

The Strategic Approach

Comprehensive Webflow migration and ongoing stewardship—addressing technical debt, building governance infrastructure, and establishing systems preventing regression.

Navigation overhaul:

‍Sticky navigation replacing the unwieldy dropdown system. Clear link hierarchy accommodating the Foundation's extensive page structure—The Foundation, Areas of Focus, Become a Partner, Campaigns—without overwhelming users. Key pages surfaced into primary navigation. Dropdown menus restructured for logical grouping rather than catch-all categories.

Accessibility and performance infrastructure:

‍Skip to main content implemented. Keyboard navigation properly functioning across all interactive elements. Container queries replacing fixed breakpoints—responsive layout adapting to content rather than arbitrary screen sizes. Text scaling implemented system-wide. CSS and GSAP animations replacing heavier alternatives—GPU-accelerated transforms providing performance without plugin dependency.

Design system implementation:

‍Figma and Webflow design system established—consistent components, typography, spacing, and interaction patterns across the entire site. This prevents the drift that created the original accessibility gaps. Every new page built within the system, maintaining standards as the site grows.

Governance infrastructure under pressure:

‍Transparency page developed rapidly in response to media scrutiny—balancing public accountability with donor confidentiality whilst awaiting consent for name publication. Page became permanent governance infrastructure, not crisis response.

Platform advantages realised:

‍Webflow Analyze providing performance and SEO insights. Webflow Optimize improving Core Web Vitals. Auto backup eliminating the plugin-dependent backup approach. Security posture fundamentally improved by removing WordPress plugin dependency entirely.

‍

The Organisational Outcome

Technical transformation:

• Navigation restructured—sticky nav with clear hierarchy replacing 30%-viewport dropdown
• Key pages surfaced into primary navigation—users find critical content immediately
• Accessibility gaps closed—skip to content, keyboard navigation, deep alt text, scaled typography
• Responsiveness rebuilt using container queries—layout adapts to content, not breakpoints
• Plugin dependency eliminated—security risk reduced, performance improved
• Design system governs consistency—new pages maintain standards automatically
• Animations optimised—CSS and GSAP replacing heavier alternatives

Governance outcomes:

• Transparency page deployed addressing media scrutiny
• Homepage redesign (ongoing) positioning Foundation for corporate donor cultivation
• Governance architecture clearly communicated—Transparency and Independence, Financials, Whistleblowing Service all properly surfaced
• Digital presence now withstands institutional due diligence

Ongoing stewardship:

• New key pages designed and developed as programmes evolve
• SEO and AEO support ensuring discoverability matches institutional scope
• Webflow Analyze and Webflow Optimize providing continuous performance monitoring
• Auto backup providing operational resilience without manual intervention

Client perspective:

"Working with Eric on the re-platforming of our site has been an absolute joy. He has taken what we thought would be a complex process and made it easy, seamless and professional. Even when our brief was to 'lift and shift' our site to Webflow, Eric found ways to enhance our donor experience and improve our SEO, all within budget. Our site has already had an uplift in organic traffic and our team is delighted with what we can offer our donors going forward."— Juan Carlos Garay, Head of Communication, WHO Foundation

The Foundation retains me for ongoing strategic stewardship—not traditional maintenance, but continued development of key pages, SEO and AEO optimisation, and governance-level digital infrastructure as programmes and needs evolve.

‍

Why This Matters

The WHO Foundation's challenges weren't unusual. Navigation sprawl, accessibility gaps, plugin-heavy platforms, and slow performance are endemic across nonprofit websites—particularly those that grew organically without governance oversight of digital decisions.

What made this project significant was the compounding effect: broken UX undermining governance credibility. When The Guardian scrutinised donor transparency, the Foundation needed to deploy governance infrastructure on a site that couldn't reliably navigate users to existing pages. The technical debt and the governance pressure arrived simultaneously.

The Webflow migration succeeded because it addressed both layers: foundational UX failures and institutional governance requirements. The design system, accessibility infrastructure, and performance optimisation aren't cosmetic improvements—they're the foundation upon which governance credibility is built.

For organisations operating under scrutiny—from donors, media, regulators, or public—these aren't separate concerns. Technical debt becomes institutional risk. And institutional risk becomes reputational consequence.

Does your organisation carry similar technical debt—navigation issues, accessibility gaps, plugin dependencies—whilst simultaneously facing governance expectations from Board, donors, or regulators? Let's discuss how strategic Webflow stewardship addresses both layers, building infrastructure that supports institutional credibility rather than undermining it.