Login with One-Time Passcode
Crafting a password-less future for seamless user journeys in employer-sponsored education and care
TIMEFRAME
2 months
ROLE
UX Design and Research
TOOLS
Figma, Mural, Full Story, Pendo & UserZoomGo
COLLABORATORS
Danielle Pirone - Product Manager
Ryan Adams - Business Analyst
Meena Menon - Director of Enterprise Product
Shashank Agarwal - Software Engineer Manager
Imran Dam - Quality Engineer
Overview
Bright Horizons is a platform that focuses on education and care, aiming to benefit children, students, teachers, families, and employers. The login/signup application connects different business areas with a single user registration process and employer verification. Implementing passwordless login with Multi-Factor Authentication (MFA) improves user access. In my job, I researched industry trends and customer needs to design this new system with the BH Login team and other departments.
Objective and Key Results
Streamline the username and password retrieval process to reduce support tickets and enhance the user experience.
Support tickets are reduced by 30%
Forget password usage down by 0.5%
Process
DEFINE
Understanding the Issue
Users frequently encounter difficulties with username and password retrieval, leading to an influx of support tickets.
Difficulty recalling passwords
Forgetting usernames
Issues not receiving reset password emails
Gathering Data Insights
Upon delving further into the matter and meticulously scrutinizing the data, it becomes apparent that a considerable percentage of login errors originate from situations where users have forgotten their passwords.
46% of login errors in October and November ‘23 were due to forgotten password
Over 4,000 support tickets were created around password issues in January and February ‘24
Employees cannot access their work email or are blocked from Bright Horizons communications
Learning the Industry Standards
I researched the industry and competition for this case study to find the best practices. We learned important information by looking at market trends, what competitors are doing, and what users want. This helps us create a user-focused Bright Horizons solution that meets or exceeds industry expectations.
Industry Best Practices
User Education
Device Recognition
Short and Time-Limited OTPs
Clear Instructions
Fallback Mechanism
User-Friendly OTP Delivery
Account Lockout Policies
-
Care.com
-
KinderCare Education
-
Winnie
-
LifeCare
-
Google
-
Credit Karma
Getting to Know the User
User personas were created to provide a clear understanding of the varied needs and goals of both new and existing users within the context of Bright Horizons' benefits platform. These personas serve as guiding frameworks, allowing us to design a more intuitive login/signup process that addresses the common struggle of remembering credentials while ensuring a seamless user experience.
IDEATE
Why choose a password-less approach?
Passwordless login using one-time passcodes (OTPs) presents a contemporary approach to authentication, offering heightened security and streamlined user experiences in today’s digital landscape.
Pros
Enhanced Security
Convenience
Reduced Password Fatigue
Resistance to Phishing
Cons
Dependency on Delivery Method
User Experience Variability
Potential for Delays
Defining the User Flows
The product and development teams worked together to create a user flow for the non-federated clients that would use the new passwordless approach for login, forgot username, and forgot username. This was an iterative process with many versions prior to this final version.
Exploring Design Options
Promoting New Features
The system first collects and verifies the username to identify available OTP methods, requiring username and password inputs on separate pages. If the username or email is correct and the employer supports the passwordless feature, the "Login with OTP" option appears.
During the new password page development, various designs were considered. The team highlighted the OTP feature by making it the primary button, encouraging more users to adopt this method.
Redesigning Two-Factor Authentication
While updating the login method to eliminate passwords, we thoroughly tested and revamped the two-factor authentication system. The aim was to simplify the user experience and address confusion about the steps. To streamline the process, the team chose a single-page approach, avoiding extra pages to keep the sign-up form concise.
PROTOTYPE
Visual Design
Now that all of the frameworks were in place, I worked on high-fidelity prototypes for guidance on later development and validation testing for the users before actual code-based work.
Login Designs
The first round of changes were to the login flow. The username and password was split up into two pages so that the backend is able to determine if the username is valid and the user has the feature flag for the one-time passcode login. From there, they can choose to login with a password, login with one time passcode, or access the “forgot password” flow.
Sign Up and Forgot Credentials Designs
The second round of work was done looking at the registration process and the forgot username/password flow. With the new implementation, users are able to go through the forgot password or forgot username flow and find their credentials on screen without waiting for an email. The sign up flow now gives all users the ability to set up two-factor authentication to use mobile numbers in the passwordless login flow.
TEST
Getting Feedback
In order to confirm the usability of the new flows, tests were run using UserZoomGo with 10 participants from the US and UK over the age of 18 with at least a high school diploma. With the prototype provided, the participants were asked to complete 2 tasks.
Your company, RadioShack, has given you access to Bright Horizons benefits as Jane Doe. Your email is janedoe@company.com.
1. Set up your account. Remember to set up 2 factor authentication towards the end and give feedback.
2. Pretend you are going back to the platform for the first time in a while. Try to login to the platform, but you aren’t 100% sure of your password. You believe it is passWord123! but you do have access to your email and phone for text messages.
The results of the tests were extremely promising. Most users stated that the process was intuitive and they enjoyed the ease of recovering their password using the one-time passcode flow. The users that had some issue of quit simply thought they were done with the task. The issue most likely stems from the writing of the task.
DEVELOP
Agile Framework
After the planning phase was done, the feature was broken up into various flows and UIs to write user stories in the Azure Boards. They were taken to refinement and then put into separate sprints. As the sprints went on, the developers were free to contact me or the product manager to ask any questions or bring up any concerns.
Product Support Training
Before the release, the last thing to do was meet with all of the different product support groups across the organization to train them on the new feature. We wanted to ensure the release was smooth and the users could get help if they ever had any issues. To do this, we came up with a presentation that gave a general overview of the feature as well as walked through the prototype so they could see it in action. This was accompanied by a document with frequently asked questions. The meeting to present this information went well and the teams had lots of insightful questions that were added to the documentation for later use.
Penetration Testing
Bright Horizons cares deeply about their clients’ security and accessibility, so they hire third parties to test their software inside and out before it is released. Based on the initial round of pen tests, there were a few major issues that the team had to address. Communication was essential, leading to quick and effective solutions between development, product, and design.
Measuring Success
The team measured the success of these changes based on conversion rate, reduction of support tickets, OTP profile completion, and user adoption rate to reach the OKRs set by product and leadership. Below are the findings after just over a month.
70%
Increased conversion rate from the login page
23,000
new mobile numbers captured in the OTP profiles
55%
user adoption rate of passwordless login
Learnings Recap
Throughout this project, several key learnings emerged, reinforcing the importance of user-centric design and collaboration. One notable lesson was the effectiveness of password-less authentication in enhancing user accessibility and security. Additionally, the significance of thorough testing and iteration in refining the user experience became evident, ensuring that the final product met user needs and expectations.
Insights
One surprising insight from user research was the extent of password-related issues faced by users, particularly the prevalence of forgotten passwords leading to support tickets. This highlighted the urgency of implementing a more streamlined authentication process to alleviate user frustration and reduce reliance on customer support.
Most Enjoyable
I particularly enjoyed the ideation phase of the design process, where we explored various approaches to implementing password-less authentication and iteratively refined the user flows. It was rewarding to see innovative solutions come to life and contribute to a more seamless user experience.
More Designs
Transforming Education Together: A Collaborative Journey from Problem Exploration to Implementation Excellence.
Crafting a Unified Design System to Transform Mental Health Experiences with Intuitive and Engaging Interfaces
A strategic UX overhaul fostering engagement, empowerment, and aesthetic coherence in the realm of dance.