The website redesign for the British Heart Foundation improved user engagement, streamlined navigation, and enhanced the donation, support and information journeys across the corporate site and key sub-experiences.
Overview
The redesign project for the British Heart Foundation (BHF) website aimed to enhance the overall digital experience, from Discovery through to Design and Testing. The project focused on improving usability, accessibility, and visual appeal while aligning with BHF’s mission. Key objectives included streamlining user journeys and creating intuitive navigation. By conducting thorough user research, refining the site’s information architecture, and implementing a modern, user-centric design that enhances engagement, facilitates easier access to resources, and strengthens BHF’s digital presence. The final result is a more effective platform that improves user satisfaction and ultimately supports BHF’s goals in raising vital funds and awareness.
The Process
1.Discover
2.Define
3.Ideate
4.Design
5.Test
Documentation review
Business model canvas
Measurement framework
Customer & Staff interviews
Competitor analysis
Tree Testing
Personas
Customer journey
Card sorting
User flows
IA & Sitemap
Tree Testing
Concept exploration
Accessibility testing
Wireframes
Design system
High fidelity designs
Functional specification
Prototyping
User testing
Design Iterations
1.Discover
2.Define
3.Ideate
4.Design
5.Test
Documentation review
Business model canvas
Measurement framework
Customer & Staff interviews
Competitor analysis
Tree Testing
Personas
Customer journey
Card sorting
User flows
IA & Sitemap
Tree Testing
Concept exploration
Accessibility testing
Wireframes
Design system
High fidelity designs
Functional specification
Prototyping
User testing
Design Iterations
Discovery
Documentation review
A thorough review of existing documentation, brand guidelines, analytics and prior research helped establish a clear baseline. Surfacing what was already known reduced duplicated effort and ensured the redesign built on, rather than ignored, the foundation’s previous insights and digital decisions.
Business model canvas
The business model canvas mapped out BHF’s value proposition, key audiences, channels, partnerships and revenue streams. This gave a single, shared view of how the digital platform supports the foundation’s mission, and guided where to focus the redesign for the highest impact.
Measurement framework
A measurement framework was defined with stakeholders to align on the KPIs and signals that would prove the redesign’s success. Linking metrics to user goals and organisational outcomes ensured the work could be evaluated objectively after launch and iterated on with confidence.
Customer & staff interviews
Interviews with both customers and BHF staff surfaced the realities of using the current site, from finding heart health information to donating or volunteering. Understanding both sides of the experience exposed friction points and opportunities that quantitative data alone couldn’t reveal.
Competitor analysis
A competitor analysis benchmarked BHF against other leading charities and health organisations. The findings highlighted differentiators in tone, navigation patterns and donation flows, informing where BHF should follow established conventions and where it should stand apart.
Define
Tree testing current site
Tree testing the existing British Heart Foundation website involved evaluating its information architecture by asking users to find specific content within the navigation structure. This method helped identify how intuitively users could locate key pages, revealing any issues with the hierarchy, labelling, or organisation of the content. By testing the site’s structure without visual design elements, valuable insights were gathered to inform the redesign, ensuring that the final UX/UI would be more user-friendly and efficient in guiding visitors to the information they needed.
Personas
Creating personas was crucial for understanding the diverse needs of the British Heart Foundation’s users. By developing research-backed personas, we were able to tailor the design and content to key segments—such as those seeking heart health information, potential donors, and volunteers. This approach ensured the website aligned with user goals, enhanced engagement, and improved usability, ultimately driving higher conversion rates and a more personalised experience.
Customer journey mapping
Creating a customer journey map was essential for visualising and understanding the different touchpoints users experience on the British Heart Foundation website. By mapping the journey, we identified key moments and pain points across user paths—whether they were seeking health information, donating, or volunteering. This insight allowed us to design a seamless, engaging experience that addressed user needs at every stage, improving satisfaction, increasing conversions, and guiding users toward their goals more effectively.
Ideate
Card sorting
Card sorting was conducted to better understand how users categorised and prioritised content. By involving users in the process, the technique revealed natural patterns in information grouping, which informed the design of a more intuitive navigation structure. This approach enhanced user flow and ensured content was organised in a way that aligned with user expectations, ultimately improving the overall digital experience.
IA & Sitemap
Information Architecture (IA) and site mapping were developed to structure and organise content in a way that ensured easy access and navigation. The IA process involved defining clear categories, labels, and hierarchies, while the site map provided a visual representation of the entire website’s structure. Together, these tools helped optimise the user experience by making it intuitive for users to find relevant information, ensuring a logical flow and seamless interaction across the site.
Tree testing
Tree testing was conducted to evaluate the effectiveness of the newly proposed information architecture by testing users’ ability to find content using a simplified, text-only version of the site’s structure. This method helped identify areas where users struggled to navigate or locate information, providing valuable insights for refining the site’s organisation. The results informed design improvements, ensuring a more intuitive and user-friendly experience.
Ideate
Card sorting
Card sorting was conducted to better understand how users categorised and prioritised content. By involving users in the process, the technique revealed natural patterns in information grouping, which informed the design of a more intuitive navigation structure. This approach enhanced user flow and ensured content was organised in a way that aligned with user expectations, ultimately improving the overall digital experience.
IA & Sitemap
Information Architecture (IA) and site mapping were developed to structure and organise content in a way that ensured easy access and navigation. The IA process involved defining clear categories, labels, and hierarchies, while the site map provided a visual representation of the entire website’s structure. Together, these tools helped optimise the user experience by making it intuitive for users to find relevant information, ensuring a logical flow and seamless interaction across the site.
Tree testing
Tree testing was conducted to evaluate the effectiveness of the newly proposed information architecture by testing users’ ability to find content using a simplified, text-only version of the site’s structure. This method helped identify areas where users struggled to navigate or locate information, providing valuable insights for refining the site’s organisation. The results informed design improvements, ensuring a more intuitive and user-friendly experience.
Design
Wireframes
Wireframing served as a blueprint for the layout and structure of the site. It involved creating low-fidelity, basic visual representations of key pages to outline content placement, navigation flow, and user interactions. The wireframes helped identify the most effective way to organise information, ensuring a clear and intuitive experience for users seeking support, donating, or learning about heart health. This stage allowed for early feedback and refinement before moving on to higher-fidelity designs, ensuring the site was both user-friendly and aligned with BHF’s mission.
Concept exploration
UI concept exploration for both corporate and key sub-experiences focused on developing diverse design ideas that aligned with user needs and brand identity. This involved experimenting with layout structures, colour schemes, navigation styles, and interactive elements to create visually appealing and functional interfaces. The goal was to balance professionalism for corporate audiences with a welcoming, intuitive experience for everyday visitors. These concepts helped refine the design direction, ensuring brand consistency.
Accessibility testing
Conducting accessibility testing was crucial to ensuring the British Heart Foundation website was usable by everyone, including those with disabilities. By identifying and addressing accessibility issues, we ensured that the site met WCAG standards, providing an inclusive experience for all users, regardless of ability. This process improved navigation, readability, and interaction, ultimately enhancing user satisfaction and engagement while broadening the website's reach.
High fidelity designs
High-fidelity designs were developed to provide a polished, detailed visual representation of the final website. These designs included specific typography, colours, images, and interactive elements, reflecting the BHF brand and enhancing the user experience. The high-fidelity mockups ensured consistency across the site and allowed for a realistic preview of the user interface, helping stakeholders visualise the final product. This stage also facilitated further usability testing and adjustments, ensuring the design was both aesthetically appealing and functional for the target audience.
Click below to view the live website:
Test
Prototyping
Prototyping the designs involved creating interactive, high-fidelity mock-ups to bring the visual and interactive elements to life. These polished designs reflected the refined user flows, content structure, and overall aesthetic. Testing these final prototypes with users allowed for validation of the design decisions, ensuring that the interface was both visually appealing and functional. Any last-minute adjustments were made based on user feedback to optimise the experience, ensuring that the final design would meet both user needs and business goals.
User testing
User testing involved gathering feedback from a diverse group of users to ensure the redesign was intuitive, accessible, and effective. Participants were asked to complete key tasks, such as donating, navigating educational resources, and finding support services. Observing their interactions helped identify pain points, refine the user flow, and validate design choices. The insights gained from user testing were crucial in ensuring the final design met the needs of all users, enhancing both usability and the overall user experience.
Prototyping
Prototyping the designs involved creating interactive, high-fidelity mock-ups to bring the visual and interactive elements to life. These polished designs reflected the refined user flows, content structure, and overall aesthetic. Testing these final prototypes with users allowed for validation of the design decisions, ensuring that the interface was both visually appealing and functional. Any last-minute adjustments were made based on user feedback to optimise the experience, ensuring that the final design would meet both user needs and business goals.
User testing
User testing involved gathering feedback from a diverse group of users to ensure the redesign was intuitive, accessible, and effective. Participants were asked to complete key tasks, such as donating, navigating educational resources, and finding support services. Observing their interactions helped identify pain points, refine the user flow, and validate design choices. The insights gained from user testing were crucial in ensuring the final design met the needs of all users, enhancing both usability and the overall user experience.
Conclusion
In conclusion, the redesign process was a collaborative and iterative journey, driven by user feedback at every stage from initial concept development through prototyping to the final design. By continuously testing and refining the user experience, we ensured that the final website would not only meet the needs of users but also provide a seamless, accessible, and engaging platform for the British Heart Foundation. This user-centred approach resulted in a design that enhances functionality, improves navigation, and supports the foundation’s mission of raising awareness and providing vital resources to those affected by heart disease.
