Overview Challenges Process Final Design Impact Reflection
Overview image of CTgoodjobs' one-time password login panels

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.

24%

Successful logins

30%

Unauthorised login attempts

60%

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
OTP login overview
OTP login overview

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

Reminders of frauds from CTgoodjobs


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

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

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 desktop

OTP login on desktop

OTP login on mobile

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.

Placeholder

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

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.
Placeholder

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.
Placeholder

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

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

Email notifications and previews on mobile devices

OTP email design

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

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:

24%

Successful logins

30%

Unauthorised login attempts

60%

Login security inquiries

To gather feedback for continuous improvement, I implemented a pop-up survey for first-time OTP users. The responses were positive:

  • 94% of users were satisfied with the OTP login.
  • 88% of users felt the OTP login was secure.
Pop-up survey for first-time OTP login users

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.

Thank you for reading