Home / OTP
OTP: Fixing a leaky funnel and improving conversions
UX Design, Interaction Design, Financial
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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 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?
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!