moneysupermarket.com: design sprints

Moneysupermarket.com is the UK’s leading price comparison website and part of the Moneysupermarket Group, whose mission is to help households save money on bills by giving them access to free online tools that enable them to buy and switch products.

With this purpose front and centre of mind, moneysupermarket.com wanted to improve their mortgage comparison platform – helping their users remortgage as painlessly as possible.

The challenge

Moneysupermarket.com already had the early stages of the mortgage journey covered on their price comparison website, but that wasn’t enough if they wanted to capture significantly more market share and remain the UK’s price comparison leader.

It was clear that their current proposition had a gap in the end-to-end mortgage buying journey – the remortgaging process – and their comparison tool needed to include this to remain market-leading. The current tool also saw most users on desktop but moneysupermarket.com knew that to keep ahead of the competition, their price comparison platform needed to convert just as well on mobile.

They came to us with three clear objectives:

• To get beyond the ‘consideration phase’ of the buyer’s journey
• To provide an exceptional user experience - meaning personalised results - and prioritise mobile devices
• To deliver all this in just 90 days

Challenge accepted!

Design sprints

With an immovable deadline and an end goal of a marketing-leading, full mortgage buying journey comparison tool, we knew that we needed to tackle the challenge with a series of design sprints.

User journey mapping

First off, we mapped out the ideal user journey for the end-to-end mortgage application process. This included the key steps of the buyer’s journey from awareness to consideration to decision and removing as much friction as possible.

Each user journey mapped influenced how we created the question set for that journey, meaning the onboarding was personalised to what the user was trying to achieve, i.e., remortgage.

Personas and empathy mapping

Next, we created personas for different types of mortgage buyers – this means that we could put ourselves consistently in the customer’s shoes so user-centricity was maintained throughout the design process. This is where empathy mapping comes in – allowing us to understand what the customer says, does, thinks and feels as they’re tackling a huge financial decision that would impact their lifestyle significantly.

UX & UI design

With the groundwork done, we set about designing and enhancing the user experience (UX) and user interface (UI) of the complete mortgage buyer’s journey – from awareness, to consideration, to decision. It had to be a smooth and pain-free user experience – from the customer’s initial research phase to their onboarding questions, to product consideration and selection and then handover to the broker to complete the application process.

Accessibility

As a prerequisite for the financial services sector, accessibility was a vital part of the design process. Financial products must meet the industry accessibility standards and so this was paramount when creating the design system – all colours, typefaces, font size and weight, and language needed strict governance.

Mobile first

With the requirement for the new platform to turn mobile visitors into conversions that matched the existing desktop performance, we designed mobile layouts before desktop.

Outcome

Launching the progressive web app (PWA) in just three months, moneysupermarket.com had an online mortgage comparison tool that covered the whole product cycle. With a seamless and consistent user journey across multiple devices, users could get maximum impact for limited input and a painless experience to a big financial decision.

Giving users the confidence to find the best mortgage deal for them, whilst providing qualified customers to the brokers, meant that moneysupermarket.com achieved their ultimate goal of capturing more market share and remaining the UK’s price comparison leader.