Enable growth leaders to build their onboarding flow simply by drag-n-drop
Overview
Background
Upflowy's mission is to empower marketing experts to effortlessly create onboarding flows without the need for engineering support. One significant challenge we identified was the usability of our drag-n-drop interface. Users reported difficulties in seamlessly building and customising onboarding flows, hindering the efficiency and user satisfaction of the platform.
Pain Points
Users reported difficulties in seamlessly building and customising onboarding flows, hindering the efficiency and user satisfaction of the platform.
Complexity: users found the list of components overwhelming and time-consuming searching for the right one to use
Visual clutter: Smaller screens exacerbated spacing issues, resulting in a visually cluttered interface.
Objectives
Improve the usability of drag-n-drop interface
Outcome
Designed and implemented within 3 months.
Key metrics:
Time-to-build: Reduced average time to create an onboarding flow by 25%.
User satisfaction: Increased overall user satisfaction score from 3.6 to 4 (out of 5)
Feature adoption: 30% increase in the adoption of advanced customization features.
My Role
I was the lead designer, collaborated with PM and developers in a fully remote setting
My Process
Research - Identify grouping pattern with card sorting exercise
Analysing existing design system
Design system expansion
Design - Prototyping & testing
1. Research - Identify grouping pattern with card sorting exercise
There are a number of components available for users to utilise when building an onboarding flow (i.e Input, Email, Phone, Checklist, etc.), which can make the workspace appears overwhelming if not carefully organised and displayed. One of the best approaches is to categorise and group the components of the same family.
So how should the components be grouped? To answer this question, I decided to arrange a quick open card sorting exercise for team members. The result came back, majority responses agreed on categorising the components into 3 groups: User Information, Registration, Others.
2. Analysing existing design system
At the time the team was using Ant design system as a baseline for design creation. Overtime the app requires extra components with more specific details.
3. Design system expansion
To address spacing concerns, it is needed to expand the existing design system to incorporate responsive spacing guidelines, define how spacing should adapt to various breakpoints. This expansion allowed for a systematic approach to maintaining consistency across different screen sizes.
It was important to foster collaboration between design and development teams during the expansion phase; ensure that designers and developers have a shared understanding of the updated spacing guidelines and how they should be implemented.
4. Prototyping & testing
Desktop preview
Mobile preview
Learning
Holistic design system approach:
A design system should be viewed holistically, with considerations for responsiveness integrated seamlessly into its principles.
Design tokens enhance responsiveness:
Incorporating device-specific design tokens within the design system facilitates automatic adjustments, promoting a responsive user experience.