E-commerce website redesign
Visual refresh following a company-wide rebranding exercise, coinciding with a move to a component-based rebuild.
UI Design / UX Design
Co-located: Scrum Master / Front End Developer
Remote: Product Owner / Back End Developer x2
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 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
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
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 & Maya
YOUNG COUPLE IN FIRST HOME
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.
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.
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
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