MoneySuperMarket - Authentication

Improving the authentication experience across the whole site by redesigning the password reset journey and exploring alternative ways to sign-in

MoneySuperMarket

One of the largest price comparison sites in the UK, specialising in financial products, such as car insurance and credit cards.

The goal

Company strategic goal

To increase account sign-ins - users who are signed-in covert significantly better than those who are not, and in the long term, revenue per customer is higher for signed-in customers

Authentication strategy

To increase opportunities for users to sign-in, both globally across the site, and inline within products:

  • Design a sign-in component within product question sets (“inline”).

  • Make sign-in mandatory for users to continue their journey.

    • Improve the sign-in experience by exploring alternative ways to sign-in (part 2)

    • Improve the password reset experience (part 1)

      • Enable users to do this “inline” to ensure minimal disruption to their journey

  • Ensure the authentication experience is consistent across the site - globally, and inline across all products - insurance, money, and Credit Monitor

Key considerations

Stakeholders…

  • Senior leadership - Chief Technology and Product Officer, Heads of Product, Tech Directors

  • Product Owners across all MoneySuperMarket products

… with conflicts of interest

Company strategic goal (and long term value) = Integrate authentication within each product question set, and make sign-in mandatory.

VS

An expected (and accepted) fall in conversion within each product affected Product Owners, who had conversion targets that they wanted to maintain.

My role

Senior UX Designer. I was responsible for the end to end design process - from kick-off workshops, planning and journey mapping, to user testing and final designs. I worked within a multi-disciplinary squad that was responsible for all authentication processes and features across the entire site; we were a ‘horizontal’ squad that regularly collaborated with all teams.

PART 1 - Improving the Forgotten password journey

The problem

Users were finding it difficult to regain access to the site, and the business saw 56% of users having to go down the ‘forgotten password’ journey in order to gain access to their accounts.

Further to this, 10-12% of users then found themselves continuing their journey on a device they hadn’t started on!

Approach

Flows

I mapped out the flows with the Product Owner and Tech Lead. We worked through each of the scenarios with the squad, and raised any potential problems, as well as options to resolve these.

Flows for both the global and inline journeys

High-level flows with user steps

I then produced high-level flows for both the global and ‘inline’ journeys that I regularly shared with the squad and relevant stakeholders to increase visibility and gain alignment, particularly with the Product Owners.

Design collab sessions - UX, UI, UX Writing (Content) and UXR

High level flows with user steps

Wireframes

  • Annotated to explain interactions and all variations of validation messages to cover all scenarios.

  • Design collaboration sessions to review, iterate, validate - UX, UI, UX Writing (Content) and UXR.

Annotated wireframes - inline component

Happy Paths

  • Mapped out the ‘happy path’ user journeys for both global and inline sign-in.

  • The videos illustrate earlier prototypes of the journeys that were then reviewed and updated, but provide a visual of the flow of the journeys.

Global sign-in designs - existing user, happy path

Inline sign-in designs - existing user, happy path

User Research

Planned and conducted click tests and timeout tests on the global sign-in journey.

Research objectives:

  • To evaluate the new forgotten password journey

    • to identify any usability issues

    • to understand whether the journey is intuitive and flows correctly

    • have users understood the instructions?

    • have we missed anything?

  • To identify opportunities to optimise the journey

Click test - heatmap

User testing results

“ ...looks much better and is cleaner.” - participant response

Key findings:

  • All participants completed the journey and tests without any major problems.

  • The majority participants understood the content well, and what was required to reset their password.

Collaborations

The inline authentication component was to be implemented across all MoneySuperMarket products, so I arranged collaborative sessions with the designers in each of these product areas, as well as the CRM team, to discuss any potential problems, and how we may handle these.

We also reviewed:

  • using a single component for both sign-ins and sign-ups;

  • how this may work for single page questions sets;

  • the flexibility of being able to implement the component in the middle of a question set.

I captured all feedback, problems, and suggested improvements. These sessions were a great way to increase the visibility of my designs across the business, to ensure all product areas were kept informed of progress and updates, and how these changes may impact them.

Outputs from collaborative sessions

Outcomes

88% of users successfully reset their passwords within two weeks of launch - success!

Global design

Inline design

Challenges & learnings

  • Integrating the authentication component across all products, and ensuring this was as consistent as possible was challenging, but allowing product squads the flexibility to tailor copy, and optimise placement of the component helped alleviate problems.

  • One size does not fit all

    • Credit Monitor customers behave differently to money and insurance customers; their objectives are different.

    • Each question set was different - with different requirements, e.g. home insurance first question was a key selling point.

    • Conversion was affected significantly in some cases, by a third. It was difficult to pin point why exactly this was happening - tech backend issue, design and content?

  • Product owners wanted an anonymous / guest journey in the short term allowing users to continue without logging in.

PART 2 - Discovery - exploring alternative ways to sign in

Background, Strategy & Planning

"Implement social sign in across the whole site...now!" - request from Exec level

  • Understand the request - Is there evidence to support this solution? Data?

  • What exactly is the problem that we are trying to solve here?

  • Take this as an opportunity to explore alternative options for sign in

    • AWS provides us with lots of features and capability, which makes it technically possible

Discovery planning

Approach

Workshops

I planned and facilitated two workshops with people from different disciplines to understand:

  • What do we already know? What data and research have we already done that we can use?

  • What does the competitor landscape look like?

  • What is the least amount of work we need to do to learn the next most important thing? (Lean UX Canvas)

Workshop 1 Agenda

  • Introductions & about this session

  • Walk through previous findings

  • Walkthrough competitor landscape review to help generate ideas

  • In-session task - key takeaways

  • Post-workshop task: add any other alternative sign in examples that you have come across

Workshop 2 Agenda

  • Lean UX Canvas

  • Vote on ideas

  • Next steps

Workshop 1 - what do we already know?

Workshop 2 - Lean UX Canvas

Tests

At the end of the Lean UX Canvas workshop, we decided to carry out a few tests using social sign-in alongside email and password as an option.

Test 1 - Google sign-in false door test

Test 2 - Multiple social sign-in false door test

Results - Data analysis of Tests 1 & 2

Passwordless concept

Designing an interstitial log-in page with magic link and social sign-in options (passwordless).

Design collaboration

Collaborated and explored designs with UX, UI and Content designers.

Outcomes

Despite data and user research suggesting social sign-in was not the preferred method for users to access their accounts, stakeholders were keen to implement this across the site.

Global social sign-in

Inline social sign-in

Challenges & learnings

  • Tight timelines - no time allocated for the unexpected.

  • Leadership wanted solutions to be launched straight to live site, then to monitor the impact - no user research or testing

  • Managing stakeholder expectations and requests

  • Important to explain the design process, and the value and benefits of each stage to answer questions such as, “why do we need a workshop?”.

  • Learnt not to add dates to plans (even approximate dates), as this sets an expectation and/or it is quickly challenged.

Personal achievements

I was responsible for the design of authentication covering the whole of the MoneySupermarket site - a complex and challenging area, where collaboration across products and disciplines was essential for the success of each project.

I learned a lot about working alongside stakeholders across the business - clear communication, collaboration and sharing progress and problems were key to establishing and maintaining good stakeholder relationships.

I also enjoyed carrying out the false door tests with the squad. I was able to rapidly design concepts and test these live within days. These, along with data and user research were powerful ways to communicate design decisions.