A smooth and seamless verification experience is crucial for Free trial as it allows the user to sign up quickly and it is the key to build user trust at an early stage.

On the market, there are tons of different versions of verification flow. However, none of them is "perfect". That's why when asked to design a brand new free trial experience for Urban Sports Club, we decided to create our own. 

---

For most types of B2C products, allowing the user to try out the product before the purchase has been proved to have a huge positive impact on the conversion rate and customer satisfaction. This time, we are trying to bring this new feature to our product for the first time.

Verification, as an essential part of the free trial experience, defines how smooth and willingly the user is going to sign up.  We started with drafting out wireframes with the team. The developers are heavily involved from the beginning. We created 6 different wireframes and prototypes, we voted and tested on 5 users.

In the usability test session, we discovered that our challenges are:

​

Challenge 1.

Need to enable the user to change the phone number immediately after they realized the input phone number is wrong. And most of the users only double-check if they input the right number after the first click of "send";

​

Challenge 2. 

Need to provide extra information to let the user understand why the SMS verification is necessary (because we want to ensure one person can only create one account), and make clear that promotions and advertisements will not be sent to the user;

​

Challenge 3.

For free trial - Need to clarify the summary box for the free trial as it is the first thing they are going to look at and it is currently confusing. And for some of the user they might hesitate to go to the next stage as they need to 150% sure that they are not going to pay.

​

...

​

All of this is to ensure that we give the user the best of experiences even in the smallest details.

ONE STEP AT A TIME

As human, we perform so much better when there is only one task at a time, it helps us focus and make fewer mistakes.

This is also true when we test our prototype on testers. This results in this design where the user can only move to the next step when he/she successfully entered a valid number. Any registered number or numbers in the wrong format will be detected at the first stage. This means the user will have immediate feedback at the first stage, hence reduce fractions later on.

ALWAYS HAVE A CHOICE 

One of the biggest frustration of the users we discovered in the testing was that they don't know how to edit their number once moved on to the next stage. They were so frustrated that they will basically do anything: refresh the browser, try to find the "back" button, even leave the site.

After learning this frustration, I decided to add "change number" in a very light ghost CTA style right after the text. This is because I want to keep the overall UI in a "light-weight" range and a "ghost button" will not compete with the main CTA.
When the user clicks "change number" it will lead the user to the previous step where the old number still appears.

RESEND IN 60 SECOND 

From a tech point of view, once the code is generated, there should be a proper amount of time (60s) for the backend to respond. How to properly communicate this waiting time to the user, how the user would interact with the interface, and what if the code failed to arrive become a problem.

Finally, after testing different prototypes on 5 users, we came to a solution.