Redesign fin-tech login flow
1 Week
Adobe Illustrator
Sketch
Principle
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.
UI Wireframes | UX Flow | Redefine Design Guidline | High Fidelity Prototype | Competitor Analysis | Marketing Graphics
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.
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.
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:
Sign up Flow:
Signup Page - Enter phone number - Get input verification code - Enter password - Register
Issues:
Forgot password Flow(after logged in) :
Login page - Forget password - Enter phone number - Enter your verification code - login
Issues:
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.
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.
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.
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)
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.