BHF UX Review

UX Review.....

As the UX/UI Lead at the British Heart Foundation, I had the opportunity to collaborate closely with an external design agency called Dept. Together, we embarked on a journey to enhance the digital experience for BHF users and create a visually appealing, intuitive, and accessible website. With a shared goal in mind, we formed a seamless partnership, leveraging each other's expertise to craft a website that not only showcased the organisation's mission but also prioritized user needs and engagement. Through open communication, brainstorming sessions, and iterative design processes, we worked hand in hand, ensuring that every element of the website reflected the British Heart Foundation's values and empowered users to navigate, interact, and contribute effortlessly. The collaboration with the external agency proved to be instrumental in delivering a remarkable user experience that fostered connections, raised awareness, and inspired support for the Foundation's lifesaving work.

THE PROBLEM

The current navigation across the site is not encouraging users to explore
The menu design and IA structure causes confusion
On-page components don’t adequately promote onward journeys
Cross Sell journeys need to be considered after exiting forms such as the donation form
Users struggle with the current menu presentation on mobile devices
Some pages have poor readability and hierarchy of information
There is inconsistencies with colour and calls to action
There is a failures to meet accessibility standards
Users don’t understand the full scope of what the BHF do
The Item donation and furniture collection process cause a lot of issues for both customers and store staff

British Heart Foundation aims to enhance the overall user experience across the bhf.org.uk website, to “make it easy” for customers to engage, donate, book furniture collections, buy products and access support around the British Heart Foundation charity

RESEARCH

Approach

Between May and September 2022, External design agency DEPT undertook a series of research and discovery activities to understand the current user experience across the British Heart Foundation website. With the support of the BHF UX Team they carried out Workshops, Interviews, Surveys and Analytic & Data Reviews.

PLEASE NOTE: I was not involved with gathering the insights for Depts discovery phase, I have included their findings in my portfolio for reference purpose only....Here is a just a small glimpse of the insights that were gathered.

Customer Interviews

Dept spoke to participants who about their experiences with the BHF and the website. Some customers were also asked to test a key user journeys on the live website and asked to carry out primary tasks such as booking collections and searching for heart conditions.

Customer Surveys

Dept ran a customer survey with the British Heart Foundation’s audience panel and had 287 responses

From the feedback we saw that the most common answer to peoples best experience of the BHF and the site is the advice, support and information it provides. With some also mentioning the the research and and funding it also supports. The worst thing that was commonly mentioned is how hard specific information is to find when navigating through the site

BHF Store Visits

Over two days, Dept visited 4 different British Heart Foundation stores across Manchester. They spoke to a range of staff, volunteers, and customers in each store to get an understanding of the following:

What do they know/understand about the British Heart Foundation
Which products do they interact with, and in what ways
What was their motivation for choosing to interact with the British Heart Foundation
What are their thoughts on the website

Key Findings:

Very few in store customers had visited the website
Most people seemed very aware of the British Heart Foundation as an organisation
Many customers weren’t fully aware of the extent of the work BHF do
Most people said they would like to support in anyway as it makes them feel good
A high proportion of people spoken to either have a heart condition themselves or have a family member/close connection who has/had one

Google Analytics

Key findings:

The journeys with the largest volumes of traffic are Heart Matters and information & support.
The Heart Matters and information support journeys don’t attract much traﬃc from the homepage, with users preferring to come from Google to land on article pages.
The Donate money journey has the largest drop oﬀ at the who are you remembering and the gift aid stages showing these are perhaps confusing to the user.
18% of users in the donate items journey leave on the collection form to read about items BHF can’t sell. This is showing a disconnect between the purpose of donating items and users perspective.
Events have good engagement in terms of ﬁltering but few users click through to individual event pages. This can show that the events that you can sign up for aren’t what the users are expecting.

ANALYSIS

Amends and improvements

After analysing Depts insights from the discovery phase, we broke down key comments and observations into Good themes and Bad themes and also noted down any ideas that we had gained for these themes to help make improvements.

Customer Journey Mapping

In order for the BHF UX Team and Dept to align with a shared vision of the user types and their current experiences, we worked in collaboration to create Journey Maps using the gathered insights. Post it notes were grouped according to Awareness, Consideration, Engagement and Loyaty

Following the grouping exercise we created Journey maps that we could present back to the Senior Stakeholders. Here are just a few examples for Donating Money & items and searching for Heart Health Information

Research Conclusions

The current navigation across the site is not encouraging users to explore. The menu design and IA structure causes confusion and the on-page components don’t adequately promote onward journeys. We should also consider the journeys after exiting forms such as the donation form
Tree testing results show that the language used for some of the menu items and the hierarchy of how pages are organised seems to be unclear to users
Analytics insights show that most site traﬃc comes direct from search engines but once on the site, users don’t explore beyond a limited number of pages
Surveys told us that users struggle with the current menu presentation on mobile devices and finding where certain information is located across the site
There are issues with the site’s search functionality such as articles targeted towards a professional audience not being clearly signposted and misspellings leading to users not ﬁnding what they’re looking for
Users also found some pages text heavy and that the size ratio of images to text was unbalanced, both of these factors making the site harder to read
Most of the pain points and areas for improvement were in the furniture collection journey, this also accounted for the highest volume of responses
Most commonly suggested improvements were around furniture donation, requests for speciﬁc types of information, and better help and support
Item Donation accounted for a large amount of the data from our research and causes pain for both customers, customer services and store staff
The journeys with the largest volumes of traffic are Heart Matters and information & support.
The Heart Matters and information support journeys don’t attract much traffic from the homepage, with users preferring to come from Google to land on article pages.
The Donate money journey has the largest drop off at the who are you remembering and the gift aid stages showing these are perhaps confusing to the user.
•18% of users in the donate items journey leave on the collection form to read about items BHF can’t sell. This is showing a disconnect between the purpose of donating items and users perspective.
Events have good engagement in terms of filtering but few users click through to individual event pages. This can show that the events that you can sign up for aren’t what the users are expecting.
Item donation and furniture collection is one of the largest sources of traffic to the site
Medical and lifestyle information (including Heart Matters) is a key driver to the site

