Youpi | Onboarding Process

Redesigned the onboarding process for two newly discovered user groups after beta testing

Timeline
April - May 2021 (2 months)

Team
Product Manager
Business Development Manager
CTO + 2 Developers

Tools Used
Adobe XD, Ideate, whimsical, pen and paper, Zoom

Role
UX/ UI Designer- User Research, Data Analysis, Project Management, UX Design

Project Summary
Youpi's Redesign started when 30% of our feedback from beta testing was from the registration process, with around 60% of testers who couldn't even create an account. Youpi neglected the users that travel back and forth between Canada often, and also the users in China that pay bills for their Canadian family. Youpi's redesign focuses on accommodating these users, with other minor fixes. The redesign was then taken and launched with the rest of the app in May and resulted in a 95% decrease in customer support tickets.
Product Overview
Youpi is a bill payment platform that allows users to pay Canadian Bills using RMB (Chinese currency). It supports payment methods such as WeChat Pay, Alipay, and UnionPay, which are the biggest mobile payment platforms in China. Payments made on Youpi are considered as a normal cross-border consumption of WeChat Pay, Alipay, and UnionPay, so it will not be counted towards each user's $50,000 USD per year foreign exchange quota. Youpi currently supports over three thousand local organizations such as hydro, telecommunications, tuition fees, and property tax in Canada and is continuously updated (e.g Shaw, Fido, BC Hydro, UBC.etc).
Platform
Youpi is currently designed for WeChat and Alipay H5, which is a mobile browser within the two apps. It will eventually be developed into a standalone app launched in the app stores. The difference between the interfaces is that H5 pages have their own fixed navigation bars/back buttons (similar to a chrome or safari browser), and have limitations on certain functions.
My Role
I joined the project while Youpi was undergoing private beta testing. As the sole designer on the team, I was in charge of transforming user feedback into solutions. I closely collaborated with the Product Manager, developers, as well as our customer service team to create a better onboarding experience that tailors to all of our users in different scenarios. My main areas of responsibility include:
- UX Analysis (flow and persona)
- Design (app)
- Prototyping
Scope and Constraint
The beta test conducted was the first time Youpi had any sort of user test. My company didn't realize the benefits of user testing and thought it would be a waste of time/money. The previous designer is a graphic designer turned UI designer and lacked in-depth knowledge of many UX processes.  However, I was hired and helped change the company's perspective on user tests when I presented the findings to them.
Screens include translations on the side for a better understanding of this case study. As of now, there is no English version of the app as our target users all understand Chinese.
I started by laying out all the screens to create a task flow of what the users saw during the beta testing. Here are a few quotes translated from the testers after using our app.
"I don't have a Canadian Number"
"I travelled back to China recently and forgot my password, but I can't reset my password without a Canadian number receiving a verification code"
"Is there a way to save my password?
"I gave up because I couldn't signup without a Canadian number"
"I want to see what the app does first before signing up"
Screen Analysis
Based on the user feedback, I analyzed the main screens and highlighted where problems showed up for these testers. I also labeled some unnecessary elements that these testers didn't even look at.
The Problem
The biggest problem is that the existing design completely neglected two types of users: the ones not in Canada, and the ones that travel back and forth. One of our main users is the parents of the international students who help pay tuition for their kids. Youpi was originally designed specifically for paying tuition, as a single year of tuition exceeded a user's $50,000USD foreign exchange quota. Payments made on Youpi are considered as a normal cross-border consumption of WeChat Pay, Alipay, and UnionPay, which would ease the lives of these parents. Although Youpi was designed with this user group in mind, we completely neglected the possibility that these parents may not have a Canadian Phone Number. Without a Canadian Number, these parents would not even be able to sign up.

