The Team

Co-located: Scrum Master /  Front End Developer
Remote: Product Owner / Back End Developer x2

Overview

Homeserve USA sells insurance plans to cover the utilities in your home: plumbing, electrical, and heating & ventilation. They partner with local utility providers and the majority of their business is acquired via a mail-to-web model, through zip-code specific marketing collateral distributed with a customer’s bill.

The Problem

The US version of the website was to be refreshed following a rebranding exercise by an external agency, who had produced a global style guide. The agency was only contracted for print marketing in the UK, so the website was being produced internally, with another agency handling coding. As a business that had grown through acquisition rather than organic customer growth, each country wanted a design that was distinct but still felt like part of the Homeserve brand. This exercise coincided with a move to a component-based design to be built in React.

The site should show generic product information, with plans specific to the local utility partner to be shown when the customer enters either a marketing short-code or a Zip-code.

Scope & Constraints

Key decision-makers were based in the US, so they were only available for live video-conferencing for a few hours each day. 

There was some opposition to the project being run from a newly created digital hub located in the UK, whereas previously the work had been produced locally in the US and they were used to being able to make ad-hoc changes on the fly. The UK team were also on the back foot when I joined due to delays caused by the agency handling development.

There were several personnel changes during the project, and the UX designer also left and was not replaced, so I assumed their responsibilities. 

The build would follow a component-based approach using Sitecore for delivery.

Atomic Design Principles

The site would use a component-based design, delivered via the Sitecore Content Management System to facilitate multivariate testing. I used the brand guidelines to create the UI following Atomic Design principles to maintain consistency throughout. 

Atoms:

These are the smallest building blocks of a site – fonts, colours, an image, html link or other elements such as form labels, an input or a button. 

Molecules:

These are groups of atoms. A label, input field and a button together create a search form. 

Organisms:

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. A logo, some HTML links and a search form becomes a website header, for example. 

Problem:

Customers are easier to retain when they have more than one service. Drive loyalty by highlighting relevant products in the “My Account” pages.

Solution:

I created 4 variants to test different scenarios: Banners with images for extra standout, text only banners, and also versions showing multiple products with and without images.

Room for improvement:

Ideally I would prefer to change only one element per variant during testing to maintain hygiene, otherwise it’s impossible to tell which change affected results.

Single product banner with text only:

Multiple product banner with text only:

New product listing card

Using the right tools

The workflow was heavily invested in using  Photoshop. Naturally I would prefer Sketch or Figma as they are immeasurably better for creating component-based designs and integrate well with other apps to streamline the handoff to developers.

Unfortunately, the project had recently moved all development in-house and with several design projects running there was no appetite for more big changes.

Fight the good fight, but understand you’re on the same team