Following numerous discussions with the Product Owner, Stakeholders and Development teams, there was a general consensus that the following requirements would enhance the User Experience of the BHF website

A new Information Architecture as users currently find it challenging to locate the information they need or navigate through different sections.
The Home page needs to contain a clear and compelling call-to-action, concise information about their mission and impact, and intuitive navigation to key resources and donation options.
The websites needs to be optimised for various screen sizes and devices as it currently does not adapt well to different mobile devices which is negatively impacting user experience and accessibility
Enhance the User Experience by making is easier for customers to engage, donate, book furniture collections, buy products and access support by improving; Navigation and AI Experience, Cross-Sell Opportunities, Optimise key user journeys and Include personalised dynamic and relevant content.

SOLUTION DESIGN

Improving the Navigation and Information Architecture

The goal was to improve the Information Architecture and navigation menu of the British Heart Foundation website, considering the following brief recommendations:

Prioritise and structure content based on user goals and expectations,
Streamline the navigation menu by reducing the number of top-level categories and using clear, concise labels.
Establish a clear hierarchy within the menu to reflect the importance and relationships between different sections of the website.
Use consistent and familiar terminology in menu labels to ensure users can easily understand and navigate through the website.
Ensure the search bar is prominently placed and provides relevant results based on keywords and user intent.
Optimise the information architecture and navigation menu for mobile devices. Implement responsive design principles to ensure a seamless experience across different screen sizes.

Utility Navigation

Global Navigation

Main Navigation (Categories)

Footer

UX Wireframes and UI Designs

We collaborated with Dept to create Wireframes based on research conclusions. The wireframes were built using a combination of components that already existed within the BHF Figma Design System and six new components we build together.

UI then transformed the wireframes into visually appealing and engaging interfaces that aligned with the brand and overall design direction. Working in collaboration with Dept I guided their UI Designer to use the most suitable branding and colour to bring the wireframes to life following this process.

New Components added to BHF Design System

Article Hero

Heart Conditions Hero

News Feature

Author Bio

News Listing

Dictionary

Iterating and refining: I collaborated with the Digital Director and senior Stakeholders to gather feedback and make necessary revisions. This iterative process ensured that the UI design aligned with the overall goals of the project and met the needs of the users.

Understanding the brand: I worked with the UI designer to familiarise them with the brand's guidelines, including the visual identity, brand colours, typography, and any specific design elements that needed to be incorporated. This ensures that the UI design stays consistent with the brand's image.

Creating a visual hierarchy: We then evaluated the wireframes and determined the visual hierarchy of the elements. We considered the importance and relationship between different elements and how they should be visually emphasised or emphasised.

Choosing colours: Based on the brand's colour palette, we selected appropriate colours to represent different elements within the interface. We considered factors such as colour psychology, accessibility, and the desired emotional impact. The chosen colours needed to create a cohesive and visually pleasing experience.

Applying typography: We selected appropriate fonts and typography styles that align with the brand's guidelines and enhance readability. We considered factors such as legibility, hierarchy, and consistency across different screen sizes and devices.

Enhancing visuals: The UI designer added visual elements such as icons, illustrations, and imagery to the wireframes, keeping the brand's style in mind. These elements helped communicate information, provide visual interest, and create a cohesive look and feel.

Creating design specifications: Once the UI designs were finalised, I worked with the UI designer and our internal BHF Product Owners to create a detailed design specifications and documentation for developers. These specifications outlined the visual styles, dimensions, interactions, and any other details needed to implement

We gathered and organised all the necessary design assets, such as icons, images, fonts, and colour codes and added them to the existing Design System which was shared with the BHF development team.

Senior Stakeholder Engagement and Final Sign Off

Once the BHF UX Team and our third party design agency had agreed and finalised all the UX and UI designs, it was time to present the final designs to the BHF's Chief Marking Officer (Claire Sadler) and the Digital Marketing and IT director. I provided a clear walkthrough of the most common scenarios along with new designs for the Home page and Navigation menu. Timelines and implementation strategies were then discussed and agreed upon to conclude the meeting.

Handover to BHF Development Team

Design handoff meeting: I arranged meetings with the development team to present and discuss the designs. This meeting provided an opportunity for both teams to clarify any questions, address potential challenges, and align their understanding of the project requirements,

Interactive prototypes: I shared these with the development team. The prototypes allowed developers to explore the user interactions and animations intended for the final product.

Design annotations: I annotated the visual designs with additional notes and specifications. These annotations provided explicit instructions on design elements, dimensions, behaviours, and any specific guidelines for implementation.

Collaboration tools: Figma and Confluence was used to facilitate the handoff process. These tools allow us to share the designs and assets with the development team, provide access to design specifications, and allow for easy collaboration and feedback exchange.

Ongoing support: After the initial handoff, the design team is available to assist the development team with any design-related questions, clarifications, or refinements that may arise during the implementation phase. This collaborative approach ensures a cohesive and accurate translation of the designs into the final product.

By following these steps, the UX design team can effectively communicate their design vision, specifications, and requirements to the development team, enabling a successful transition from design to development.

(+44) 7967 889281