Heart of Steel

A British Heart Foundation online fundraising product that allows customers to donate by engraving a name on a timeless work of art.

Development team

UX/UI lead - myself

Front End developer

Back End developer x2

Product Owner

Content Designer

QA

Intro

The Heart of Steel is a monumental sculpture in Yorkshire with space to engrave 150,000 names. The idea for the Heart of Steel was born out of another art project in the making; The Steel Man. If it comes to pass, the Steel Man, at 32 metres high, will overlook Sheffield and become a new icon for the region. The long-term hope is that the Heart of Steel will sit inside The Steel Man.

Due to very high levels of heart and circulatory diseases in the area and due to local relationships with the charity, the Heart of Steel Appeal was linked with the British Heart Foundation, who began receiving a proportion of all donations given to engrave a name on the Heart.

Donations made to engrave a name go directly to the British Heart Foundation and help fund vital research into the world’s biggest killers. Conditions like stroke, heart diseases, vascular dementia and diabetes.

Planning & Discovery

As a team we were tasked with reviewing and improving the user experience for the Heart of Steel product on the British Heart Foundation website.

To understand what was and what wasn’t working with the current user journey/process of engraving a name on the BHF website, we planned to analyse SessionCam recordings and customer feedback from our Customer Service Center.

Key findings

SessionCam recordings:

- Users would spend a lot of time scrolling up and down reading through the FAQs on the first part of the form

- Users where having issues with the engraving a name field

- Users where struggling with entering a date with their engraving due validation issues

Google Analytics:

- Users spend a lot of time scrolling up and down reading through the FAQs on the first part of the form

- the majority of users are on mobile

Customer Service Centre feedback:

- Customers would call up to correct the names they have chosen to engrave due to user error

Persona

Define

The problem

When a user decides to engrave a name and a date they often struggle to understand the criteria for the two specific input fields and only realised they have made an error after making payment for their engraving.

The Solution

An improved user experience where users can fill in their engraving details, providing clear, concise instructions and providing an opportunity for the user to check all their details before they pay for their engraving.

The Outcome

As a result, users can be made to feel more confident when filling in their details, reducing potential errors and time spent completing the order.

Develop

User flows

Ideation

We met with the stakeholders and scrum team (including developer, product manager, product owner) in order to discuss out very initial designs and agree on what would work and what would not. Over this session, we focussed on deciding on which approach to carry forward to develop and test.

Through discussions with the team we decided not to incorporate the feature of 2 dates for an engraving as this would impact on the delivery time. However we agreed that we would include this functionality after we go live.

Constraints

We had to work within the existing new look and feel recently launched the design sytem guidelines.

Using existing components from our design system as much as possible so that our products not only a consistent look and feel but also saves time on development and implementation.

However there was scope within the project to build new functionality which would also be carried over to new and other existing products.

Challenges

One of the biggest challenges was around the FE and BE implementation process. Our FE and BE work on their own separate branches causing conflicts when both parts of the work are pushed to our main branch.

Deliver