ABOUT

MoneySuperMarket 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 wanted to improve their mortgage comparison platform – helping their users remortgage as painlessly as possible – and approached Distinction to make it happen.

The challenge
MoneySuperMarket 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 knew that to keep ahead of the competition, their price comparison platform needed to convert just as well on mobile.

They came to Distinction with three clear objectives:
• To get beyond the ‘consideration phase’ of the buyer’s journey
• To provide an exceptional user experience, meaning personalised results, prioritising mobile devices
• To deliver all this in just 90 days

Distinction accepted the challenge with relish.

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

User journey mapping
First off, they 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 Distinction 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, Distinction created personas for different types of mortgage buyers – this meant that they could put themselves consistently in the customer’s shoes, so user-centricity was maintained throughout the design process. This is where empathy mapping comes in – allowing Distinction to understand what the customer says, does, thinks and feels as they’re tackling a huge financial decision that would have an impact on their lifestyle.

UX & UI design
With the groundwork done, Distinction 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 turn mobile visitors into conversions that matched the existing desktop performance, Distinction designed the mobile layouts before moving onto the desktop designs.

Outcome
Launching the progressive web app (PWA) in just three months, MoneySuperMarket 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 achieved their ultimate goal of capturing more market share and remaining the UK’s price comparison leader.

About Distinction
Distinction is the digital product studio who’ll make you stand out. They work with clients to disrupt their sector, challenge the competition and capture market share by delivering experiences users love.