Improving the Boiler Buying experience

Boiler Guide launched in 2007 as “the go to place for UK consumers to source free no obligation quotes for a replacement boiler”, but in 2018 we decided to give it a modern UX/UI facelift.

Boiler Guides main aim has been to generate homeowner leads for a nationwide network of heating engineers. This has historically been done using traditional text field based forms.

Boiler Guide has seen a couple of iterations before my time at Holmes Media and traffic has remained pretty consistent, but since a number of marketing initiatives and now a full redesign of both UX & UI, traffic has tripled (occasionally quadrupling) and lead generation has become more focused with higher quality leads being generated.

The relaunched Boiler Guide website
App concept

Identifying site issues

  • Lead forms are daunting
    This is due to a large amount of questions using drop-downs and radio lists.
  • Enquirers very quickly see or reach personal data fields
    This results in a large drop-off in leads being submitted.
  • Weak messaging as to the services Boiler Guide offers
    Other than getting a new boiler quote, users were unaware of the other services Boiler Guide offered.
  • Poor navigation cues across the site
    Witnessing high bounce rates as users land on the site with little idea of what to do or where to go.
  • Poor brand identity
    Visually Boiler Guide was a mix of styles implemented over a number of years. This led to a poor visual consistency across the site with users unsure whether they were in the correct areas.
  • Limited tracking
    Hard to understand how users were using the site

UX/UI Actions undertaken

Move to a visual lead generation form

The site previously used 2 forms, a multi-step form and a single long form, both filled with multiple text fields, drop-downs, radios & checkboxes.
To replace this I prototyped a visual form where we changed drop-down and radio form answers into buttons with icons. These are much easier for users to interpret, are more engaging and work across both traditional desktop/laptop devices and mobile devices.
Once designed & deployed, we found that users were more likely to progress through these sections of the journey and at a greater speed too. Users were also more engaged by the time they reached any questions asking for personal information. This resulted in an increase in leads submitted and overall conversion rate.

Moving to an icon based form increased engagement and conversions
Moving to an icon based form increased engagement and conversions

Setup event tracking across the site

Using a combination of Google Tag Manager & Google Analytics, I created events for all major touch points across the site to see what users were clicking and the journeys they had through the site. These were also linked up to Goals so we could identify which journeys resulted in leads being submitted.

Simplified the navigation

The old site had up to 6 poorly named main menu items, large amount of intro copy, plus 8+ different navigation call to actions across the homepage. For any user landing on the homepage it was confusing as to what to do, or what Boiler Guide did.
In order to improve navigation, understanding and engagement the main menu was reduced to 4 items with more descriptive names and the homepage had a complete structure overhaul. This was structured in the following way:

  • Hero space with main call to action
  • 3 step introduction as to what Boiler Guide is and how it works
  • Supporting reviews of the service and the network of installers
  • Navigation banner showing the 4 main services Boiler Guide offered
  • Links to Boiler Guides library of guides & advice
Cleaner, simpler site wide navigation banner
Cleaner, simpler site wide navigation banner

Once the relaunch was complete we very quickly saw a dramatic change in the way visitors used the site. Where we once had a very high bounce rate and low rates of consumed pages, we suddenly saw bounce rates decrease and the number of pages visitors were consuming increase. We did see a decrease in New Boiler enquiries, however there was suddenly an increase in Boiler Repair enquiries as users could now easily see it was a service that was offered due to better navigation and site wide call to actions.
Due to the additional event tracking, we also saw a demand for the Boiler Comparison tool on the site, which functionally hadn’t changed with the relaunch. This has since led to a UX project to improve this tool.

Full brand and style guide produced

There had never been a brand/style guide produced for Boiler Guide. This had led to a lack of visual consistency across the site and its marketing efforts. A full style guide was produced and adhered too. Now where ever a visitor is on the site, they always know they’re in the right place and any external sign-posts use the same styles and imagery meaning incoming traffic lands on pages that match the asset a visitor has clicked.

Boiler Guide now has its own identity, including illustration style
Boiler Guide now has its own identity, including illustration style

Conclusion

A lot of lessons were learnt throughout the whole redesign of Boiler Guide. Not everything worked as expected, but using a mix of event tracking and Google Optimise experiments I was able to very quickly fine tune certain elements to improve performance. Boiler Guide is now in a much better position to grow with the increasing market it services.

Visit Boiler Guide