
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






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 (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





