Heart of Steel user research for online engraving
A British Heart Foundation online fundraising product that allows customers to donate by engraving a name and date on a timeless work of art.
What is the Heart of Steel?
The Heart of Steel is a monumental sculpture in Yorkshire with space to engrave 150,000 names.
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.
Read more about the Heart of Steel story.
The Challenge
Improve experience = more engravings = more donations
Our goal for the project was to continue the success of the product to date. A simple but meaningful engraving which remembers a loved one and supports the British Heart Foundation research.
Our high levels goals/objectives were to:
Identify user pain points with the current form.
Improve user experience.
Persona
Eight personas, representing the main British Heart Foundation audiences were created in collaboration with Sift Digital.
The persona displayed below, representing our donor audience was continuously used throughout the Heart of Steel project.
Name: Linda
Age: 60
Location: Stirling
Life stage: Retired
BHF familiarity: High
“The British Heart Foundation were there for my dad. I want to give something back.”
Situation
Linda has been aware of the BHF for a long time. Her dad died of a heart condition a number of years ago, and she remembers him being given literature from the BHF during his time in hospital which was really helpful. Since her dad died Linda has tried to support the BHF wherever possible, for example by buying BHF Christmas cards and by putting a few pounds in a collecting tin whenever she sees one. She also makes a larger donation to the BHF every year around the anniversary of her dad’s death, with the amount varying according to how much she feels she can spare at the time. Despite her warmth towards the BHF, Linda hasn’t really thought about setting up a monthly payment. She prefers to give ad hoc, and doesn’t see any reason to change this.
Top tasks
Linda has £100 to donate in memory of her dad and decides to submit the donation online. She makes an ‘in memory’ donation and receives a thank you email explaining some of the research the BHF has spent donations on, and what recent advances there have been. While on the website Linda notices a box which promotes the BHF supporters’ newsletter. This was shown to her as the site identified her as a supporter or potential supporter based on the pages she’d viewed. Linda decides to sign up, and receives email updates which focus on the link between donations and groundbreaking research.
My role
I joined the scrum team to continue and lead the design of the engraving experience that was initial done. I worked alongside a content designer, product manager and front and back end developer.
What I did
Insight gathering
Sketching and prototyping
Pattern documentation and best practices
Scope and constraints
The project had to be completed within a sprint. Therefore we had to be realistic about the what user pain points we wanted to tackle and prioritise accordingly. Implementing the updated form approach and using existing components and patterns where possible.
However there was scope within the project to improve the functionality of some elements, which would feed into the design system and design patterns.
First Steps
Customer feedback & SessionCam analysis
As it was my first time working on the product and without previous insights, I decided to use the feedback our Customer Service Center had been collecting and analyse SessionCam recordings (web optimising tool) to see how Doners where engraving a name and date.
insights
I analysed SessionCam recordings alongside a few months feedback provided by the Customer Service Center. The helped to identify any user struggles with the experiencing and any pain points/issues they had with the overall service.
Affinity map
Deeper insights
Poor date input field
The date input field used is a simple text field which is probably the right approach, however because the format required can be considered somewhat unconventional ‘dd.mm.yyyy’, it was causing users to become frustrated and annoyed, leading to form abandonment and errors. This was evident as 9.5% of mobile sessions where shown the ‘Enter a valid date’ error.
Confusing FAQs section
To understand what can or can’t be engraved, users would scroll down to the bottom of the form refer to the FAQs and then back up to the ‘Engrave name’ input field to enter the name. This increases the user effort necessary to navigate the page and so heightens the struggle recorded.
User errors on their engraving
A common theme found was that users were calling up the Customer Service Centre (CSC) to correct the engraving name they had filled in the form.
The Discovery
What I found
I was amazed at some of the issues I uncovered, especially as some seemed to be really obvious. It became clear that users just expected certain tasks to just work and not require too much thought and effort.
“...even small interactions can draw a process to a standstill if implemented improperly.”
I observed that overloading the user with too much information and not using the right design patterns encourages user to make errors, which could also lead distressed or annoyed users.
How Might We (HMW)
Using the issues and pain paints that were discovered we converted them into “How Might We” statements. This helped to positively re-frame the problems/pain points before jumping to solutions.
Ideating
Sketching
Having these HMW statements helped focus on the problems whilst sketching out potential ideas and solutions. We then discussed the different design approaches and their complexities which helped us refine our ideas and understand what their technically feasability.
We agreed that adding the possibility of engraving 2 dates with a name would meet an important user need and also reduce calls and save time for our Customer Service team. However due to the complexity of this feature and the time we had available we decided to tackle this in the next sprint as the next priority piece of work.
(anchor link to 2 dates part maybe)
We plotted the HMW statements on an impact/effort matrix to decide what problems to prioritise first based on the impact it would have on our users against the effort it would take for us to deliver.
The redesign
Unambiguous and supportive
Our approach was to remove confusion and reduce anxiety when donating through our online products and services. By using the correct design patterns it provides a more efficient and supportive task completion experience.
Date-input
For the date entry field we went with a simple text input field with individual date, month and year input boxes because from our insights we knew that the majority of users where entering birth dates or dates far away in the past. To prevent errors and reduce frustration we removed the need to enter fullstops as part of the date and included individual labels per part of the date.
FAQs & Engraving
The questions and engraving guidelines were re-worked to be more helpful and reduce cognitive load for the donor when completing the engraving process. General information from the FAQs was added to more relevant parts throughout the journey whilst a separate refreshed engraving guidelines section was introduced.
Checking details on the summary page
Knowing that the Customer Service Center were receiving calls to correct donor engravings the summary page as added as a checkpoint for the user to carefully check the details they had entered.
The impact
Conclusion
The redesign of key parts of the experience has had an overall positive impact. From observing live recordings, our Donors are struggling less when entering a date and calls to our customer service center about correcting engraving mistakes has reduced. However, since launch we have observed that there still seems to be challenges when donors are entering the name they want to engrave.
To date (March 2020) it has achieved 21k engravings, raising £850k