OTP Autofill in mobile

Increasing Precision and Recall in UX flows

Product

Microsoft Edge

Deliverables

Stakeholder management, UX Research, UX Design, Experimentation, UI Design

Role

Product Design and Mentoring junior designer

Overview

Autofill plays a crucial role for both Desktop and Mobile in streamlining browsing experiences, directly impacting user engagement and Edge's Browsing share of minutes (BSOM) goals.

Design

I am part of a 2-member design team for this project, led by my design manager. We collaborate on various aspects, including ideation, design reviews, and strategic decision-making.

Feature Crew Triad

We work closely with a team of over 6 product managers, more than 50+ software engineers, and 15 UX designers to bring our ideas to life.

Autofill & Reading experiences

I collaborate with over three product managers to define and refine the experiences for the Autofill and Reading verticals. Over the past year, I have successfully shipped features and introduced better experiences for users.

Research

We conduct regular usability testing for each outgoing experience using in-house tools with users around the globe. We also leverage the org's research on existing features to make strategic design decisions.

Gate-keeping & Mentoring

I frequently work with associate designers, actively leading and reviewing their work before it is shipped. This ensures that the final product meets our quality standards and aligns with our design vision.

Some data points which moved and increased usage and engagement.

But how did I move the numbers?

User has to go to the Messages app to check for OTP's. So it’s indeed we should kickstart.

But is this a requirement?
Oh yes, OTP Feature is missing so does the
BSoM metric(Browser share of minutes)

If I give an opportunity to users to Autofill OTP in their browser, it would significantly benefit them by eliminating the hassles and decrease the dropoff.

Being a part of the Edge Studio in India, I work with a team of designers crafting experiences for different Edge verticals or frameworks. We collaborate with teams globally to bring designs to life.

The current flow displays a popup to manage permissions. These permissions are specific to the Edge app and can also be changed later from the settings. However, our research indicated that this scenario lead to user churn

My approach towards this problem was why the heck this bigger popup? Is that so necessary?

After investigating the actual case there were three major roadblocks

Intrusion: Filling OTPs is a quick and time-bound task, and there should not be any intrusion during this process.
Contextual Dismissal: No action to deny the popover.
Security Risks: Manually entering one-time passwords (OTPs) disrupts browsing, increases errors, and poses security risks.

As this was my first project, I gained more insights and now have a clearer understanding.

User Pain points Product requirements

How might I improve Edge browser’s user experience to decrease the churn of user in Auto-filling flows?

1. Reduced the size of popover

I thought of squeezing this popup because I felt reducing the popup size makes more sense.

Sounds like things are going smoothly, right? Wrong.

Me:

The design was rejected by all stakeholders.

We have a bunch of design review cycles and got feedback

"It's neither reducing the number of steps nor preventing the intrusion."

So, I took a different approach. The permission is a mandatory part and thus needs to show, not upfront but non-intrusive

2. Using contextual pills to to take actions

Here, I solved the 2 major problems:

A. Intrusive experience

B. Soft dismissal

Before

After

3. OTP Autofetch in Group Pill

Similarly, I used the same pattern to autofill OTP with high precision when it is accepted, it's very likely that the correct person is accessing the system and from where it's been fetched.

High recall is also very important. Users expect to receive their OTP's reliably. Failures can lead to frustration and lost transactions

Ensuring valid authentication & reliable delivery

Precision:

This measured how accurate the system is when it identified an OTP from all the OTP's

Recall:

This measured how well the system find all the valid OTPs from all the OTP's