The British Heart Foundation

UX and design
refresh at scale

  • UX
  • Design
  • Prototyping

About the project

The BHF are one of the biggest charities in the UK and fund over £100 million of research each year into all heart and circulatory diseases. The site has more than a million users every month but had become dated and needed a complete UX and visual refresh. The design needed to help refocus the content and make it easier to navigate across all devices.


Challenges


Approach

A redesign at this scale has an effect on every part of the organisation, so a lot of thought had to go into it before we got down to wireframes and colouring pixels. We broke the goals down into a series of agile sprints and tested designs regularly at every stage.

Once the initial design concepts had tested well, we started to build everything into a design system that could be used throughout the site and across all other digital assets.

The Big Beat

The new brand is centred around the 'big beat' logo which was brought to life in code using CSS/SVG animation. The organic shape of the logo was also used across the site to form the shape of the different sections.

Results

There's still a lot to be added, with design refinements and new content templates in upcoming phases, but initial results have been good. Visitors are up 7%, one off donations up 26% and regular donations up 67%.


What I learned

A site as complex as this has so many contstraints that need to be taken into account. You really have to think about the existing systems, how content is managed and what can be improved. It also gave me the chance to develop a full design system and understand where designs can use a common set of elements and when things need a custom approach. Consistency in design is important but shouldn't come at the expense of creativty.

Next project