Revitalising Web Presence With a New Design System


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

Homeserve Logo


My Role

UI Design  /  UX Design

The Team

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

HomeServe are a multinational providing insurance cover for a range of home utility emergencies.

Joining the UK based tech hub following a rebrand, I was asked to develop the print style guide into a design system and pattern library for the US website, who wanted something that was distinct from the UK site but felt like part of the same family.

By the way, we just fired our development partner for crazy delays, so your stakeholders hate the UK tech hub already! 


An agency had delivered a rebrand but this didn’t include anything for the digital estate. Joining the UK based tech hub, I was asked to redesign the website for the USA business who wanted something that was distinct from the UK site but felt like part of the same family. 

By the way, we just fired our development partner for crazy delays, so your stakeholders hate the UK tech hub already!”


A complete redesign of the USA website with a design system and component-based pattern library following atomic design principles. 

Product listing pages with redesigned product cards, product detail pages, basket journey and customer account area including slots for product cross/up sells. 

Business Impact

Visual consistency throughout the site was greatly improved, presenting a more professional image and building trust with customers. 

A component-based build delivers efficiency and scalability with re-usable page modules, reducing development overhead and time-to-market.

The development team were able to swiftly rebrand components to deliver a customer account area for a newly acquired sub-brand, mirroring the parent site and simplifying support requirements.

Users and Audience



Career focused, working long hours away from home


  • 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

Isaac and Erin

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


  • 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 and Maya

Paul & Maya

Renovating their home takes the majority of their spare cash


  • Avoid costly repairs
  • Keep premiums low

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


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. 


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. 


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


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. 

Homeserve style guide and ui components

Before and After

Primary objectives for the homepage were to rationalise the design language and reduce the overall height to keep scrolling to a minimum. 

Old Homepage

New Homepage

Example Pages

UX Challenge 1


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


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


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


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.

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

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.