By Miles | Checkout Re-design

In the years since our 2018 launch, our quote site needed a rebuild. Consumer behaviour was changing, and more customers than ever were shopping for car insurance on their smartphones. The problem was, our checkout wasn't converting very well on mobile.

On top of this, design and development velocity was slow when working on our quote site, and complexity of the code meant it was difficult to launch A/B tests.

I lead a project to rebuild a new component-led quote experience that was truly mobile-first, developing our own design language in the process, using atomic design principles.

Insight

As our brand grew, we became available on more price comparison sites, which were now responsible for the majority of our traffic and sales.

From a combination of data from our site analytics, comparison site benchmarking and customer surveys and interviews, we could see that the ratio of purchasers browsing and purchasing on mobile was increasing year-on-year, and mobile bounce rates on our quote site were higher than industry averages.

We recognised from user research that comparison site shoppers were expecting a certain kind of insurance product, and a certain pricing structure. As a unique pay-by-mile proposition, we couldn't shy away from the fact that we were different, so we had to reassure and explain in a way that didn't feel overwhelming.

Process

We worked with a user research agency to run focus group research into car insurance buying behaviours, to test our proposition with them, as well as user testing initial mobile wireframes.

Using the 'Jobs To Be Done' framework, we prioritised the information that customers expected to see when purchasing a car insurance policy, then used 'How Might We' (HMW) statements to guide our thinking about how we could restrucure the information architecture of our checkout.

We used card sorting exercises to determine the information architecture of the pages, and opted to use 'chunking' to make the pages easier and faster to navigate, especially on mobile.

Output

We delivered a fully responsive checkout redesign, built in our new design language.

The atoms, molecules and components were built into Figma to speed up design iteration, and developed in a component library within Storybook to make development faster.

Checkout journey (Desktop):

Quote to checkout journey (Desktop):

Interview:

See me discussing the evolution of our quote site and checkout (prior to the redesign) on 11:FS.