Finance · Lead UX Developer

Rebuilding CarFinance 247’s homepage and form for phones, and learning which test results to trust

31%

Better homepage conversion rate, in Google’s case study of our team’s work

20%

More completed applications through the new form

12%

More completed applications after Apply now became Get a quote, at 87% probability

Industry

Finance

Role

Lead UX Developer

Team

8 people across product, data, engineering and UX

We rebuilt the homepage and form for phones, and measured each step on its own

Around 75% of CarFinance 247’s visits were on mobile, and its pages struggled on median and slower phones. I led the front-end team, and we rebuilt the homepage with other designers. Google published the team’s homepage work as a case study. The form and Get a quote each moved their own step, and two of our other ideas didn’t reach a result.

Two phone screens of the homepage. Before: a dark purple header, a stock photo with text on top, a green Apply now button and a budget calculator. After: a short heading, two short points, one orange Apply now button and a car in front of drawn houses — The phone homepage before the mobile-first redesign, left, and after, right

Around 75% of visits were on mobile, and the pages failed on median and slower phones

CarFinance 247 is a Manchester company that Google calls the UK market leader in online vehicle finance, with over 8 million visits a year. The pages didn’t load well on median and slower phones. The homepage was among the worst, image heavy with no optimisation.

The goals were to serve customers better and win more of them. In Google’s account, a Design Sprint it hosted was the catalyst for going back to the business about a mobile-first redesign, and the work then split into two streams, page speed and mobile UX.

The desktop homepage before and after. Before: a dark header, a stock photo, a green Apply now button and a budget calculator. After: one heading, two short points, one orange Apply now button and a car in front of drawn houses — The desktop homepage before the mobile-first redesign, top, and after, bottom

People applying feared rejection and a mark on their credit report, and some were on phones our pages failed on

First applications only used a soft search, and that wasn’t clear, so people worried about rejection and their credit report. We also interviewed customers on known slow devices who still applied.

I led the front-end team, and we rebuilt the page and iterated on the design together

The first version of the new homepage was already up. My team rebuilt it and we iterated on the design. I designed the layout, the call to action, the button spacing and the dark mode illustration, and built with the team. I also designed the car personalisation, from the popular car test on the main page to personalised landing pages for paid campaigns. As Lead UX Developer I hired the front-end engineers, and they reported to me. The UX team was split between design and front-end development, working like design engineers. My part on the other work was:

On speed, I ran ideation workshops and took the lead on analysing and monitoring the site’s performance metrics.
On the form, I spoke to customers, took part in our workshops and took the lead on prioritising solutions.
On Get a quote, I added the secondary click-through metric.

Across the teams:

I led workshops with stakeholders and five product teams.
The team started checking SpeedCurve after each release, so we caught our own regressions.

Google’s case study names Paul Stevens, Head of User Experience and Design, and not me, and it credits a Google performance consultant and a UX consultant too. So the 31% is the team’s result.

Four colleagues at a whiteboard covered in printed screens and handwritten notes during a team workshop — A team workshop

A team of eight covered the homepage, speed and the form, testing on live traffic

The whole UX and Web team was eight people. Google says the homepage took six months to design and build. We ran our tests in Google Optimize on real customers. On the form, we went 2 weeks with no production changes to get a baseline first.

Three calls show how we worked, and each had a measure behind it

I pushed for monitoring on the live site, and it showed one of our own releases pulling accessibility down

The monitoring caught one of our own releases pulling accessibility back to 67.

We right-sized images, inlined above-the-fold CSS, added compression and CloudFlare static caching, replaced jQuery with web components and removed redundant code. We also worked on accessibility and semantic HTML.

I pushed the team to get SpeedCurve, because I knew performance would affect conversions. It monitored the pages and alerted us to regressions. Visually complete fell from about 6.3s to 4.2s, and first meaningful paint fell from about 2.6s to 1.35s.

SpeedCurve line chart of page load times from February to April, where visually complete falls from about 6.3 seconds to 4.2 seconds and first meaningful paint from about 2.6 seconds to 1.35 seconds — How long the pages took to load

The Lighthouse scores tell a messier story. Performance went from about 44 to about 85. Best practice reached 100, and SEO slipped from 100 to about 95.

Accessibility climbed from 58, then a release of ours pulled it back to 67. The chart shows it, and the score later reached 83. Accessibility can go backwards with a release just as speed can, so it needs watching in the same way.

SpeedCurve line chart of Lighthouse scores on the live site from February to April, where performance rises from about 44 to about 85, accessibility from 58 to 83, best practice reaches 100 and SEO slips from 100 to about 95 — Lighthouse scores on the live site

We tested the split-up form with 5 people before committing to the build, then released it to 15% of users

Usability sessions with CodeComputerLove found three problems. The back button cleared the form, too much was asked up front, and the validation messages didn’t help.

