31% conversion boost by going mobile first

A mobile device showing the CarFinance 247 Homepage that reads Get your Finance First.

With an award-winning website that attracts over 8 million visits annually, CarFinance 247 is on a mission to provide a better way for people to finance their cars.

Around 75% of visits to the site are on mobile, so we set out to improve page speed and design in order to create better user experience and ultimately increase conversions.

Team

Owned by the UX and Web team, our responsibility is to make sure the website is performant and converts well.

In the team we have:

  • Product Manager
  • Data Analyst
  • 2 Front End Developers
  • 2 Full Stack Developers
  • 2 UX Designers

My role was to help the team solve out performance problems through iterative changes at the front end. Using benchmarking techniques and experiments. I ran ideation workshops, and took the lead on analysing and monitoring the site performance metrics.

Research

Working with our data analyst and the product owner we did a deep dive on website performance at page level.

To enable the team to monitor our performance over time, and to prevent regressions we used a performance tool called SpeedCurve. SpeedCurve provides us with insights on individual page performance, aggregates this data, and alerts the team of any changes.

When we'd found customers that had devices we know didn't perform well, but they had still applied. Our UX designers and I worked set up moderated interviews to ask them about their experience with us.

Pain Points

Customers were having problems loading the website on median and slower mobile devices. That was stopping them from applying, and the feedback we got from those we did apply was that they found it frustrating.

Many of our pages were image heavy and lacked any optimisations, the homepage was one of our worst performing!

Ideas

We workshopped ideas and came up with the following solutions. Iterating through them one by one measuring as we went.

  1. Optimise all image assets and deliver the right size for the right screen.
  2. Inline the CSS needed to render what's above the fold.
  3. Compress everything and reduce it's size over the wire.
  4. Remove JQuery and re-write using web components.
  5. Remove all redundant code.
  6. Make the pages more accessible.
  7. Use semantic HTML.
  8. Static asset caching with CloudFlare.

Results

It was a good few months worth of work from the UX team, but it really paid off!

  • 31% better conversion rate
  • 4X faster pages

background

Focusing on mobile web optimisations has significantly helped speed and performance, which can ultimately be tied to increased conversions. What this really means is: lots more happy people who are getting into their new car, thanks to us.

Paul Stevens - Head of UX and Design

Google featured our work as a case study.