Web Responsive Homepage Redesign

Led the UX UI redesign and experimentation that's projected to increase conversion rate by 75%.

Client

Harwoods Group

Duration

2 months

Service

UX UI Redesign

Status

Testing & In Build

Project Objective

I freelanced as part of a marketing agency, who was working with long-time client, Harwoods. Both the agency and client were looking to elevate the Harwoods homepage, as conversion rates were declining, especially among their 'new cars' category.

I was appointed to redesign their homepage, which focused on improving visual impact, clarity, and engagement for high intent users browsing premium vehicles and services. The existing homepage struggled to clearly communicate brand value, surface key categories, and guide users efficiently, resulting in friction and unnecessary scrolling. The goal was to create a cleaner, more confident, and user led homepage experience.

Before

After

For project managment, I had access to the agency's work platform, where research, updates, and results could be documented and shared both internally and client side for Harwoods:

The Process

1. Data & Behavioral analysis

Analysed GA4 traffic data across desktop and mobile alongside scroll depth and heatmaps from MS Clarity to identify friction points and validate the need for structural change.

2. Hypothesis Generation

Formed clear UX hypotheses around simplifying navigation, improving visual hierarchy, and strengthening brand.

3. UX Experimentation

In Figma I redesigned key homepage sections and explored 1-3 design variations per section.

4. A/B Testing

Design variations were tested against the current homepage using preference testing via Lyssna, gathering direct feedback from target users.

I compiled offline preference testing insights into clear test reports for client sign off, helping secure approval for development and live A/B testing

5. reportiing & rollout

Built test reports for each preference test conducted. They documented the hypothesis, design rationale, annotations for each test variation, results and user feedback.

Refined the winning direction and aligned with developer and client to support rollout and ongoing optimisation.

Offline preference tested design variations per homepage section with targeted users. The winning variation from each section would then be built and A/B tested online.

Test reporting & Handover

I reported and documented test results per homepage section that I redesigned. The client would receive these, as well as access to the winning design variations. Once each section was A/B tested with the intended results and signed-off by the client, the final designs and code were passed over to Harwoods' team, for deployment.

The outcome

OVERVIEW

Users consistently preferred the redesigned homepage over the current version, citing its cleaner layout, clearer hierarchy, and improved access to essential information above the fold.


The redesign reduced visual clutter, surfaced trust signals earlier, and improved scannability across product listings. The Browse by Car Brand, Services & Repairs sections are currently live in A B testing, with additional homepage sections approved and awaiting rollout following development handover.

The project involved designing the app's architecture, developing a user-friendly interface, integrating payment systems, and ensuring that the app could handle a smooth and responsive user experience. Swagger is built with the idea of offering convenience and quality.

What the client had to say:

We saw immediate improvements in trust and click-through rates. The hierarchy and visual clarity of the new homepage far surpassed expectations. It was highly strategic and beautifully executed.

Project Manager @ Harwoods

This is just a snapshot of the entire design process. Reach out for the full story!

Find out more

Design System & App Design ›