Home / OTP

OTP: Repairing a leaky funnel and improving conversion rates

UX Design, Interaction Design, Financial

Product
OTP Redesign

Client
Scotiabank Colombia

Date
2019

A one-time password (OTP) is a code sent to a person's mobile device or email address to verify their identity during a transaction or when accessing a protected area.

The challenge

The identity verification process (OTP) was negatively impacting the performance of online banking and sales flows, with a 77% decline in users verifying their identity via text message. This put business metrics at risk.

The goal

The objective was to develop a plan to reduce user drop-off during the OTP process and implement the solution in a timely manner. From a design perspective, this involved addressing critical usability issues and finding ways to improve conversion rates.

My role

As the UX Lead for Sales and Onboarding, I took on a hybrid role as an Interaction Designer and UX Consultant on this project. The Lead of Online Banking and the Head of Design were also involved.

A whiteboard with drawings — We conducted initial planning on a whiteboard and generated some exciting ideas.

User Research

To begin this project, we thoroughly examined all available data from end to end to confirm and define the scope of the optimization, which initially focused on redesigning the OTP module.

Diagram with the planned steps for the project. Each phase is presented on the double diamond layout — A project outline detailing the phases and planned steps.

During the discovery phase, I benchmarked various digital platforms to gain a deeper understanding of what was and wasn't working and identify opportunities for improvement.

A screenshot of the benchmark study featuring two apps and four screenshots per app — A screenshot showing two of the apps utilized during the benchmarking study.

Research Activities

I met with the product team and other designers multiple times to gather ideas and hypotheses for the project. In conversations with the research team, I sought to understand the reasons for user drop-off at the OTP and how to address critical issues with the experience to achieve desired outcomes.

Despite the short execution window, 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 receiving a code on their mobile phone during a transaction or while opening a new product.

Pain Points

According to our research, we found that the pain points varied significantly among user segments. Some examples include:

1

Confusing numbers
Some users were unsure which number to enter, as they confused the OTP code with the phone number used to send it.

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
Some users perceived the OTP as an error or thought they had accidentally left the flow. There was an opportunity to provide clearer contextual information.

3

Trust in online security measures
In some cases, the risk engine displayed an additional screen alongside the OTP, prompting users to enter the PIN of their debit card. This caused confusion and suspicion among some users.

The Design

One of the major challenges we faced was finding a way to integrate the OTP into any flow without hardcoding it into any existing product, due to the dynamic nature of the risk engine and security policies.

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

To address this, we implemented a new in-context component called the Bottom Sheet. We iterated on the design multiple times to achieve 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 proposal.

To divide and conquer the tasks, my colleague created the UI using Sketch while I developed an interactive prototype using HTML. My goal was to create something that closely resembled the final result in the browser. I used Bootstrap for the HTML and CSS code, drawing on my prior experience styling Bootstrap and my experiments in Codepen to make the coding process smooth and efficient. The prototype was responsive, allowing us to test it on both desktop and mobile.

This is a recording of the prototype created for the project, where 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 demonstrates that the Bottom Sheet transforms into a Modal component at a specific breakpoint.

Just a day before the usability testing, I added a preloading animation using After Effects to enhance the prototype.

Takeaways and Findings

One of the key learnings from this project was the importance of having the right copy. Since it was crucial to deliver a clear and concise message to users, we worked with the Content Team to create the best copy for the contextual information.

We also discovered that some users did not find it convenient to receive the code on their phone. To improve the user experience, we developed a secondary option of sending a one-time code directly to the user's email. Win-win!

Another lesson learned was that creating and implementing a component from scratch increased the risk of missing deadlines (and my anxiety levels!). I presented the engineering team with an alternative that involved using a regular container within the main template. However, I closely monitored the progress to ensure that we met the deadline for releasing the OTP with the Bottom Sheet, which we successfully did.

In the time following the release, I tracked the performance of the new OTP and the results were impressive. Not only did we meet the requirement of reducing user drop-off, but we also improved the experience and laid the foundation for many ongoing product redesigns at the bank. Thank you for reading.