top of page
Header.jpg

OTP Autofill in mobile

Increasing Precision and Recall in UX flows

Product

Microsoft Copilot

Deliverables

UX Research, UX Design, UI Design, Prototyping

Role

Product Designer

Overview
Solution.png
Frame 43747.png
Frame 43748.png
Frame 43749.png
Frame 43750.png
Introduction.png

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.

The Team.png

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.

Group 34654017.png

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.

My Role.png
Group 34654024.png

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.

Group 34654030.png
Group 34654025.png

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.

Group 3465051.png
Autofill in Microsoft Edge.png

Some data points which moved and increased usage and engagement.

Group 34654019.png
Group 34654020.png

But how did I move the numbers?

Current Problem.png

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 (Browser share of minutes)

Face with raised eyebrow.png
Hypothesis.png

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.

User Research.png

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. 

Home.png

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

Chart decreasing.png

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

Thinking face.png

After investigating the actual case there were three major roadblocks

  1. Intrusion: Filling OTPs is a quick and time-bound task, and there should not be any intrusion during this process.

  2. Contextual Dismissal: No action to deny the popover.

  3. Security Risks: Manually entering one-time passwords (OTPs) disrupts browsing, increases errors, and poses security risks.

more-feature-more-sales-sales.gif

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

2705_CheckMarkButton.png

User Pain points     Product requirements

Cross mark.png
Problem Statement.png

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

Ideation.png
edge screeng.png

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:

giphy.gif

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

edge screen.png

Before

Group 34654023.png
Home.png
edge screeng.png

After

edge screen.png
edge screen.png

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

2705_CheckMarkButton.png
The Outcome.png
Group 34654019.png
Group 34654020.png
Group 34654022.png
Thank you!.png

Next Projects

Frame 2117129810.png

Browse Next in document with

Bing AI

bottom of page