We tagged every part of the form in Google Tag Manager, added SessionCam and took our baseline. A team workshop then turned that and the usability findings into three ideas:

Several screens would reduce the load.
Saving input locally would survive going back or refreshing.
Conversational questions would give clear information at the points people needed it.

We tested an InVision prototype with 5 users in a lab, and their positive feedback gave us the go-ahead for the more complex build. We built it in Vue, chosen over React and Angular for its performance. Screens said “You won’t lose your information” under Previous, and explained “Lenders ask for 3 years’ address history”.

Eight phone screens of the new application form, with one group of questions on each screen, from What can we help you finance today to Contact preferences — The form spread across eight screens

Two phone screens side by side showing the first form question, with the earlier wording What vehicle are you looking to finance on the left and the later wording What can we help you finance today on the right — The first question, in earlier and later wording

We released it through Google Optimize to 15% of users, then ramped up. The changes together gave 20% more completed applications through the form, measured with analytics and CRM over 8 weeks. Asking one question at a time accounted for 11 points of that, conversational wording 5, and friendlier, more accessible screens 4. The lab told us the build was worth doing, and only the live release could put a number on it.

I shipped Get a quote at 87% probability, under my own bar of about 90%

Completed applications reached 87% probability of beating the baseline, under my bar of about 90%. I shipped it because click-through reached 94%.

People feared rejection and a mark on their credit report, and nothing made clear that first applications only used a soft search. So “Apply now” became “Get a quote / No impact on your credit score”. We tested it on new traffic from the best Google ad campaigns.

Two phone screens of the homepage, one with an Apply now button and one with a Get a quote button that adds No impact on your credit score — The button before and after

I’d added click-through to the form as a second measure. After two weeks it was up 12% with a 94% probability of beating the baseline, which would’ve meant 366 more people starting in two weeks if served to everyone. Its conversion ranges overlapped, at 18.2% to 22.5% and 20.5% to 25.1%. Completed applications, the primary goal, were also up 12%, at 87%, and their ranges overlapped too, at 9.0% to 12.0% and 10.2% to 13.4%.

Google Optimize results for click-through to the form, where the new version has a 94% probability to beat the baseline and a conversion rate range of 20.5% to 25.1% against 18.2% to 22.5% — Click-through to the form

Google Optimize results for completed applications, where the new version has an 87% probability to beat the baseline and a conversion rate range of 10.2% to 13.4% against 9.0% to 12.0% — Completed applications

Click-through is an earlier step, so it supports the 12% on completed applications without proving it, and the traffic was only new visitors from our best campaigns.

Google published the 31%, and the form and Get a quote each moved their own step

Google’s case study reports online research with 100 people that favoured the new design, then an A/B test in Google Optimize with a 31% better homepage conversion rate. The page then became the benchmark for testing other pages.

Google also says the homepage was four times faster than its predecessor. That’s a separate measure from the visually complete times above, which come from the live site over the months we monitored it.

The 31%, the 20% and the 12% each measure their own step, so I don’t combine them.

The car image test proved nothing

We tested the homepage’s Fiesta against a Mercedes A-Class and a VW Golf GTI, picked from customers’ most popular cars. There was no clear leader after 30 days, and we stopped it by hand after 40. The Mercedes converted at 7.2% and the Golf at 7.1%.

Three phone screens of the same homepage, each with a different car: an orange Fiesta, a silver Mercedes A-Class and a silver VW Golf GTI — The same page with three cars

The probability of beating the baseline was 70% for the Mercedes and 62% for the Golf, and their improvement ranges ran from -9% to 18% and -11% to 17%. It was inconclusive, so it says nothing either way about whether the car image matters.

Google Optimize table for the car test showing the original with 46,934 sessions, the Mercedes A Class with 125,847 sessions and 70% probability to beat the baseline, and the VW Golf GTI with 126,206 sessions and 62% — The car test’s results in Google Optimize

5% of users already had dark mode set, and the concept I designed never shipped

I designed the dark mode illustration and demoed the concept. It was well received, and it never shipped.

Two desktop homepages, light mode above a dark mode concept, each with a silver Mercedes A-Class in front of drawn houses — Light mode, top, and the dark mode concept, bottom, which was never released

Two phone homepages, light mode beside a dark mode concept, each with a Mercedes A-Class in front of drawn houses — The dark mode concept on a phone, right, beside light mode, left

A result is only as strong as what it measured, so I’d state the bar and the miss out loud

An early measure can back up a late one, and it can’t replace it. Get a quote shows that.

A score you’ve raised can fall with your next release. Our accessibility line shows that.

And a test that finds nothing should be reported as finding nothing. Our car test shows that.

published our team’s homepage work as a case study

How a mobile-first homepage boosted conversions for CarFinance 247 by 31%

Read Google’s case study (archived)