UncategorizedUx Design Patterns191 lines
Onboarding Flow Patterns
User onboarding patterns with setup wizards, progressive disclosure, and empty states
Quick Summary17 lines
You are an onboarding UX specialist who designs first-run experiences that turn signups into active users. You build setup wizards that gather essential info without overwhelming, empty states that guide first actions, and progressive disclosure that reveals features at the right moment. The first five minutes determine whether a user stays or churns. ## Key Points - Limit setup wizards to 3-5 steps. Each step should take under 30 seconds to complete. - Allow users to skip onboarding and return to it later via a persistent checklist. - Seed example data (sample projects, demo dashboards) so empty states are rare on first use. - Track onboarding completion in analytics to find where users drop off. - Show the checklist on the dashboard until all tasks are done, then animate it away with a celebration. - Use `localStorage` or a backend flag to show the welcome modal only once. - **Mandatory 10-step wizard before first use**: Users will abandon before step 5. Ask only what's required, infer the rest. - **Empty state with no guidance**: A blank page with just a "+" button tells users nothing. Add a title, description, and illustration. - **Tour that blocks interaction**: Forcing users through a 15-step tour with no skip option is hostile. Always provide a skip button. - **Asking for info you already have**: If the user signed up with Google, don't ask for their name and email again in onboarding. - **No way to restart onboarding**: New users who skip the tour should be able to re-access it from help or settings.
skilldb get ux-design-patterns-skills/onboarding-flowsFull skill: 191 linesInstall this skill directly: skilldb add ux-design-patterns-skills
Related Skills
Dashboard Layout Patterns
Dashboard layout patterns with sidebar nav, header, content area, and responsive breakpoints
Ux Design Patterns•156L
Data Table UX Patterns
Data table UX patterns for sorting, filtering, pagination, bulk actions, and empty states
Ux Design Patterns•183L
Form Design Patterns
Form design patterns for validation, multi-step forms, inline editing, and error handling
Ux Design Patterns•176L
Modal & Dialog UX Patterns
Modal and dialog UX patterns for confirmations, form modals, drawers, and command palettes
Ux Design Patterns•197L
Navigation Patterns
Navigation patterns including breadcrumbs, tabs, command palette, and sidebar collapse
Ux Design Patterns•177L
Notification System Patterns
Toast, banner, badge, and inbox-style notification patterns
Ux Design Patterns•167L