Design enhancements to mitigate unauthorised takeover of accounts

Duration: 1 month


Tools: Figma


This project was conceived in response to an increase in number of unauthorised account takeovers, particularly impacting users with active or past subscriptions.

About the project

In its initial phase, the business focused on creating a streamlined user experience to facilitate platform adoption. This approach minimised the complexity of account creation and account updates. While successful in the early stages, it subsequently presented security challenges for the business.

Two account creation options are currently available on Viki: email/password and social login. In the past, users who opted for email signup were able to modify their registered email address unhindered by secondary verification measures. This gap posed a security risk.


This resulted in a significant increase in unauthorised user account takeover incidents. Efforts to recover compromised accounts are no longer a productive or effective use of resources. Therefore, a design enhancement is needed to address this security gap.

Before implementation

Solution and challenges

To strengthen account security and prevent unauthorised email changes, a one-time-password (OTP) will be required whenever a user initiates an email update.


Implementing OTP verification is a straightforward concept, but integrating it seamlessly into the user experience can be challenging.

Tight timeline

Edge cases and
unhappy paths

Improving UI

Copy and localisation

To address the ongoing issue of account takeovers, the feature has to be production ready within a short amount of time. In order to expedite design delivery, a high-level user flow is created and shared with stakeholders to ensure alignment.

Challenge 1: Tight timeline

Challenge 1: Tight
timeline

To address the ongoing issue of account takeovers, the feature has to be production ready within a short amount of time. In order to expedite design delivery, a high-level user flow is created and shared with stakeholders to ensure alignment.

Click on image to enlarge

Click on image to enlarge

Challenge 2: Edge cases and unhappy paths

Challenge 2: Edge cases
and unhappy paths

Click on image to enlarge

Successful implementation of this feature is dependent on close collaboration with back-end developers to establish well-defined edge cases and error handling (unhappy paths). Furthermore, to optimise security, developers propose limiting the number of OTP attempts. As such, the designs need to clearly communicate this limitation to users.

Challenge 3: Improving UI

Challenge 3:
Improving UI

Click on image to enlarge

To enhance user experience and expedite the OTP entry process, the default text field has been replaced with individual input boxes. This visually communicates the expected number of digits in the OTP code, simplifying user input.

Challenge 4: Succinct copy

Challenge 4:
Succinct copy

Click on image to enlarge

As this is a new feature that users are not accustom to on the platform, succinct and clear copy plays a vital role for a successful implementation.


Also, a delicate balance is needed between providing users with the necessary information and safeguarding against oversharing of information to unauthorised individuals.

Click on image to enlarge

Impact of deploying the fix

Following the deployment of the OTP feature, unauthorized account takeovers have been successfully eliminated. This translates to significant reductions in manpower and resources previously allocated to manually block unauthorised access and account recovery efforts.

Possible next steps

Click on image to enlarge

Due to localisation, the helper text and the resend component truncates and collapses as the timer counts down. This can be mitigated if character limit were set to account for all the languages Viki supports.


While the OTP feature effectively addresses the security gap for email/password logins, a future-proof approach should explore passwordless account creation and login for enhanced security.