Onboarding Flow
Page TypesA sequence of screens or steps that introduce new users to an app or service, guiding them through setup, key features, and initial configuration.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Onboarding Flow coming soon.
How It Works in Apps/Websites
Onboarding flows welcome new users and help them get started. Common patterns include: welcome screens with value propositions, permission requests (notifications, location), account setup, preference selection, and feature tours. Can be skippable or mandatory. Often includes progress indicators and illustration.
How AI Interprets This Term
When you say 'onboarding flow', AI expects: a series of screens (3-5 typically) with illustrations, headlines, descriptive text, and navigation (Next/Skip/Done). May include: carousel with dots, progress bar, permission modals, and personalization forms. Clean, friendly design with brand colors.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a 3-step onboarding flow for a productivity app
Design an onboarding flow: 4 screens with illustrations, headlines, and subtext. Screen 1: Welcome with app benefits. Screen 2: Choose interests (selectable chips). Screen 3: Enable notifications (with Skip option). Screen 4: You're all set! Dot indicators, Skip button, Next/Done button.
Show carousel onboarding (swipeable screens) vs progressive onboarding (tooltips in-app)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •First-time user experience
- •New feature introduction
- •Required setup steps
- •Permission requests
When NOT to Use
- •Returning users
- •When users want to jump in
- •Simple, obvious interfaces
Related Terms
Empty State
A placeholder screen or section shown when there's no content to display, guiding users on how to get started or explaining why the area is empty.
Modal
A dialog box that appears on top of the main content, requiring user interaction before returning to the underlying page. It typically includes an overlay that dims the background.