HomeServe

Checkout Optimization

HomeServe Checkout Optimization Interface
Project Overview

Redesigning the checkout by synthesising quantitative data with qualitative behavioral research. I transformed a legacy system into a high-performing, scalable funnel that significantly increased conversion rates.

Category
Web Design Mobile Design
Collaborators
Product Owner Reserchers Developers
Timeline

October → January

My Role
Interaction Design UI Design Prototyping Design Thinking
Tools
AdobeXD Balsamiq MIRO

Context

HomeServe is a leading provider of home emergency repairs, serving millions of customers. I was tasked with redesigning the Checkout Funnel to reduce friction and increase conversion rates. This project required a deep integration of quantitative data and qualitative user insights, working closely with external research partners, Product Owners, and stakeholders to transform a legacy system into a modern, high-performing user journey.

Problem Statement

The friction of high-stress decisions
The original checkout experience suffered from significant drop-offs due to a lack of visual hierarchy and a confusing information architecture. Through a Heuristic Evaluation and stakeholder interviews, I identified seven critical friction points:

  • Step Architecture: A fragmented journey that felt longer than necessary.
  • Information Density: Poor document presentation leading to cognitive overload.
  • Selection Friction: Unclear "Select Options" patterns.
  • Weak CTAs: Buttons that didn't stand out or drive action.
  • Error Handling: Punitive error states that discouraged users.
  • Scrolling Issues: Excessive verticality on mobile devices.
  • Document Presentation: Legal and insurance documents lacked clarity and easy access.

Challenges

Bridging the gap between data and design
The primary challenge was synthesising a massive influx of data from external sources. I had to analyze Adobe Analytics for drop-off points, Hotjar maps for interaction friction, and User Testing records to understand the "why" behind the behavior. Collaborating with an external research agency required high-level communication to ensure their findings were accurately translated into actionable design goals without losing the "human" element of the user's struggle.

The Process

A data-informed iterative journey
My approach was rooted in evidence and rapid validation:

  • 1. Definition & Alignment: I grouped the identified problems and presented a strategic roadmap to stakeholders, ensuring business goals aligned with user needs.
  • 2. User Flow & Low-Fi: I restructured the step architecture and tested new flows using clickable low-fidelity wireframes. A key addition was a Progress Bar to provide users with a sense of orientation.
  • 3. Validation & Refinement: Based on initial user feedback, I moved to High-Fidelity Prototyping. This prototype was rigorously tested by an external agency, leading to further refinements in how documents and "Select" options were presented.
  • 4. Dev Collaboration: I worked side-by-side with developers during the build phase, performing Quality Assurance (QA) to ensure the design integrity was maintained in the final code.
Optimized checkout user flow with progress bar and improved architecture
Optimized user flow for the new checkout experience.
Clickable low-fidelity prototype for checkout flow validation
Clickable low-fidelity prototype used for early-stage flow validation and feedback.

Key Outcome

Conversion at scale
The redesigned funnel was launched as an A/B Test against the legacy version. The results were immediate and significant:

  • Conversion Rate (CR): Achieved a substantial double-digit increase in successful checkouts via A/B testing.
  • User Error Reduction: Minimized friction by replacing confusing "Select Options" patterns with intuitive selection logic.
  • Mobile Performance: Optimized scrolling and CTA placement, significantly boosting the mobile conversion funnel.

What Was Next?

Scaling through systemisation
Following the success of the UK checkout, I led the effort to scale the project across different user segments and product categories. By leveraging a robust Design System, I was able to replicate these high-conversion patterns with maximum efficiency and speed. This modular approach ensured that future product launches could benefit from the same optimized architecture while maintaining brand consistency across the entire HomeServe ecosystem.

Scalable Design System architecture for HomeServe ecosystem consistency
Scalable system architecture unifying brand narrative and functional design.