BTCC Entry Flow

Redesign fin-tech login flow

Project Duration

1 Week

Tools

Adobe Illustrator
Sketch
Principle

Project Objectives

BTCC is one of the product own by GTS service platform.
This is a project about a registration and login flow optimization for BTCC app.

Main Duty

UI Wireframes | UX Flow | Redefine Design Guidline | High Fidelity Prototype | Competitor Analysis | Marketing Graphics

Background

BTCC values their customer a lot, sign up rate and has been one of the most significant metrics for the product team. With so many competing crypto-trading apps, how to retain customers upfront has become a very important goal.

The current signup/ login interface is the result of a short period of work by the previous designers during the early MVP, that causes a little confusing in the flow, and due to the lack of a systematic design guideline to follow, the UI elements were not very unified. 

In addition, there were some customers' feedback that they were stuck in certain situations (wrong/missing process, unclear prompting guidelines), so we need to take this opportunity to analyze them all at once and find out where the problems lie.

Discover Issues

Understand the Users

The first step for me was to gain more understanding of our existing users, I did my research by talking to designers on our team, setting up meetings with stakeholders and customers service managers to get a impression from their experience contacting the real users.
I generated personas from the information gathered, and in order to bring them to life, I added detailed information to each of them. (biographical information, behavioral information, pain points, goals, and investing habits for this project.)These personas helped communicate information about the users for making design decisions.

Current Flows

After that, I Mapped out current entry flow and performed a heuristic evaluation.
I documented the issues with the user persona in mind, and captured some pain points from there. 

Login Flow: 
Login page - Enter phone number - Enter password - Enter verification code - Login
Issues:

  1. The buttons for switching between login and registration is inconsistent and unclear, causes confusion. 
  2. When an unregistered user who mistakenly enter the login page, the difference cannot be detected immediately. 
(*Login page has button on the top right corner to switch between registration page and login page)
(** User will be automatically logged out in d+3 days for security purpose)

Sign up Flow: 
Signup Page - Enter phone number - Get input verification code - Enter password - Register
Issues:

  1. At the end of this registering process, an pop up shows “Reviewing, please wait..." but it will not eventually redirect the users to a relative page. From past user’s feedbacks, we found that this prompt causes users to think that they need to wait in the same place and feel confused about what to do next.
  2. If an user entered a registered number in this registering process, a prompt indicating “Phone number has been registered, please login directly, if you have any questions, please contact customer service.” will show. However, it will not redirect the users to the next step.

Forgot password Flow(after logged in) :
Login page - Forget password - Enter phone number - Enter your verification code - login
Issues:

  1. When entering the process of forgetting the password and finally regaining the account by receiving the correct phone verification code, the user is directly logged in without the opportunity to change the password.

Additional Insights

  1. Face ID login after the first time.
  2. Users are not allow to signup with social media account, but can link with the accounts later in order to login with social media account
  3. Users can view the interfaces before login / signup; Since this product has automatic logout after a period of time due to security reasons

Research & Analysis

Competitor Analysis

As signup and login are very common features, I decided to learn from our competitors. The purpose of competitive analysis is to identify the strengths and weaknesses of competitors, whereas It also helps to understand how other crypto trading applications currently support their customers in identity verification and binding accounts.
This step not only helps to understand other fin-tech application characteristics, but also identifies potential opportunities to add new features. I focused on Binance, Huobi, OKEX, 24MEX...etc.

Challenge

From the competitor analysis, I have found that some apps uses face ID for a quicker re-login option. However, after consulting with the developers, I have been told that there will be a technical difficulty to apply that at this stage.

Most of our users are attracted by marketing mini games (interactive games for earning bonus) due to our product strategy.
According to that, sometimes users will rush through the sign up/login page as soon as possible in order to engage with the mini games. (Similar experience when you close an ad pop up simultaneously without reading.)
This behavior causes users to accidentally clicked into a flow that does not matches their need. Therefore, to design a flow which extremely simplify the process and make all CTA writings clearly can help users to react intuitively, and reduce mistake entry to a flow they don’t need.

To overcome that, I have began to do more research on easy onboarding methods that's not fin-tech apps. I have found that Uber has an onboarding process that eliminates the process for the users to choose to login or signup, instead, it only asks the users to enter the essential info the app need, and the app will intuitively guide the users to the right flow.

Design direction

The signup and login process has been tedious confusing and complicated, it can be optimized.
Discovering a flow’s issue could be easy, however, sometimes it is good to understand the problem before creating solutions, we could take a step back in order to deliver a more inclusive solution. 

  1. Anticipate and simplify any potentially repetitive steps to avoid redundant back and forth clicks.
  2. Add more intuitive redirection and clearer prompt to ensure that no path results in a dead end.
  3. Unify visual design system.
  4. Create a simple and clear visual.
  5. Complete the reset password flow by fill in the missing interfaces.

Flow

Most of the time, when an user first downloads an app, they encounter a signup page and stay logged in after the first time.However I have found that most fintech apps have an automatic logout mechanism after a while for security reasons.When facing such a situation, the general signup-based flow is no longer applicable.I decided to design a better experience with the main idea of login as the primary action and registration as the secondary in the flow.
(TO BE CONTINUE)

Redesign

Signup/ Login interaction

After discussion with the developer, I found that this is something that can be distinguished in the backend in real time. I think this can simplify the experience. It does not require the user to find the switch button for interface redirection, and to re-enter the phone number.
Instead, after entering the phone number, the system will now determines if it’s associated with an existing account.  The unregistered number will be redirect to a signup page, and the existing user will only need to enter their password and verification code.
The onboarding title will replace "Login" and "Register" to “Enter Account", so that both new and existing users can enter the login or signup process through this portal.

Existing users
New users