top of page
Fintech: Onboarding
Flow
Project Overview
We were tasked with redesigning our onboarding flow as a way to decrease the dropoff rate and create a flow with less friction.
Tools
Sketch
Figma
Miro
Roles
Challenge
Everyone is familiar with a sign-up flow, having to register for a service to access a product. However, it isn't always as common to undergo a complex onboarding flow with more steps than the average sign-up form. For a finance company like ThinkMarkets, there are certain requirements a company needs to ask their users during the onboarding process for regulation purposes, such as KYC which creates a lengthy form.
Our challenge was optimizing our complex and lengthy onboarding flow to make it more seamless and less overwhelming.
UX researcher
UI/UX designer
Company
ThinkMarkets
Industry
Fintech
Team
• Myself (UI/UX designer)
• Vera Huang (UI/UX designer)
• Clement Valles (UI/UX designer)
• Gilius Blinstrubas (UI/UX designer)
Design Process
Research
• Context study
• Pain ponts
• Competitive analysis
Ideation
• Journey map UX flows
Design
• Lo-fi
• Hi-Fi
• Interactive prototype
Feedback
• Designer critiques
• Stakeholder reviews
• User testing
Updates and Handoffs
• Design iterations
• Asset preparation for Dev team
• QA
Current onboarding analysis
We went through the entire onboarding and noted any pain points during the process. Below I am showcasing a few of the many pain points we found.
2
1
3
1
The requirements for the password field are in the question bubble. Having the requirements more visible will lower the percentage of input error
2
The progress bar is at the bottom of the screen so users have to scroll to see it. It is also only present on the first two screens of the flow. Because it isn't in users' constant view, it becomes unhelpful in terms of tracking user's progress. A better placement would be having it at the top and visible on all screens
3
The currency and leverage are related to the selected platform. Having these fields at the bottom of all three options creates a disconnect. Users also need to scroll down to see those fields
Research
We conducted a visual and structural competitive analysis of 10 competitors to understand our competitor's flow, design, and solutions.
When looking at competitors we focused on analyzing pain points, identifying common patterns amongst multiple competitors and noting interesting solutions
Key takeaways for us to consider when designing:
Clear interface
-
Create more consistency of the colors, fonts and spacing
-
Make the interface more inviting
Redefining the journey
-
A clearer definition of the steps
-
Rethinking information placement
-
Information visibility
Journey flow ideation
Design principles
Frictonless
Minimizing all the pain points of the flow to create a seamless process
User-centered
Driven and refined by user-centered evaluation
Mobile first
Creating a flow that is scalable
Old complex onboarding flow
New simplified onboarding flow
KYC optimization
What is KYC?
Know your customer/client (KYC) is a standard in the financial/investment industry that ensures that client's identities can be verified. Clients will also provide financial knowledge and experience during this process.
What makes KYC difficult in an onboarding process?
KYC is a big effort investment
- A user needs to complete multiple questions regarding their financial experience and knowledge
- A user needs to have all the documents that are required to upload on hand during the process
Providing personal information before product testing
- Forcing individuals to provide personal documents before they know if they are fully committed to the product can lead to potential drop-off rates
"Simplified" Onboarding design
In the "simplified" onboarding flow, we only grab the basic information needed upfront such as personal info, and platform selection. Then we bring users into our account management portal, where users can trade on a temporary account. For a user to gain full access without restrictions, they would have to complete the rest of the onboarding including KYC.
Opening the trading app and seeing the value immediately often leads to a positive experience and helps to motivate users to commit to the rest of the flow.
Behind the scenes
Hotjar, Testing , Feedback
We check Hotjar regularly to see user's behavior when applying for a live account. This provides us valuable insights, shedding light on specific challenges individuals may be facing. We can observe recurring patterns where many users may encounter similar issues.
One example of this was the password field
Below shows the initial design for the password form field
INACTIVE STATE
WEAK
STRONG
ERROR
MODERATE
We noticed that many users were struggling with passing this field with the necessary requirements for the password creation. Our assumptions for this were:
The requirements get lost as they are presented in a comma-separated list. Presumably, many users are visually overlooking or not comprehending each requirement as it takes more visual effort when listed this way. It also does not highlight the requirements that the user is missing.
Updated design
INACTIVE STATE
PASS
ERROR
With this password design, we indicate to the user what specific requirements (if any) are missing. We also use colors so the user can quickly visually identify which requirements they have already and which are missing from their current input
Conclusion
Through this project, I worked with amazing individuals to understand the business, legal, and development needs.
After some testing and minor adjustments, we launched the new onboarding flow worldwide.
Two weeks later, the number confirmed the success of the new flow by increasing by +17% the amount of account creation.
bottom of page