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 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.
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’.
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.
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.
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.
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.
Meet the Heart Foundation Team
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.
As Delivery Director, Jase is accountable for successful project delivery, with a keen eye on team satisfaction and client delight.
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.
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.
Senior Front End Developer
Sarah is Luminary's longest-serving front end developer.
Solutions Architect/Team Lead
Thai is like the Swiss Army Knife of developers - flexible, adaptable and always dependable.
Technical Director, Umbraco MVP
As Technical Director, Emmanuel works closely with our clients while providing leadership and mentoring to the development team.
Front End Developer
Jo is passionate about all things front end.
Front End Architect/Team Lead
As Front End Architect/Team Lead, Drew's focus is on supporting and mentoring our front end development team.
Andik is a .NET developer with experience in both the Kentico Xperience and Sitecore CMS platforms.
Abraham is an ISTQB Certified quality analyst with a background as a full stack developer.
Want more? Here are some other examples of our work that you might be interested in.