CTgoodjobsWeb FeatureJan - Mar 2023
Crafting a Secure and Efficient OTP Login Experience
Overview
In early 2023, CTgoodjobs encountered a serious security issue. Scammers were impersonating our recruitment consultants to steal user login credentials, which not only put users at risk but also harmed our credibility.
To address this, we introduced One-Time Password (OTP) login as an alternative, enhancing security while streamlining the verification process to reduce user friction. Our goal was to make logins safer, restore user trust, and increase login rates on our platform.
Successful logins
Unauthorised login attempts
Login security inquiries
🙋🏻♀️My role - Sole designer
- Led the entire design process from research to launch
- Crafted mockups and interactive prototypes
- Designed, developed, and tested the OTP email
👯Team members
- Product Manager, Business Analyst
- 2 Developers
Challenges
Tackling security concerns under tight deadlines
A rise in login failures and declining login rates caused by scammers made it urgent to restore user confidence and ensure security.
However, the development team was already focused on a major revamp project, leaving limited time to implement a solution. This created additional pressure to act quickly and effectively.
Reminders of frauds from CTgoodjobs
🤔 Why is user login so critical to CTgoodjobs and our users?
For our business
User login is critical to user behaviour tracking, which helps deliver personalised job recommendations and talent matching services.
A decreased login rate leads to fewer chances of successful matches with employers, affecting brand reputation and revenue.
For our users
A lack of secure login creates a significant obstacle for our users, preventing them from accessing and engaging with our platform.
Passwords are easily forgotten, leading to frustration and wasted time when resetting passwords.
Exploration
Enhancing security with passwordless login
To strengthen security, I brainstormed passwordless login options with the product and development teams. After evaluating One-Time Password (OTP), magic links and passkeys, we chose OTP for the following reasons:
🖥️ 📱Wide compatibility
OTP works seamlessly across devices and operating systems, ensuring accessibility.
⏱️Quick implementation
It integrates easily into our existing system without major infrastructure changes.
📔Low learning effort
OTP is simple and widely recognised, requiring users to enter a code from email or SMS.
However ... 🤔
While OTP improves security, it introduces extra steps that can slow the login process due to waiting for and entering the code. We did not want to sacrifice user experience in this case.
How might we design a streamlined OTP login experience while maintaining a strong sense of security?
Research
Learning from OTP Best Practices
I conducted a competitive analysis of popular platforms with OTP login to understand what makes a successful OTP implementation, focusing on usability, delivery efficiency, and accessibility.
💡Insights
- Fast OTP delivery is essential for a smooth user experience.
- OTPs should be easy to find within the email or SMS.
- Providing other login methods ensures accessibility for users facing OTP issues.
Analysing different applications of OTP login
Constraints
Addressing OTP delivery challenges
While OTPs can be sent via SMS or email, we chose email verification as it is mandatory for all CTgoodjobs members. However, we identified key challenges with email delivery and implemented the following solutions:
| 💀Problems | 🧚Solutions |
|---|---|
| Email server overload | Limit the frequency of OTP generation |
| OTP guessing by scammers | Set an expiration time for OTPs and restricted the number of submission attempts |
| Email stacking | Add a dynamic prefix to each OTP for easier differentiation |
By addressing these specific challenges, we proactively prevented technical issues and ensured a secure login experience.
User Flow
Designing the OTP login journey
I mapped out the OTP login flow to outline potential use cases, functionalities, and technical constraints. This helped ensure smooth integration into our existing systems and fostered a shared understanding within the team.
OTP login user flow
Final Design
Creating a seamless and secure login experience
As part of CTgoodjobs’ comprehensive revamp, the login panel was redesigned and integrated into the new interface to provide a cohesive and user-friendly experience for job seekers and employers.
OTP login on desktop
OTP login on desktop
OTP login on mobile
Integration
Adding OTP login to the existing flow seamlessly
To ensure familiarity, I kept password login as the primary method and added tabs to integrate OTP login into the existing panel.
This approach kept the login process simple and intuitive, avoiding sudden changes that could confuse users.
Switching login methods with tabs
User Guidance
Making OTP login simple and clear
To provide clear guidance on using OTP login, I designed a user-friendly OTP verification page that:
- Displayed the account email for re-confirmation to reduce errors.
- Prompted users to check the spam / junk folder if the OTP doesn’t arrive.
- Included a link to switch back to password login, ensuring flexibility.
The "Login with OTP" verification page
Interaction Design
Optimising OTP input & verification
I leveraged micro-interactions to create an intuitive OTP input and verification process:
- Used separate input boxes for each OTP digit with auto-focus.
- Enabled both typing and copy-pasting the OTP from email.
- Automated OTP submission upon completion, removing the need for a manual click.
- Disabled the submit button until the OTP verification is complete, reducing distractions and errors.
Pasting OTP and submitting the login form automatically
User Communication
Providing clear feedback to users
I also used micro-interactions to deliver clear and immediate feedback to users, which:
- Showed a loading spinner on the submit button to indicate when submission is in progress.
- Displayed real-time toast messages like “Requesting a new OTP” to confirm actions and enhance user understanding.
Displaying toast message after requesting a new OTP
Error Handling
Guiding users through errors
To reduce frustration during OTP login, I wrote clear and constructive error messages for different cases. These messages explain the problem and provide links to immediate solutions, empowering users to quickly resolve issues.
Supportive error messages
OTP Email
Delivering OTP securely
To ensure secure OTP delivery, I crafted the OTP email which:
- Embedded OTP in the email body instead of the subject line / pre-header to enhance security.
- Used enlarged font size and brand colours to help users quickly locate the dynamic prefix and OTP.
- Included clear contact methods so users could report issues immediately, fostering trust and reliability.
Email notifications and previews on mobile devices
OTP email design
Email Testing
Ensuring accessible OTP delivery across platforms
I created an interactive prototype of the responsive OTP email and thoroughly tested it across major email clients, devices, and appearance settings using Email on Acid. This rigorous testing helped identify and resolve potential issues before launch, ensuring a consistent OTP viewing experience.
Testing on Email on Acid
Impact
Encouraged logins and fostered a sense of security
We evaluated the impact of OTP login one month after its launch. Our data revealed the following key achievements:
Successful logins
Unauthorised login attempts
Login security inquiries
To gather feedback for continuous improvement, I implemented a pop-up survey for first-time OTP users. The responses were positive:
Pop-up survey for first-time OTP login users
Reflection
The subtle power of good design 🌟
At first glance, implementing OTP login might seem simple, but optimising the process requires careful attention to detail. Elements like micro-interactions were initially underestimated and seen as extra work by the development team.
To address this, I created interactive prototypes to show the value of each design choice. These prototypes demonstrated how small details can greatly enhance the user experience and successfully gained their buy-in.
This experience underscored the importance of refining even the smallest details to elevate the overall user experience.