BHF

Website

Project:

6/15
All projects

Design briefing workshop exercise

Sketches of UI elements

The lead banner on the homepage sets the tone for the website by promoting the 'Fight for every heartbeat' brand attitude with real stories of survivors, nurses, researchers, fundraisers etc. These stories appear throughout the website in order put a human face to BHF and its work

Mobile homepage

The events section was updated to make the experience simpler and more visually engaging

Events section mobile display

Event detail and Publications listing pages

Agency: Precedent

Project overview:

The British Heart Foundation (BHF) needed a new digital platform, which would promote the core of its new brand, drive engagement with heart patients and supporters, convert users into fundraisers and donors, and deliver a suite of online tools designed to boost fundraising and donations.

BHF’s aim was to bring human stories to the forefront of the site, built around its new brand statement – A fight for every heartbeat. We wanted to convey this aggressive and proactive tone in the design by using bold visuals that signposted case studies and real narratives. These stories would communicate the perspectives of the many different people affected and fighting to stop heart disease – including survivors, fundraisers, researchers, family members.

With these stories as a start point, additional material is linked to in order to  provide the user with a complete understanding of BHF’s activity, their research discoveries, stressing the importance of a healthy lifestyle, and increasing understanding of different heart conditions.

The redesign has also focused on de-cluttering the site to remove unnecessary features, and signposting to provide clarity. For example, the events section previously consisted of an unsophisticated listings layout. Using a clear, pictorial tiled approach, we’ve changed it into a more aspirational experience – using photography from previous events and allowing easy filtering of event types. This filtering is also used to provide an enhanced map experience that helps people to locate BHF stores more easily.

A year on from launch, the site has been a huge success for BHF. The move away from over-cluttered pages to simple and focussed narratives that speaks directly to the needs of the user has led to increased engagement with the cause, including a 277% increase in donations via the website.

lt in Sitecore, the new website needed to be the backbone of the charities plans to deliver to their new 2020 strategy and it has resulted in a – See more at: http://www.precedent.com/our-work/british-heart-foundation#sthash.enEhOIRT.dpuf

Project responsibilities:

  • Creative direction
  • Design
  • Design detailing
  • Design direction