British Heart Foundation Case Study

One site for patients, donors, volunteers, clinicians and the bereaved. Thousands of pages, four internal teams competing for the same homepage, and a content model where a single editorial change could break WCAG AA.

Overview

Process

Overview

A national charity website that had outgrown its information architecture, rebuilt around the journeys that carry the British Heart Foundation's work, on a content model the in-house team could publish into at scale.

Scope: IA across thousands of pages, navigation, homepage hierarchy, content model, accessibility system and editorial templates.

One site served patients, donors, volunteers, clinicians and the bereaved. Four internal teams, editorial, fundraising, retail and product, all held a stake in the homepage, and emotional storytelling had to sit alongside clear calls to act. WCAG AA was scoped as a product requirement, not a sign-off step, so editorial couldn't accidentally ship something that failed it.

Impact

01Restructured an IA of thousands of pages around three supporter journeysRestructured an IA of thousands of pages around three supporter journeys
02Forced homepage trade-offs between four internal teams into one shared hierarchyForced homepage trade-offs between four internal teams into one shared hierarchy
03Made WCAG AA a property of the system, not a sign-off stepMade WCAG AA a property of the system, not a sign-off step
04Resolved competing homepage claims with one shared hierarchyResolved competing homepage claims with one shared hierarchy
05Shipped a content model BHF's in-house team has been publishing into since launchShipped a content model BHF's in-house team has been publishing into since launch
06Balanced emotional storytelling with clarity of action on every pageBalanced emotional storytelling with clarity of action on every page

The Process

Discover

Define

Ideate

Design

Validate

Phase 01 / 05

Discover

Understand the audiences, the business and the existing site.

Business model canvas
Measurement framework
Staff interviews
Customer survey
Customer interviews

The Discovery Phase

Business model canvas

Mapped value, audiences and channels against the site surfaces. The homepage was carrying editorial, donations, retail and support with no shared hierarchy.

Measurement framework

Agreed KPIs and behavioural signals with stakeholders upfront, donations, support engagement, task completion. Success measured against evidence, not opinion.

Staff interviews

Editors, fundraisers and product owners mapped content ownership, publishing workflows, and the governance, legal and regulatory constraints any redesign had to respect.

Customer survey

Quantified perception and friction at scale across supporters, donors and information-seekers, a baseline to design against and benchmark post-launch.

Customer interviews

1:1 sessions exposed the moments that mattered across information, donating and volunteering, and the points where the existing site quietly lost them.

The Definition Phase

Tree testing the current British Heart Foundation site

Tree testing current site

Benchmarked the existing IA with task-based tree testing. Surfaced the exact labels and dead-ends costing users on donate, support and health-info paths, a target list, not a hunch.

Personas

Evidence-based personas across the three core segments, health-info seekers, donors, volunteers. Trade-offs in IA, content and design were made against real users, not internal preference.

Customer journey mapping

Mapped end-to-end across information, donation and volunteer paths to find the high-leverage moments worth investing in, and the drop-offs the redesign had to close.

The Ideation Phase

Card sorting

Open and closed card sorting with supporters and information-seekers broke a long-running internal debate about labels, and gave the redesign a nav built from how users think, not how the org is structured.

Information architecture and sitemap for the British Heart Foundation

IA & Sitemap

Collapsed thousands of pages into a structure built around three supporter journeys, not five internal departments. The shortest routes belong to the highest-intent tasks.

Tree testing

Validated the new IA against the same task list the original site failed on, so the labels and routes shipping into design were ones users could already navigate without help.

The Ideation Phase

Card sorting

Open and closed card sorting with supporters and information-seekers gave the redesign a navigation built from how users actually think, not how the org is structured.

IA & Sitemap

Restructured the IA around the three journeys with the highest impact, donating, finding support, navigating health information, so the shortest paths map to what supporters come for.

Tree testing

Validated the new IA against the same task list the original site failed on, so labels and routes shipping into design were ones users could already navigate without help.

The Design Phase

Wireframes

Low-fidelity wireframes set content placement and navigation first, so stakeholder feedback landed on hierarchy and intent rather than visual treatment.

Concept exploration

Three directions, stress-tested against WCAG AA contrast and large-text first, a constraint that kills most "bold charity" palettes early. The system that landed holds authority on health and research content, warmth on donate and support, without two visual languages.

Concept exploration

Accessibility testing

Audited every component against WCAG AA, contrast, focus, screen-reader flow, reduced motion. Accessibility is a property of the system, not a pass at the end, so editorial teams can't accidentally ship something that fails it.

High fidelity designs

One system, three jobs: hierarchy that scales across thousands of pages, components that carry contrast, focus and reduced-motion by default, and editorial templates that hold structure under in-house publishing across campaigns, channels and team turnover.

Click below to view the live website:

British Heart Foundation

BHF high fidelity quick healthy meals design

BHF high fidelity leading research design

BHF high fidelity shop navigation design

The Validation Phase

Prototyping & user testing

Interactive high-fidelity prototypes brought the flows to life, then real users tackled key tasks like donating and finding support, surfacing friction and refining the experience pre-launch.

BHF prototype flows and user testing findings

Prototyping & user testing

Tested high-fidelity prototypes with supporters on the journeys carrying the most weight, donating, finding support, navigating a diagnosis. Two patterns survived unchanged. The donation flow lost a step. The support landing page was rebuilt twice before users could describe what was on it without prompting.

Conclusion

A site re-shaped around how supporters actually look for things, and a system BHF's in-house team can extend, accessibly, without redrawing it page by page.

Validated across screen readers, low-vision flows and reduced-motion preferences before sign-off. The donate and support paths are shorter and clearer. Editorial templates absorb the long tail of campaign content without bending the structure. The handover wasn't a file, it was a working system the team has owned and grown since.

Key decision: built the system to WCAG AA from the first component, not retrofitted at the end. Slower in the design phase; meant accessibility held up under campaign content the editorial team ships weekly.

Other case studies

Product · Community & Events

Website · Hospitality & Discovery

Mobile App · Everyday Experience