Home / OTP
OTP: Repairing a leaky funnel and improving conversion rates
UX Design, Interaction Design, Financial
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 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 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.
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.
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.
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.
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.
According to our research, we found that the pain points varied significantly among user segments. Some examples include:
Some users were unsure which number to enter, as they confused the OTP code with the phone number used to send it.
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.
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.
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.
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.
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.
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.
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.