Self-Onboarding in Fintech
A fintech product that offers a predictive tax and accounting solution to self-employed individuals in the U.S
#Onboarding
#DesignSystem
#Fintech
Scope
Duration
5 months
Role
Sr. Product Designer
Team
1 PM, 2 Engineers, 1 QA
Tools
Figma, Miro, Figjam
Disciplines
Research, User Testing, Design System, User Flow
Overview
As a Product Designer at Formations, a fintech company, I led the redesign of the self-onboarding process for our business tax management software. This involved simplifying the initial data collection for users and updating the design system for improved user experience and interface consistency.
Formations develops software that integrates with third-party accounting solutions like Xero and Gusto, simplifying business tax management for self-employed individuals. This software presents a clear business snapshot, aiding clients in effectively preparing and managing their business taxes.
Impact on Business ✨
35% reduction in Time to Value
Decreasing onboarding time from 85 to less than 60 days
80% Customer satisfaction
With scores surpassing in Q1, 2023
The project was initiated to tackle specific problems, such as the lack of a self-service option that resulted in an overload of email communication with the customer service team and a low onboarding completion rate.
Challenges
1
Low Completion Rate
Users found the initial onboarding process complex and overwhelming, leading to high dropout rates.
2
High Volume of Customer Service Communication
The lack of self-service options resulted in excessive email and phone call interactions with the customer service team.
Business Goal
Streamline the Self-onboarding process
Decrease the time to value less than 60 days
The overarching business goal was to optimize the onboarding experience. Given the reliance on partner banks and IRS timelines, it was a challenge to reduce the onboarding period. The focus was to make the onboarding process more efficient while maintaining the accuracy and quality of the data collected, which was crucial for the functionality of many platform features.
Insights from Research
Identified critical issues
1
Inaccessible features during onboarding
2
Overly complex process
3
Internal-external process mismatches
During the research phase, I discovered critical problems. Users were unable to access the features and dashboard until they completed the onboarding process. Moreover, we added more pages and steps into the onboarding, which created a barrier to entry. This restriction, combined with the extensive information collection, resulted in high drop-off rates and increased interactions with the CS team.
Research Methods
Competitor analysis, In-depth user interviews in our Early Access program, Collaboration with internal teams
Approach and Proposal
I introduced the 'Onboarding Hub' – a dedicated page that enhances continuous product access with a card-based design. This initiative focused on reducing entry barriers and enriching the user experience.
To visualize its impact and persuade stakeholders, I showcased a comparison of the user flow before and after the Hub's implementation with the wireframe.
How might we provide a separate, dedicated onboarding page that users can access at any time?
This question guided the project's direction. The solution proposed was an 'Onboarding Hub', a separate page allowing users to access our product at any stage of the onboarding process and the features gently remind them to complete the onboarding for full functionality. This hub was designed to make the onboarding journey more intuitive, resembling a well-organized syllabus for an online course.
Validation Process for the Proposal
User Behavior & Competitive Analysis
Phase 1
Analyzed user patterns using previous onboarding data, focusing on navigation issues. Conducted competitor analysis within fintech and education software to identify common challenges in complex onboarding flows
Stakeholder Engagement
Phase 2
Received positive feedback from the Customer Success and Configuration team with a reorganized data structure, facilitating clearer communication with users
Userbility Testing
Phase 3
Conducted rigorous usability testing with mid to high-fidelity prototypes to refine and validate the 'Onboarding Hub' solution
Design Audit
Legacy Onboarding Process
I conducted a design audit of the legacy onboarding process and identified key issues: a disjointed, non-skippable user journey, accessibility challenges in onboarding steppers, and inconsistent use of the design system (in the misuse of heading styles, button labeling)
Before
Improvement
To enhance the management of extensive data collection during the onboarding process, I implemented a series of visual and structural improvements.
1
Refinement of Onboarding Steps
By re-categorizing each step in our onboarding card design, I resolved workflow mismatches and integrated crucial steps like payroll and tax information. This collaborative effort with the product and Configuration teams enhanced both user experience and team efficiency.
2
Onboarding Hub
The 'Onboarding Hub' page I implemented simplified the process, giving users a progress overview and access to dashboard features, motivating them to complete onboarding and engage more with the platform.
After
Improvement
3
Design System Usage Guideline
I established specific guidelines for the use of design system components, focusing on 'organisms' in atomic design for the application of 'molecules' like heading styles and labels. This approach ensured a consistent and coherent use of design elements throughout the platform.
4
Visual Aids & Accessibility Enhancement
I developed unified steppers throughout the onboarding process, complete with varied icons and subtitles for each stage. This enhanced user understanding and accessibility, streamlining the onboarding journey.
After
Breaking down contents into bite-sized pieces
During user testing with a Figma prototype in the 'Business Use of Home' Step, users often get lost in this step. Initially, I had divided the content into smaller, more manageable sections, thinking it would simplify the process.
However, this approach led to a complex flow with 9 different screens.These conditional logic questions and forms caused confusion and made it challenging for users to navigate through the process. So, I had to redesign it.
Consolidating the 9 subset steps into 3
To address this issue, I condensed it from 9 screens to just 3. The first section presents a simple yes or no question, while the second section consists of a longer form that users complete based on their previous answers. This approach not only improved the smoother data saving and recall but also made it easier for users to understand and navigate through the process.
Hand-off & Collaboration
To communicate with the engineering team effectively, I created a design document detailing the new onboarding hierarchy and steps. This visual representation helped both backend and frontend developers grasp user interactions within and across steps. Additionally, I developed a hierarchy level for the onboarding flow, enabling backend engineers to initiate the database design early, saving time and aligning the team. This approach fostered a clearer understanding among all stakeholders.
Reflection
🚧 Designing with Constraints
Adapting UI design within the evolving branding and design system. While working within the constraints of our design system and branding updates, I learned the importance of balance between innovation and adherence to established guidelines.
🔗 Prioritizing clear communication for successful collaboration
By creating comprehensive design documents, I facilitated a better understanding between teams, which underscored the importance of collaborative dialogue in ensuring smooth project execution and team alignment.
