Craft CMS Website for leading UK supplier

HES

A succinct user journey to satisfy customer needs

Client

HES

Services
WORK

2022

HES Image 1 Mobile v2

ABOUT

As a leading UK supplier of high-quality hydraulic, pneumatic and electric tool brands, HES has built a first-class reputation with a single goal: ensuring all of its customers are satisfied from start to finish.

They knew their website was outdated and were looking for a unified approach for both their website and customer journey online. As a distributor of tools, they wanted to make it easier for their customers to navigate their products and draw attention to their service offerings.

When initially engaging with Abstrakt, we talked to HES about Craft CMS and its flexibility when creating a bespoke website and user journey for their customers and offering them much more control over their website and content in the future.

HES font

PLANNING & UX

We invited the HES team to a collaborative workshop to better understand the business, the project's purpose, their customers, the pain points they faced, and their desired outcomes.

The main challenge with the website was to rearchitect the convoluted product journey. HES is renowned for its solution-selling, knowledge, expertise and support, but products were not easy to discover, overly complicated and alongside a dated aesthetic, made for an unappealing user journey. To rearchitect the product journey, we created a new sitemap, which allowed for alternative routes for a user, such as to filter through a brand and its products or categories and then products; this simplified the whole process and opened up the opportunity for cross-selling.

Secondly, instead of gated content and PDFs, each product was given a page to make it easy for customers to find product information and improve HES’s discoverability through search engines to gain new customers organically.

During the planning phases, we reworked the entire URL structure of the website to work alongside the sitemap. This stripped out the bloated URLs to ensure that they were optimised for search but were also more intuitive and streamlined. This would later feed into a 301 migration strategy to see all previous URLs redirect for a smooth user experience. A component plan was created for the whole website so that HES could work through a content-first approach to move into the design phase.


0 / 25 / 112
#001970


0 / 42 / 155
#002A9B


0 / 50 / 176
#0032B0


229 / 233 / 254
#E5E9FE


243 / 245 / 255
#F3F5FF


255 / 255 / 255
#FFFFFF

HES gradient

DESIGN

During the design phase, we created a UI Kit ahead of content to set a framework and stylisation for elements such as buttons, category tagging, forms, digital branding and typography.

This made for a smoother design process and ease of sign-off for HES, as content could be designed for once written. A strong call to action strategy was woven throughout the design, ensuring clarity of the overall offering, ease of engagement, and an accessible, clean, and modern interface for both desktop and mobile.

We introduced a resource hub as a useful repository with accurate, up-to-date information that was easy to find and consume across all devices and further fuelled position in the SERPs.

HES Abstrakt Grid Template 10
HES Abstrakt Grid Template 7

DEVELOPMENT

A fluid UI was developed to improve the user experience with interactive components, such as sliders and off-grid elements, like floating imagery.

As we built the website from scratch using Craft CMS, it is entirely bespoke to HES, and we were able to introduce Craft plugins such as Sprig, which allows for seamless loading, both quickly and less prone to errors.

In the backend, content has been ordered intuitively for content managers and ensuring that most content and components are editable via the CMS so that the HES team can manage their content without further support from development.

The structure of the website has been built with SEO in mind, too, with heading structures, SEOmatic to help facilitate modern SEO tactics and further improve the visibility of the website in SERPs.

HES Abstrakt Grid Template 2
HES Abstrakt Grid Template 6

The Abstrakt team has been brilliant from initial contact with Lauren through the development phases and, finally, the launch of the new website. They understood our requirements for a fresh modern design that clearly communicates the company's capabilities, values and vision and delivered exactly what we needed - a visually impactive website highlighting the HES brand and offering a streamlined journey for the user.

Andrea D’souza - Group Marketing Manager - HES

TM next project

Next project

Taylor Maxwell