Another type of user that was neglected is the ones who travel back and forth between Canada and China. This means that although they have started off with a Canadian number, they cannot reset their passwords if they leave Canada.
New Personas
After conducting the screen analysis and finding the main problems, I revisited the target users and created 3 personas. Previously, the company had a general idea of the target audience but didn't create specific personas, which could justify the reason why an entire user group was neglected.
Screen Analysis Opportunities
With these new personas in mind, I went over the screen analysis problems and found opportunities for improvements or elements that could be removed. Noticeable areas of improvement are:
- Adding an option for Chinese phone numbers
- Adding an alternative login method
- Adding an alternative password retrieval method
- Error messages after each field
Wireframes
I quickly sketched out my ideas to better visualize the screens, and jumped straight into the final designs as there were minor UI changes only.
Solutions
The final solution was edited based on the previous UI Design. The task flow below shows a layout of the entire Registration Process.
Screens include translations on the side for a better understanding of this case study. As of now, there is no English version of the app as our target users all understand Chinese.

1. Registration Process
Youpi's redesign allows users from Canada and China to create a Youpi account. The form is kept short so users can quickly browse the app without spending much time at the registration. The phone number is used as the main identifier of the user as it is more unique, and an email is used as a secondary identifier that will mostly be used for account retrieval.

2. Login Process
Each user is identified based on their phone numbers, as it is more of a unique identifier while compared to an email. An alternative login method for Youpi's login process was wanted as the H5 platform didn't save passwords, which frustrated the users who often forget their passwords. Therefore, a mobile verification login method was added. A code will be sent to the user so the users are not required to remember their passwords. As long as they can receive an SMS, they will always be able to log in.

3. Forgot Password
Based on the feedback and the newly created personas, we discovered that one of the user group travel often, and might not be able to retrieve an SMS code for resetting their passwords. Therefore, we added an email verification code retrieval option for this type of user. Although emails are used as a secondary identifier, users still have to verify their emails when they register, and they also have to verify both the old and new emails when they want to change their email.

4. Third-Party Authorization
With third-party authorization, users can speed through the registration process. Since the third-party app doesn't have all the form fields that we require, we added an additional "complete your profile" form. The form field was shortened so users only have to fill in the necessary fields for creating an account, and the rest of the information can be completed in the app's profile section.

1. Registration Process
Youpi's redesign allows users from Canada and China to create a Youpi account. The form is kept short so users can quickly browse the app without spending much time at the registration. The phone number is used as the main identifier of the user as it is more unique, and an email is used as a secondary identifier that will mostly be used for account retrieval.

2. Login Process
Each user is identified based on their phone numbers, as it is more of a unique identifier while compared to an email. An alternative login method for Youpi's login process was wanted as the H5 platform didn't save passwords, which frustrated the users who often forget their passwords. Therefore, a mobile verification login method was added. A code will be sent to the user so the users are not required to remember their passwords. As long as they can receive an SMS, they will always be able to log in.

3. Forgot Password
Based on the feedback and the newly created personas, we discovered that one of the user group travel often, and might not be able to retrieve an SMS code for resetting their passwords. Therefore, we added an email verification code retrieval option for this type of user. Although emails are used as a secondary identifier, users still have to verify their emails when they register, and they also have to verify both the old and new emails when they want to change their email.

4. Third-Party Authorization
With third-party authorization, users can speed through the registration process. Since the third-party app doesn't have all the form fields that we require, we added an additional "complete your profile" form. The form field was shortened so users only have to fill in the necessary fields for creating an account, and the rest of the information can be completed in the app's profile section.

The redesign of the registration process was launched with the entire app. Within the first month, the customer support cases for the registration process decreased by 95%. Check out the live product by scanning the QR Code on our website.

Reflection
This project demonstrated the importance of testing with real users right before the launch. It allowed us to discover brand new user bases, and shift our app to focus on them. Although our main purpose of the beta test was to find bugs and crashes, we discovered that 18% of our users couldn't even get past the registration process into the app.

This beta test helped us retain 18% of our users, and also helped lower the customer support cases by 95% after launch. The importance of user testing was very significant in this case, which helped me persuade my company to user test more with future products.
Next Steps

The next step is to develop an app version of Youpi. With a different platform, there will be minor changes that need to be made to the UI, as well as reconsidering some of the User Experience. The H5 version was designed with a lot of limitations from the browser, so a native app will be a lot more flexible in terms of what it can do. For example, an alternative login method due to the hassle of remembering a password with a password vault. However, a native app will have the ability to save the password for future uses.

Another difference would be the flow of third-party authorization, as it would have to jump back and forth from an app. However, more third-party apps will be available for users, which will simplify their registration process even more.