Man and woman at the beach

Heart Foundation

The Heart Foundation took a leap of faith with its website redevelopment, doing away with traditional website navigation features to create a highly personalised, user-friendly site presented in the form of a single page application.

Client:

Heart Foundation

Tagged:

Charities & not for profit

Platform:

Who We Helped:

The challenge

The Heart Foundation is an organisation that prides itself on being the pre-eminent authority on heart health, providing accurate, evidence-based information for both professionals and members of the public. With over 3000 pages, its website had become very difficult for users to find their way around. Extra layers of navigation – designed to alleviate this problem – had only made it worse, adding to the site’s overall complexity. Nearly half of the site’s visitors were not making it past the home page, generally because they were not able to quickly find what they were looking for. User testing conducted by the Heart Foundation’s behavioural design partner, Neoteny, confirmed that users were being overwhelmed with information. One research participant even went as far as describing the site as “something a robot would eat - not something a human would read”. 

In late 2018, the board agreed to a complete overhaul of the site. The primary objectives were to make it more user-friendly, to provide visitors with a more contextually relevant experience, and to optimise for key conversion activities such as becoming a donor or signing up for emails.

Screenshot of the selector

Quick stats

Pages on the original site

Organisations involved (Heart Foundation, Neo, Luminary, Tealium)

Months from kick-off to delivery

What we did 

Throughout the project, Luminary worked closely with Neoteny (Neo), who had laid the foundations for the site’s implementation through the discovery and design phases.   

The build phase began with Luminary assisting the Heart Foundation to select a Web Content Management (WCM) system that would meet its need for a highly personalised, future-ready website. Several platforms were evaluated against the Foundation’s budget and requirements, with Kentico ultimately being selected.

A new world of navigation 

Rather than attempting to resolve the issues with the site’s navigation and information architecture, Neo recommended eschewing traditional navigation altogether and creating the site as a single page application. This meant getting rid of mega menus, breadcrumbs and even pages, and replacing them with a single ‘landing space’ populated with a curated selection of content ‘tiles’. 

“There’s a wonderful sense of simplicity in a single page application. I believe users appreciate being asked who they are and what they are interested in rather than forcing them to understand and come to terms with the navigation and information architecture your business has determined for them.” 
– Troy Muir, Director, Digital and Direct Channels, Heart Foundation

Neo also designed a personalisation strategy, which we took forward into execution. Infinite content personalisation drives the selection of content tiles based on the user’s self-identification of their role and reason for visiting, and then their on-site behaviours. Behavioural data comes from multiple sources including: donation forms, calculators, chatbots and the CRM. As the site learns about the user, increasingly tailored content is presented in real time, in much the same way as the Facebook newsfeed. 

Even activities that happen offline – such as attending an event or making a donation in person – are used to further drive personalisation on the site. This is achieved via integration with Tealium, a single-view customer data platform (CDP) that synchronises online and offline data and feeds it back to Kentico via a web hook.

As the user clicks on a ‘tile’, it opens up within the landing space, allowing the user to close out of it and return to where they were without having to navigate via forward and back arrows. The more the user interacts with the site, the more attuned it becomes to their interests and preferences.

Video URL: https://www.youtube.com/embed/DKXLEzEab30

Intelligent search 

With no traditional navigation or listing pages, having a powerful search functionality was a key requirement for the site. To achieve this, Neo designed a search strategy to enable multiple search types, including natural language, feature, subjective and relational. Luminary took this thinking, and through an Azure search-driven extension, created the search functionality to support a range of advanced features, including slang, synonym, misspellings and text weight scoring. The search functionality was highly tailored and configured around the specific content types offered by the Heart Foundation, with special consideration given to the segmentation of search results based on the user’s persona. 

The goal was to provide a range of smart features while still keeping the interface straightforward and easy to use. The result is a search functionality that performs more like a search engine than a typical site site search tool.

Optimising conversions

One of the key objectives of the project was to optimise the site for measurable actions such as becoming a donor, signing up for emails, or asking a question. In keeping with the shift away from traditional menu-style navigation, Neo designed the concept of a Floating Action Button (FAB). The FAB is an ever-present interface feature that keeps the most important calls to action within the main focal area of the site throughout the user’s journey, rather than burying them away in a menu.


Video URL: https://www.youtube.com/embed/UDmBRW8yxKE

Result

The Heart Foundation’s website redevelopment project was delivered on time and on budget, to a high level of client satisfaction. With four organisations involved in bringing this project to life – between the Heart Foundation, Luminary, Neo and Tealium – an agile approach was critical in keeping things on track. Daily standups ensured that the key project stakeholders were able to continually validate the direction and could be part of an instant and open discussion whenever a modification was required. The transparency and immediacy of feedback with the agile model not only fostered a strong sense of unity among the teams, it was also a crucial aspect of being able to successfully deliver the project within a relatively short time frame.

The site has been extremely well received with many users providing feedback that it is cleaner, easier to read, and far more user-friendly.  


From the very beginning of the engagement, there was a sense of being in very experienced, highly competent, innovative and creative hands. We knew that we had a significant challenge ahead of us, and success would require absolute professionalism, patience and exceptional craftsmanship – Luminary brought all of the above in spades. Quite simply I don’t believe we could have created this world class product without them.

Keep Reading

Want more? Here are some other examples of our work that you might be interested in.