This project aimed to design a user onboarding guide for Donorbox, guiding new users through key actions on the platform from the main homepage. The onboarding guide focused on improving the user flow, emphasizing the main actions users need to complete, such as form creation, payment processor connection, and embedding forms. It was developed based on user feedback and data, with the primary goal of reducing drop-off rates, increasing conversion, and providing a clear sense of success and finality to users.
Challenge:
Environment:
The project was conducted remotely with a cross-functional team, including product management, development, and QA teams. Coordination and daily communication were essential for tracking progress and gathering feedback from stakeholders and users.
Limitations:
The team had limited development resources, so we focused on incremental improvements rather than a full overhaul of the onboarding flow.
User feedback indicated that while users primarily wanted to create embedded forms, the system prioritized other options like the donation page, leading to confusion. The challenge was to realign the onboarding process without overwhelming users, particularly new ones.
Existing Onboarding Design: A Lack of Thorough Planning
The existing onboarding process was primarily crafted with limited design resources, which restricted the scope for a holistic and cohesive design.
This led to a fragmented experience that didn't fully address the users' needs or align with the evolving product goals.
Dashboard design prior to the onboarding guide implementation – lacked clear guidance for new users on how to onboard and receive their first donation.
Design Process:
1. Research & Discovery
User Feedback & Insights:
Based on feedback from Donrobox users, two key issues were identified:
The onboarding process lacked a sense of finality or success.
Most users wanted to create embedded forms, yet the platform often guided them toward setting up donation pages first, leading to frustration and drop-offs.
Additional Research:
Hotjar Recordings: Daily reviews of Hotjar videos showed significant drop-offs after specific steps in the funnel, particularly between form creation and payment processing.
User Interviews: Additional user interviews were conducted to identify specific points of confusion during the onboarding process.
Competitor Analysis: Similar platforms were analyzed to understand best practices for onboarding flows and optimize our guide accordingly.
Analytics Setup: Before starting the design, we set up more granular flow analytics using Google Analytics 4 (GA4) to track user drop-off on each onboarding page and section. This allowed for more precise measurements of the onboarding guide’s impact.
2. Wireframes, Interaction Design & Information Architecture
Wireframes:
Developed wireframes showcasing the updated onboarding guide. The guide was designed to focus on essential actions, such as creating forms, embedding them, connecting payment processors, and making test payments.
Interaction Design:
Created interactive prototypes to guide users through each step with visual cues and clear progress indicators. We also added a “Final” checkbox to give users a clear sense of completion and success once they had completed the onboarding process.
Information Architecture (IA):
Adjusted the information architecture of the onboarding process, ensuring that key features such as form embedding and payment processor connections were prioritized, reducing confusion.
User onboarding flow planning
Prototyping & Testing:
Created interactive Figma prototypes for internal testing and shared them with key stakeholders and team members for feedback and iteration.
3. UI Design & Collaboration
UI Design:
Designed the onboarding guide to be visually integrated into the existing Donorbox homepage. The guide includes clear calls-to-action and visual hierarchy, allowing users to understand the critical steps required to successfully onboard.
Refined several pages to enhance overall onboarding user flow and experience.
Coordination with Teams:
Development Team: Collaborated closely with developers to implement the design and ensure all features were technically feasible.
QA Team: Worked with QA to ensure there were no bugs or usability issues, especially for edge cases in the onboarding funnel.
Product Management & Stakeholders: Regularly communicated progress and gathered feedback, ensuring alignment between user needs and business goals.
First onboarding step
Third onboarding step
The final step creates a sense of completion and accomplishment.
4. User Testing & Iteration
User Testing:
The onboarding guide was tested with internal teams, including the customer success and account management teams, to refine the flow and ensure it addressed user pain points.
Conducted live testing sessions with 2-3 customers to gather feedback on the revised onboarding steps.
Iteration:
Based on user feedback, we refined the order of the onboarding steps, placing the form embed step before the payment step, as suggested by users and the team.
Simplified various onboarding steps to reduce user drop-off, focusing on the key actions that users need to complete first.
Live Testing & Hotjar Review:
After launch, we reviewed Hotjar recordings and user behavior to confirm that the onboarding guide improved the overall experience. We also monitored GA4 funnel analytics to track conversion rates and drop-offs, adjusting the guide where necessary.
Outcome:
Impact Metrics:
Form Creation: 10% increase in form creation by new users.
Payment Processor Connection: 13.68% increase in payment processor connections.
First Donation Conversion: Around 10% improvement in conversion rates for first-time donations.
Email Confirmation: 15% increase in email confirmations after onboarding.
PayPal Users Connected: 1.82% rise in PayPal connections.
Stripe Users Connected: A significant 40.82% increase in Stripe connections.
These metrics reflect both the impact of the onboarding guide and the smaller adjustments made to various pages within the flow, contributing to overall user engagement and higher conversion rates.
What I Learned:
The project highlighted the importance of user-centered design when tackling complex onboarding tasks. By focusing on user feedback, we were able to make targeted improvements that addressed real pain points, leading to better user engagement and satisfaction. Setting up detailed flow analytics also helped measure the effectiveness of design changes more precisely, ensuring continuous improvement.
