YouTrip

Reinventing the traditional onboarding

YouTrip
Project Duration
4 Months
Scope

Strategic Planning

User Interview

UX Design

UI Design

User Testing

Sector

Travel

FinTech

Multi-currency wallet

Platform
App

Background

YouTrip is a multi-currency mobile wallet with a prepaid Mastercard® that offers zero transaction fees across 150+ currencies at wholesale exchange rates and also allows for the exchange and storage of 10 selected currencies.To celebrate YouTrip’s 3rd anniversary, we are bringing app 2.0 with new features and enhanced experience to the users and prepare for travel to resume. I was assigned to work on the Onboarding as it’s crucial for acquiring new users.

Problem

Discovery

  • Review the onboarding funnel to discover the potential reasons that lead to the drop off
  • Talked to CS colleagues to understand user’s problems during the onboarding process
  • Talked to engineers who built the onboarding to find out if there are any legacy issues/constraints we need to take into consideration
  • Competitor analysis to find out our advantage and disadvantage
  • Regularly monitoring the App Store/Play Store to understand user’s complaint
  • Discuss with business development and compliance team to understand what information we need to get from users

Problem statement

The technical issue such as unable to login with Email, length sign up with no sense of progress, ID scanning issues and long physical card delivery time leads to abandon sign up and high user acquisition cost
How Might we

create a Simple, Quick, Transparent, Interactive onboarding experience with high conversion rate and reduce user acquisition cost

Design

Design Principles

K.I.S.S

we aim to make the onboarding process as simple and self explanatory as it can to minimise the friction and CS enquiries

Quick

We aim to shorten the sign up process to 3 minutes by removing/combining the unnecessary steps

Transparent

Users should have a sense of where they are in the application processand how much longer it needs to complete

Interactive

The form filling process is dull. Providing an interactive experience is the direction we set to make user feels like it is applying with a real service agent

Speed up

New KYC Service Provider

Approve MyInfo application (~90% user) as quick as 5s

Virtual Card

Users no longer need to wait for the physical card to arrive in order to start using YouTrip and it also reduce a big portion of our CS enquiries relate to Card Delivery

Exploration

I started exploring different designs and gather feedbacks from peers and internal users to see what they think as a user.Below are some inspiring feedbacks I received:Most users don’t read the app intro, how could we share the benefit of using YouTrip in a fun and interactive way? The overall design doesn’t feel much difference compare to the current version, can we make something out of the box?

Prototype

Expected Results

As HK Office was closed down suddenly and we didn’t get the chance to push the project in development, here are the key changes expect results:

≤3 mins

Time to open an account - MyInfo application

≤5 mins

Time to open an account - Manual application

-30%

No. of clicks to open an account

-40%

CS Enquiries about Card Delivery

-30%

Overall onboardingdrop-off rate

Takeaways

Don’t set boundaries

Whenever designing something new, think broad and go wild. Don’t limit yourself with different constraints. That’s how I overcame to achieve some out-of-the-box design as well as my top 3 favourite project

Proactive ask for feedbacks is the way to improve

Being a Junior Designer before joining this company, I wasn’t sure about showing unfinished work to my peers as I thought the quality may not up to standard. In this project, I was encouraged to share more to get feedbacks from different perspectives would inspire my design decision.

Overview - What is YouTrip and why am I redesigning the onboarding?

YouTrip is a multi-currency mobile wallet with a prepaid Mastercard® that offers zero transaction fees across 150+ currencies at wholesale exchange rates and also allows for the exchange and storage of 10 selected currencies.

To celebrate the 3rd anniversary, we are bringing app 2.0 with enhanced experience and new features to the users. Onboarding is one of the highlights of the YouTrip 2.0 as it plays a significant role in onboarding new users.

Our Team

  • Jeffrey Lee (Me) - Product Designer
  • Kate Siu - Lead Product Designer
  • Stefano Lau - Product Designer
  • Jonathan Au-Yeung - Senior Product Manager

I was the designated designer for this feature. I participated in all stages of the design process for this feature including the user research, user flows, hi-fi wireframes and prototype.

We review everything together regularly to refine the design and present our final solution to stakeholders and the product manager will document the spec and start the development process once it is approved.

Problem Discovery

What’s the problem with the current onboarding? How can we do better?

  • Check our dashboard to understand the drop off rates in different stages of the onboarding
  • Talked to CS team colleagues to see if there are any known issues and customer complaints about onboarding
  • Talked to engineers who built the 1.0 onboarding to see if there are any known issues/constraints we need to know
  • Competitor analysis to see what we fall behind and what is our advantage
  • Review App Store and Google Play on regular basis to look for onboarding related user comments
  • Talk to our business development and compliance team to understand if there are any necessary information we need to get from users

