E-commerce website redesign

Visual refresh following a company-wide rebranding exercise, coinciding with a move to a component-based rebuild. 

 

My Role

UI Design  /  UX Design

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.

Users and Audience

Ben

YOUNG PROFESSIONAL
Career focused, working long hours away from home

Goals

  • Find a product that covers everything
  • Doesn’t want to micro-manage the process if he needs something fixed

“I’m busy and work long hours, I don’t have time to source contractors or do the work myself”

Isaac and Erin

RETIRED COUPLE
Spend most of their time at home or visiting friends and relatives

Goals

  • Keep the heating on in winter
  • Avoid extortionately high repair costs
  • keep premiums low 

“Losing heating in Winter is a health risk for us – we need faults fixing fast”

Paul & Maya

YOUNG COUPLE IN FIRST HOME
Renovating their home takes the majority of their spare cash

Goals

  • Avoid costly repairs
  • Keep premiums low

“This place is a fixer-upper – we need to be prepared for the inevitable”

Process

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. 

Example Pages

UX Challenge 1

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 image:

Single product banner with text only:

Multiple product banners with image:

Multiple product banner with text only:

UX Challenge 2

Problem:

The product listing cards were very deep and resulted in a lot of scrolling. Bad on desktop, terrible on mobile.

Solution:

Showing the product description and icon on the same line help reduce the height of the card.

With only one product per type, we didn’t feel it was necessary to list all the features on the card – a pattern more often seen on product comparison pages.

Description copy was made lighter so it didn’t compete for attention with the product title, price or “Add to Cart” button.

Room for improvement:

In hindsight, I’d increase the weight of the blue product title, and scale up the button text.

OPTIONS FOR TEST VARIANTS:
1. Replace the intro paragraph with a few product benefits

2. Remove “this plan includes” to reduce the card height and replace with a “more info” link, leading to the product detail page

3. Add a logo for the partner provider to work as a trust indicator

4. Run variants highlighting a key product benefit to determine which one converts best

5. Re-order the product listing page to highlight seasonal priorities first e.g. air conditioning in summer, heating in winter.

Old product listing card

New product listing card

Outcome and Lessons Learned

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

I understood I’d be on the back foot with key decision-makers in the US. The project was late due to issues with an external agency before I joined the team. It was tough getting changes approved – even using established, successful design patterns backed by studies from industry leaders like the Baymard Institute. There was an adversarial culture when I started.
 
Empathy is a critical skill for UX designers. When you’re facing objections it’s important to understand you’re on the same side. I realised I was working with experienced people who had a team of  “experts” foisted upon them. I’d been rubbing it in by quoting even more experts to make my case. My decision-makers felt like their expertise was being disregarded. They were invested in the results but not the process. 
 
To counter this, I made time to review user stories with them, making sure we were on the same page. It was important they had confidence I understood their goals. When presenting, I used deliberate, collaborative language, quoting input from their team. I was clear to reference success criteria from user stories we developed together. I still used well-established design patterns and UX principles, but framed as relating to their business and goals instead of citing external examples.
 
Crucially, we brought testing forward. We were able to prove assumptions with clickable prototyping tools and invited decision-makers to the testing sessions so they could see first hand how users reacted. 

Get in touch:

Due to COVID-19 restrictions I’m only available for remote contract roles at present.

East London, UK

+44 07496 230 314

Leave A Message: