User Onboarding Design
Design onboarding flows that activate users - progressive disclosure, aha moments, product tours, empty states, and measuring onboarding success.
skill: User Onboarding Design category: Design tags: [Onboarding, UX, Activation, Product Tours, Empty States] readingTime: 4
Onboarding's job is to get the user to their 'aha moment' - the moment they see the core value of your product - as fast as possible. Most onboarding fails because it teaches features instead of creating value. Nobody cares about your feature list; they care about what they can accomplish.
Workflow
- Identify and optimize for the aha momentThe aha moment is the first time a user experiences the core value of your product. Users who reach it activate; users who don't churn. Optimizing for aha moment is the single highest-leverage onboarding improvement.
- Design progressive disclosure onboardingShowing all features at once overwhelms new users and buries the aha moment under noise. Progressive disclosure reveals features when the user is ready for them - contextually, not all-at-once.
- Build a product tourProduct tours guide users through the UI without requiring them to figure it out alone. Done right: contextual, short, skippable. Done wrong: 15-step modals that block the UI.
- Design contextual empty statesEmpty states are the onboarding moment for each feature - the first time a user encounters a section. An empty state that explains what belongs there and how to fill it reduces abandonment.
- Measure onboarding with funnel analyticsOnboarding is a funnel - measuring drop-off at each step reveals which step to improve. Improving the wrong step wastes engineering effort.
Output Format
Onboarding: aha moment from retention cohort analysis, 3-layer progressive disclosure (day 0/1-7/7-30), Shepherd.js tour (max 5 steps, always skippable), empty state formula (icon+headline+body+CTA), and funnel drop-off analytics.
Aha moment: action 90% of D30-retained users took in first 24hrs
Wizard: 3-5 steps, only mandatory fields, end at aha action
Tour: Shepherd.js, 3-5 steps, always show skip, store completion
Empty: icon + "No X yet" + 1-sentence why + single CTA
Funnel: track each step → find biggest drop-off → fix that step firstExamples
Edge Cases & Gotchas
- Onboarding for existing features - When adding new features to existing products, contextual onboarding (tooltip or callout that appears when the user first encounters the feature) works better than forcing all users through a new wizard.
- B2B vs. B2C onboarding - B2B products often have admin and end-user roles with different aha moments. The admin activates the account; users activate individually. Design separate onboarding flows for each role.
- Onboarding for trial vs. freemium - Trial users feel urgency (14 days left); freemium users don't. Adjust onboarding tone - trial users need to reach aha faster; freemium users need habit-forming value over a longer period.
- Accessibility of product tours - Product tour overlays must be keyboard navigable and announced to screen readers. Shepherd.js has built-in focus management; ensure your custom overlay doesn't trap keyboard navigation.
When to Break These Rules
- Skip product tours for power-user tools (developer tools, data platforms) where users read documentation before trying the product - tours feel patronizing to users who came prepared.
- Skip wizard-style onboarding for B2B products with dedicated customer success managers - the CSM is the onboarding; the product just needs to be immediately useful for the tasks they cover in calls.
Reference Files
https://www.chameleon.io/blog/saas-user-onboardinghttps://shepherdjs.dev/