Current onboarding journey

To better identify the problem in each stage of the onboarding. I broke down the onboarding into 4 parts:

Splash Screen & Start Screen

Ineffective app introduction - despite we have introduction screens explaining what the app is about, we found most users skip this section and often ask questions related to our core features

Pre KYC (Mobile Verification & Enter Email)

Only provide the login with email option after user requested the OTP (Unnecessary SMS Cost and we have received some CS enquiries asking if we have login with email option as they are travelling and couldn't get the OTP)

KYC (MyInfo)
KYC (Manual Singaporean)
KYC (Manual Foreigner)

KYC (MyInfo & Manual)

  • Huge room for improvement on the form filling process (feels lengthy and redundant), it could be drastically improved by adding some micro-interaction
  • No sense of progress as user proceeds, user don’t know how much more time they need to spend to complete the sign up

Post KYC (KYC Result, Set pin, virtual card, physical card tracking and card activation)

  • New KYC service provider would allow us to approve user who applied through MyInfo flow instantly
  • A new flow is needed because we are introducing Virtual Card, meaning user can start spending without waiting for their physical card to arrive
  • A large portion of our CS enquiries is about Card Delivery, to provide a better experience to users, we will also be introducing card delivery tracking to users so that they can keep track of where their card is

What's the problem?

After reviewing all the formation we have gathered, we noticed the existing onboarding process is lengthy and users often drop off during the KYC approval stage while waiting for physical card delivery.

How might we create a Simple, Quick, Delightful and Transparent onboarding experience for the new users to reduce the drop off rate?

2.0 Onboarding Design

With the help of new KYC service provider and virtual card technology, we have the opportunity to drastically shorten the application process and reduce drop off rate.

  • New users who applied through MyInfo will be approved as soon as 5s if their information is correct (New KYC service provider)
  • Approved new users can start spending online instantly with their virtual card without having to wait for the physical card to arrive

2.0 onboarding journey

Early Concepts

By understanding the known issues that we have, I started working on the early concept to explore different design directions and get feedback via internal user testing. And eventually get to the final design after few iterations. Below are some key feedbacks I’ve learned along the way:

  • Most people don’t read our app’s benefit, how can we educate them at the first place in a fun and interactive way?
  • The form filling process is too boring, could we make it more fun?
  • The design is too traditional and is not bold enough to match our 2.0 branding
  • How could we bring the Cyberpunk design philosophy to the onboarding?
  • Could try to play around with the flow, it doesn't have to follow the existing flow at the early stage

Final Design

With the feedback I have received, I went back and tried to brainstorm some new ideas with others.

A new idea came to our mind, Conversational-Like UI to make the onboarding journey more interactive and at the same time way more interesting with human touch.

Splash Screen & Start Screen

To make our app more interesting, we introduced Instagram story style videos to explain the benefits of using YouTrip and we've also added a Rate Calculator to show users how good our rate is (10 exchangeable currencies) compare to the major competitors.

Pre KYC - Enter Mobile Number, Email and Promo Code

The enter promo code is now moved to the enter email page after we verified user's phone number. We found from the previous Thailand Referral Program that the earlier user enters the promo code, the more likely they are going to complete the sign up.

KYC (MyInfo) - Conversational-Like UI

We’ve experimented with few different options and finally decided to adopt Conversational-Like UI to add human touch and speed up the application process. We believe this not only give a refreshing experience to our users but also improve the drop off as we have removed some unnecessary information for user to review.

KYC (Manual) - Form Filling UI

We’ve also tested the same approach for the manual flow but unfortunately it makes the form filling process much more complicated and difficult. Therefore we decide to introduce the Conversational-Like UI only for the MyInfo Flow.

Therefore, for this part of KYC (~30% of users apply manually), we keep the original form filling design but optimised the micro-interactions to reduce the number of clicks user needed to fill all the information required. (e.g. automatically jump to next field when DOB is filled)

Name On Card

Since the new card card details will be at the back of the card, I’ve added a short animation to spin the card from the front to the back and also gives a preview to our new users of how their new card looks like

Post KYC (MyInfo & Manual) -  KYC Result, Set Pin, Home Screen

By default, we used user's name on card as their user name but we also allow them to customise user name for future user communication. Once it is set, we would show a short animation showing them they can start spending online with the new virtual card.

Prototype

Expected Results

Here are what to expect 3 months after Launch:

  • Reduce the number of clicks to open an account on YouTrip by 20%
  • Shorten the onboarding time to ≤3 mins for MyInfo, ≤5 mins for Manual Flow
  • Reduce CS Enquiries about Card Delivery by 50%
  • Improvement in our onboarding drop off tunnel

(OTP > Sign Up > Card Activation > Spending > Spend a lot)

YouTrip
Next case study