Heart Foundation case study hero image

Heart Foundation

Luminary starfield pattern

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.

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

3000+

Pages on the original site

4

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

9

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’. 

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.

- Troy Muir, Director, Digital and Direct Channels, Heart Foundation

Liam Thomas

Liam Thomas

Engagement Director

With more than 20 years’ experience in technology consulting – including seven at the helm of a prominent digital agency – Liam brings a wealth of knowledge to his role as Engagement Director.

Jase Watson

Jase Watson

Delivery Director

As Delivery Director, Jase is accountable for successful project delivery, with a keen eye on team satisfaction and client delight.

Kim Dezeen

Kim Dezen

Senior Digital Producer

A veteran of digital, Kim spent more than 12 years working as both a back-end and front-end developer before crossing over into project management.

Emma Andrews

Emma Andrews

Strategy Director

As a Brand and Digital Strategist, Emma's primary task is to ask lots of questions of our clients and transform the responses into a blueprint for market domination.

Sarah Dam

Sarah Dam

Front End Developer

Sarah is Luminary's longest-serving front end developer.

Thai Tran

Thai Tran

Web Developer

Thai is like the Swiss Army Knife of developers - flexible, adaptable and always dependable.

Emmanual Tissera

Emmanuel Tissera

Technical Lead, Umbraco MVP

As Technical Lead, Emmanuel works closely with our clients while providing leadership and mentoring to the development team.

Johannes

Johannes Untoro

Front End Developer

Jo is a Bali-based developer, passionate about all things front end.

Drew Foster

Drew Foster

FED Tech Lead

As our FED Tech Lead, Drew's focus is on supporting and mentoring our front end development team.

Andik Subiantoro

Andik Subiantoro

Web Developer

Andik is a Bali-based .NET developer with experience in both the Kentico and Sitecore CMS platforms.

Abraham Yuwono

Abraham Yuwono

Quality Analyst

Abraham is a quality analyst with a background as a full stack developer.