Website Transformation

The British Heart Foundation (BHF) embarked on an ambitious journey in 2022 to completely overhaul its digital presence, starting with its main website bhf.org.uk. As the UX/UI Lead, I played a pivotal role in this transformative project, collaborating closely with internal teams and external partners to create a user-centric, visually compelling, and strategically aligned digital experience.

Defining the Vision

Working alongside the director of digital, we crafted a comprehensive brief for external agencies, outlining our vision for a reimagined BHF digital presence. This brief set the stage for a collaborative effort that would span multiple years and involve various stakeholders.

Discovery and Research

Following a rigorous procurement process, we partnered with Dept, a digital agency, to conduct an extensive 6-month discovery project. This phase was crucial in understanding the fundamental user experience of 8 key journeys on the BHF website. Our approach included:

• Internal and external workshops
• Interviews with BHF subject matter experts
• Customer interviews
• Shop visits for on-the-ground insights
• Detailed analytics reviews
• Heuristic analysis of the 8 key user journeys

This comprehensive research phase provided invaluable insights into user needs, pain points, and opportunities for improvement.

Conceptualisation and Design

Collaborating closely with Dept and our internal design team, we developed a series of page concepts that would form the foundation of our new digital experience. These concepts were:

• Aligned with BHF’s brand guidelines
• Approved by C-suite project sponsors
• Designed to address key user needs identified in the discovery phase

Our internal team then took these concepts and transformed them into fully-fledged component and template designs for key pages, ensuring a cohesive and user-friendly experience across the site.

Innovative Project Management

To manage this major project effectively, we worked with our technology directorate to create a unique workflow outside our normal agile scrum approach. This bespoke process allowed us to maintain flexibility while ensuring steady progress on this complex, multi-year initiative.

Implementation and Content Migration

As we entered the second year of the project, our focus shifted to implementing the new designs and migrating the vast amount of existing content onto the new templates. This phase required meticulous attention to detail to ensure content integrity and optimal user experience.

Expanding the Scope

With the core redesign underway, we began to address site sections not included in the initial page concepts. Special attention was given to areas of high strategic importance to the BHF, ensuring that every part of the site aligned with our overall digital strategy.

Building a Comprehensive Design System

A key UX/UI outcome of this project has been the development of a new, comprehensive design system. This system, which will replace our legacy design system, includes all components and templates created during the redesign. It will serve as a crucial resource for maintaining consistency and efficiency in future digital initiatives.

Ongoing Refinement and Optimisation

As we continue to roll out the new design across the BHF website, we remain committed to iterative improvement. Regular user testing and analytics reviews inform ongoing refinements, ensuring that the site continues to meet user needs and organisational goals.

This project represents a significant step forward in the BHF’s digital transformation, setting a new standard for user experience in the charity sector. By prioritising user needs, leveraging data-driven insights, and fostering close collaboration between internal and external teams, we’ve created a digital presence that truly serves the BHF’s mission of building a world free from the fear of heart and circulatory diseases.