Refined Onboarding
Mobile App Design
Clair
Fintech
B2B2B2C
Team
1-PM, 1-Product Designer, 1-2 Engineers
Role
Sr. Product Designer
Responsibilities
UX/UI Design, Competitive Analysis, High-Fidelity Prototyping, Usability Testing
Challenge
Clair is a financial services platform offering fee-free wage advances to hourly employees. The hourly employees are the primary users for Clair's mobile app. Users have struggled with the multi-step onboarding process, particularly the transition from the partner platform to the embedded widget, and then into the mobile app. There has been confusion around what information they needed to provide, why it's needed, and the need to set up direct deposit in order to use the wage advance feature. The complexity of these touchpoints has led to high drop-off rates and confusion, making it difficult to establish trust in Clair as a banking platform.
Business Objectives
Increase conversion rates of users who download the Clair app after completing KYC in the widget.
Improve user comprehension and reduce confusion in the onboarding flow, especially around the direct deposit process.
Increase the number of users setting up direct deposit and using the wage advance feature after app download.
User Needs
Create an intuitive onboarding flow that helps user understand how the product works and why certain information is needed.
Provide 3rd party partner onboarding inforation base on each user partner and eligibility to ensure a seamless transition from the widget to the Clair app.
Establish user trust in the platform sop that they feel confident in providing sensitive financial information (KYC).
Ideation & Concept Development
Brainstorming
We held brainstorming sessions to explore ways to streamline onboarding. Ideas ranged from reworking the widget to improving copy to allowing more user autonomy within the app for account setup. Collaboration with product managers and engineers helped refine our ideas.
Wireframing
I created low-fidelity wireframes for a new sign-up flow within the app that would allow users to select their partner, understand why direct deposit is needed, and view a step-by-step guide to completing onboarding. Prototypes were tested using UserTesting.
Research & Discovery
user research
We conducted on-site user observations and interviews with employees at partner organizations to identify pain points. We also used UserTesting for remote usability testing. Our findings included:
Lack of understanding of why certain information (like KYC) was being requested.
Confusion around the need to set up direct deposit in order to use wage advances.
Low confidence in the platform's legitimacy, especially since it offered "too good to be true" benefits.
competitive Analysis
We researched other financial service apps targeting hourly workers (like Earnin, Dave, and Branch) and found similar onboarding challenges. However, Clair’s unique offering of a fee-free wage advance and integration with multiple payroll platforms stood out as a differentiator.
key insights
Users prefer to download and complete onboarding within the app rather than being routed through multiple external touchpoints (partner platform → widget → app).
Clarity and trust-building communication (explaining why KYC is necessary and how Clair works) were key to improving user understanding.
Design Approach
These improvements were designed to enhance user experience and clarity while better communicating Clair's role as a banking platform. The widget copy was refined to provide a more straightforward explanation of Clair's services, ensuring that users quickly understand its value. Tooltips and simplified language were introduced to intuitively guide users through the process and reducing potential confusion.
The widget flow was streamlined by encouraging users to transition to the Clair app earlier in the process to set up their direct deposit seamlessly. A customized sign-up guide within the app would offers step-by-step instructions tailored to the user’s specific partner, providing a personalized onboarding experience. Updates to the design system ensured visual consistency across the widget and app, with cohesive buttons, colors, and typography that create a unified interface and meet accessibility guidelines.
Design Principals
Minimize unnecessary steps and copy.
Use clear, friendly language to explain banking features and why certain actions and information is required.
Ensure the user experience is seamless between the widget and app, with consistent branding, visuals, and tone.
Iterative Process
Early feedback based on the wireframes shared with stakeholders led to partnering with our user recruitment team. This relationship conceptualized the template for our partner provider step-by-step guides and the information displayed within each.
impact
A significant 200% increase in app downloads was observed within the first 24 hours after users successfully completed the KYC process through the newly designed widget.
There was a notable 37% rise in the number of users who set up direct deposit after opening the app for the first time, indicating improved engagement and usability.
The newly redesigned flow has created a smoother, more intuitive onboarding experience, which has directly contributed to higher user conversion rates and overall satisfaction with the platform.
The end Product
Final Solution
The final design includes a revised widget experience with clear, concise language explaining the banking services and direct deposit setup.
The Clair app now offers a simplified onboarding flow, including a step-by-step guide tailored to the user’s employer or partner provider.
Visual consistency between the widget and app has improved the overall user experience.
Usability Testing & Validation
Usability Testing
We conducted multiple rounds of usability testing using UserTesting, focusing on users’ understanding of the onboarding flow and their confidence in setting up direct deposit. On-site observations also provided invaluable feedback through our partnership with the user recruitment team.
Success Metrics
The implementation of the new widget led to a 200% increase in app downloads within 24 hours after users completed the KYC process. Additionally, there was a 37% increase in users attempting to set up direct deposit after opening the app for the first time. On-site testing also yielded positive user feedback, highlighting the simplified flow and improved clarity of the process as key enhancements.
Conclusion
Through a series of design sprints, we improved Clair’s onboarding process by simplifying the flow, improving copy, and adding trust-building elements. These changes significantly increased user conversion rates and direct deposit setup.
The collaboration with product manager and engineers was seamless, and we quickly aligned on priorities. Real-time feedback from employer on-sites was instrumental in guiding design iterations with the help of the user recruitment team.
Balancing the need for education about the banking features while not overwhelming users with information was a challenge. Ensuring clarity around direct deposit setup required careful design attention to avoid confusion.
User research and on-site observations are invaluable for understanding real-world pain points and informing design decisions. Reducing complexity and focusing on building trust through clear messaging can significantly improve user conversion.
Modularizing direct deposit setup based on employer or partner preferences for faster and easier setup. Allowing users to select their employer directly within the app to further reduce confusion.
The new onboarding made everything so much easier. I got through it quickly and felt confident pretty quickly.