Believing in Magic (Links)

By 2020, millions of teachers, parents, and school leaders around the world were using Prodigy. Users received emails updating them about student math-learning.

Nearly all Prodigy emails let users log in to Prodigy's web apps, without a password or any other friction. Letting users in without challenging them was a legacy technical decision that became a prime security concern.

I was part of the team that designed a low-friction magic links experience that balanced user experience and user security.

A mockup of the magic link email in mobile view
The Problem

Unsecured Email Logins

Prodigy squads relied on unsecured email templates that:

As a result, Prodigy users relied on Prodigy emails to:

The Challenge

Changing Login Habits

Prodigy's users were conditioned to log in with these insecure emails, so our goal was to make logging in this way more secure. It was difficult to change user habits so we had to change how login worked.

We wanted users to have an experience that was more secure but didn't compromise the user experience. It couldn't be completely frictionless but had to be low-friction.

My Role

I led the user research and experience design. I validated the assumptions, researched the existing and proposed usability, and created the user flow.

I worked with my product squad consisting of 5 full-stack developers, 1 product manager, and 2 QA engineers.

The feature was scheduled to release in January 2021.

Empathize

User Research

The goal of our research was to identify the impact and to validate the risk these unsecured emails had.

Identifying the Impact

Analytics showed that unsecured emails were tied as Prodigy's second-highest login method.

Analytics showed that parents were the majority of user logins, followed by teachers.

Analytics showed that unsecured email logins spiked every week with Tuesday's parent report email.

Datadog analytics showing parents as majority of unsecured logins.

Unsecured email metrics from Datadog

Validating the Risk

Analytics showed that 20% of weekly logins came from existing, non-expiring sessions—a security concern. A single user could have multiple recent and aged sessions active at the same time.

A baseline metric showed 70% of unsecured email users dropped off when challenged with a login wall (only a 30% conversion).

Experiment to test user log ins with a login wall.

Login conversion with a login wall from Optimizely

Define

User Needs and Problems

Identifying user goals and motivations uncovered user needs and problems with changing the existing state.

Interviews

Interviews with parents showed they liked the existing login experience for one main reason: ease.

Unsecured emails made it easy for users to log in; easy to access their accounts; easy to assign and check work.

Remote interview with a Prodigy parent.

Remote interview with a Prodigy parent

Use Cases

Research uncovered intended and unintended use cases for these unsecured emails.

Prodigy's emails intended to:

But users also used them in other ways, such as, to:

User Flows

Looking at user flows also showed that users were accustomed to using unsecured emails as an entry point into Prodigy's web apps. For users, it was incredibly easy to access Prodigy for all their use cases.

Examples of user flows from select emails.

Examples of user flows from email buttons

Storyboard

I created a storyboard to align stakeholders about a user's frustration with encountering a login wall where they hadn't seen one before.

Comicstrip showing a user being frustrated with a login wall.

Storyboard: User's login wall experience

Ideate

New Ideas and Concepts

Based on the research, any new ideas and concepts had to maintain these design considerations to ensure a low-friction user experience:

Collaborating on Concepts

Remote collaboration sessions and asynchronous collaboration (during a global pandemic) with designers, developers, and product managers on different concepts and user flows.

Comments from other designers about my design ideas.

Comments from other designers

Decision: Magic Links

Why magic links? Our team decided it was the best design and development solution because:

Getting Inspired

I looked for inspiration from various sources that highlighted magic links as the primary login method.

Login screens from various web applications.

Login screens from various web applications

Exploring Mockups

I explored different login screen looks that incorporated magic links.

Mockups of different screen looks.

Mockups of different screen looks

Prototype and Test

Iterating on a Solution

We built a prototype to conduct usability testing with Prodigy parents who were accustomed to the unsecured email flow.

Testing with Parents

With the prototype, we conducted and gathered qualitative and quantitative data about our proposed magic links experience with Prodigy users. View prototype

We tested these criteria:

Usability testing with a Prodigy parent.

Usability testing with a Prodigy parent

Design Iterations

Key changes due to testing:

The Solution

Securing Logins

Our magic links solution had a new login screen and user flow that replaced the existing login experience with a more secure authentication process before users got into their account.

Screens

The responsive magic link login screen.

New magic link login screen.

New magic link login screen

User Flow

The user flow added a new email where users get authenticated before they can access their Prodigy account. View user flow

Tracked Metrics

We tracked these metrics to determine success of the feature:

The Release

Magic links was scheduled to release in January 2021. But I had left Prodigy around that time.

Post-Mortem

Challenges Along the Way

Challenges I faced throughout this project:

Next project:

Questrade: Account Selection Redesign