Heffernan Utilities: visual identity and website for a multi-utility contractor

Overview

Multi-utility contractor Heffernan Utilities provide Water, Gas and Electricity services across England.

Over the years, the business has built a strong reputation among existing clients. However, their existing identity – and off the peg Wordpress theme – failed to convey the value of their offering, their experience and expertise.

During the first Covid-19 lockdown, the Heffernan Utilities team reached out with an aim to move the business forward and win larger contracts.

Key objectives

Project objectives were defined as:

1. Create a respectable visual identity, suitable for a variety of applications, both online and offline.

2. Design and build a professional website to clearly present Heffernan Utilities core offer and demonstrate credibility.

3. Create documentation and marketing material, including a website management guide, brand guidelines, business card templates and a bi-fold brochure for prospective clients.

Visual Identity

Part of the identity project involved changing the brand name from ‘LJH Utilities’ to ‘Heffernan Utilities’. However, there were concerns this change might confuse existing clients.

To help prevent this we began with the existing colour palette. Although it felt flat and uninspiring, we agreed the colours were heading in the right direction. With a few tweaks we were able to develop a vibrant palette, which remained familiar to existing clients and well suited to the industry.

By using an L and J in the logomark – to form the upper stems and cross bar of the H – we made a subtle nod to the original business name, without having to spell it out in the logotype.

We settled on Source Sans Pro for the lead typeface. Primarily for it’s flexibility in weights and styles, but also for it’s familiarity. It’s a solid workhorse, so was ideal for our needs. Source Code Pro is used sparingly, as the secondary typeface.

Website design

With a clear idea of the content, a site map was created to plan website structure and visualise a visitors journey through the website.

With most site visitors looking for more information about the business, it made sense to create a dedicated landing page for each service. This also made sense from an SEO perspective.

A top level work section allows content editors to publish case studies of recent projects and testimonials from previous clients. This is designed to build confidence and give potential clients an idea of business capabilities.

An accreditations page shows visitors the business is recognised within the industry and working to industry standards.

Wireframing

Using the site map as a guide, we quickly built out low fidelity mockups to translate the site map into page layouts, without getting hung up on the details.

A modular homepage was designed to allow the team to outline business capabilities and create promo sections to highlight the value proposition of the business.

Hi-fidelity prototyping

Fleshing out the mockups helped visualise the final design, colour palette and imagery, as it would appear on the finished website. Making the prototype clickable allowed us to navigate the pages, test flows and get a feel for the final website. From here we could iron out any issues before development stage.

Website development

It was expected updates to the website would be infrequent. Therefore, we agreed the website should be as easy to manage as possible and cost effective to maintain.

We decided the best approach was to move away from Wordpress, and instead opt for a more robust static page approach.

Hugo is the perfect tool for a content based marketing website like this. It’s lightweight, fast and reliable, and requires almost zero maintenance. No plugins to manage or versions to update. It just works, and will continue to do so.

Forestry was our choice for CMS. It’s as simple as it gets, allowing content editors to commit markdown files directly to a Git repository, via a familiar content management interface.

Netlify allows us to host the website for free and keep ongoing costs to an absolute minimum. Netlify handles the CDN, deployment and contact form submissions – which are then sent to the team by email.

Cloudinary takes care of media content, helping us to deliver optimised images at the correct size for the context. For a website of this size we stay well within Cloudinary’s free tier.

Performance optimisations

I was able to make a number of performance optimisations to ensure the website loads as fast as possible, regardless of the device used or quality of internet connection.

These optimisations included:

• Self-hosting webfonts
• Removing third-party scripts
• Replacing jQuery with plain JavaScript
• Delivering responsive images to ensure optimised image sizes
• Serving next-gen image formats (AVIF & WebP)
• Using image placeholder to minimise cumulative layout shift
• Using lazy-loading to defer images outside of the viewport

Testing the updated website using Google’s Lighthouse audit tool shows over a 30% improvement in overall performance.

Guidelines

One of the project requirements was to provide direction on both how to use the brand deliverables, and how to manage website content.

Brand guide

I built a brand guidelines microsite, again using Hugo, to offer guidance about brand colours, typography and logo use. The guidelines also ensure brand deliverables are easy to access and download.

CMS Guide

Using Notion, I wrote a short CMS guide to help onboard editors with website management and explain how to use Forestry to publish content.

Print material

To complete the project I helped create business cards templates and a bi-fold brochure to hand out to prospective clients.

I’m not a print designer by any stretch, but when working with small teams I’ll often help create basic deliverables for print. This saved the team the hassle of havng to bring another designer on board.

Summary

Within 4 weeks we were able to complete the identity work and design and code the website, from scratch. Taking Heffernan utilities web presence from a generic unbranded Wordpress theme to a recognisable multi-utility brand.

By choosing a simple static site approach and optimising the website for Google’s Core Web Vitals, we were able to improve website performance and boost search ranking – all whilst keeping ongoing costs to a minimum.

At this point the work has only just begun.

In order to win new clients it’s vital to drive traffic to the website. This can be done over time via a well defined content markerting and social media strategy. However, in the short term, the best option for the business might well be to focus on targeted marketing using Adwords.

Other easy wins include setting up a Business Profile on Google or integrating live-chat software to engage with visitors, gather feedback and offer support.

If you need help with anything you see here, then please get in touch.

Visit the live site ↓