Home / OTP

OTP: Fixing a leaky funnel and improving conversions

UX Design, Interaction Design, Financial

Product Icon

Product
OTP Redesign

Client icon

Client
Scotiabank Colpatria

Date icon

Date
2019


An OTP, or one-time password, is a code sent to the mobile device or email address of a person in order to verify their identity during a transaction or when entering a protected area.

An early design of the OTP that I used to create the prototype
One of the early designs I made for the project

The challenge

The performance of the Online Banking & Sales flows was being affected during the identity verification process (the OTP). Business metrics were at risk due to an alarming 77% decline in users who were verifying their identity by text message.

The goal

We had to develop an action plan to mitigate the bounce of users during the OTP process and implement the fix in a reasonable amount of time. From a design perspective, this involved fixing the most critical usability issues and finding opportunities to improve the conversion rates.

My role

This project (the fire 🔥) came up when I was working as the UX Lead for Sales and Onboarding. The role I assumed was a mixture of Interaction Designer and UX Consultant. My colleague, the Lead of Online Banking and the Head of Design were also involved in this project.

A whiteboard with drawings
Initial planning on a whiteboard. We came up with some exciting ideas!

User Research

We began this project by examining the data thoroughly from end-to-end, ensuring that the metrics we had were 100% up to date and there were no gaps in the information. Based on this analysis, we were able to confirm and define the scope of the optimization, which was initially going to be limited to the redesign of the OTP module.

Diagram with the planned steps for the project. Each phase is presented on the double diamond layout
An outline of the project phases and the planned steps

During the initial discovery phase, I benchmarked multiple digital platforms. This analysis provided me with a better understanding of what was/wasn't working and the opportunities I had for improvement.

A screenshot of the benchmark study featuring two apps and four screenshots per app
A screenshot of two of the apps I used during the benchmarking study

Research Activities

I met several times with the Product team and other designers to compile ideas and hypotheses for the project. Furthermore, during the conversations with the research team, I sought to really understand why users dropped off at the OTP, as well as how to address the critical issues with the experience and consequently achieve the right outcomes.

Despite the short execution window (as in most tech companies) we were able to conduct interviews, usability tests, and more in record time. We also wanted to understand how users perceived the security measure of getting a code on their mobile phone, while in the middle of a transaction or opening a new product.

Pain Points

According to our research, we found that in a large percentage of cases, the pain points were different depending to the users' segment. Here are some examples:

1

Confusing numbers
A common mistake for some users was to confuse the OTP code with the phone number used to send the code. They weren't sure which number to enter.

This screenshot shows a phone notification with the one time password listed next to the phone number. This is potentially misleading.
The above screenshot shows the actual message delivered to users
2

UI/UX issues
OTP was being perceived as an error by several users. Some of them also thought that they had accidentally left the flow. There was an opportunity to provide better contextual information.

3

Level of trust in the security measures
In some cases, the risk engine launched an additional screen next to the OTP on which the user was asked to enter the PIN of their debit card. Users were confused and suspicious by this extra layer of security.

The Design

We faced a major challenge in finding a way to integrate the OTP into any flow without hardcoding it into any existing product. This was due to the dynamic nature of the risk engine and the security policies.

Here is a diagram showing the OTP at the center of new and existing customer flows
The diagram above illustrates the relevance of the OTP redesign for all the online actions performed by our customers back in 2019

To solve this, we implemented a new in-context component called Bottom Sheet. We iterated the design several times and achieved the best possible experience for our mobile and desktop users.

Logos of the 30 companies used for the benchmark
These wireframes compare the current (old) flow with the new one that we were proposing

We divided the tasks and conquered. My colleague created the UI using Sketch, while I created an interactive prototype using HTML. My goal was to develop something very close to the final result in the browser.

This is a recording of the prototype I created for the project.
Here, the OTP is triggered at a specific point in the transaction

I worked on the HTML and CSS code using Bootstrap. It wasn't my first time styling Bootstrap, and I already had a few similar experiments in Codepen, so the coding was easy and relatively quick for me. The prototype was responsive so we could test it on desktop and mobile.

This video shows that when a specific breakpoint is reached, the Bottom Sheet becomes a Modal component

Just a day before the usability testings, I was able to add one of those sexy details to the prototype that made a difference: a preloading animation, which I created using After Effects. Cool huh?

Logos of the 30 companies used for the benchmark
GIF animation I created for the OTP module.
I was also able to export it as a JSON file compatible with Lottie

Takeaways and Findings

One of the most important learnings from this project was that having the right copy will make a big difference. Since it was important to deliver a clear and concise message to the users, we partnered with the Content Team to create the best copys for the context information.

We also found out that for some users, it wasn't convenient to receive the code on their phone. In order to enhance the user experience, we also developed a secondary option to the SMS code, which consists on sending a one time code directly to the email of the user. Win-win!

Another lesson learned was that having to create and implement a component from scratch increased the risk of not meeting the deadline (also my anxiety levels!). I presented the engineering team an alternative that involved a regular container within the main template. Nevertheless, I closely monitored the progress to make sure we were on track for the release of the OTP with the Bottom Sheet, which we did!

For a long period of time after the release, I tracked the new OTP's performance and the results were incredible. This means, we did not only comply with the requirement to mitigate the drop off of users, but we also improved the experience and laid the foundation for many of the product redesigns that are currently underway at the bank. Thanks for reading!