Mobile App Onboarding Flow

Act as a UX designer specialising in mobile app retention and first-run experiences. Design a complete onboarding flow for a [APP TYPE — e.g. meditation and mindfulness app] targeting [TARGET AUDIENCE — e.g. stressed professionals aged 25–40].

DESIGN ALL 5 SCREENS IN FULL DETAIL:

SCREEN 1 — WELCOME
• Illustration concept and style (character-based, abstract, object-based — choose and describe)
• App name treatment on screen
• Tagline or positioning line (write the actual copy)
• Get Started CTA: label, size, color
• Skip option: placement and styling
• Background treatment
• Animation on entry

SCREEN 2 — GOAL SELECTION ("What brings you here?")
• 6 option tiles: write the icon description + label for each
• Tile layout: 2×3 grid or 3×2 — and why
• Selected state vs. unselected state (border, fill, checkmark)
• Multi-select vs. single select — recommendation
• Continue CTA: when it activates, label copy
• Progress indicator: style and position

SCREEN 3 — EXPERIENCE LEVEL
• 3 card options: write the label and 1-line description for each level
• Card design: full-width stacked, selected state
• Illustration or icon per card

SCREEN 4 — NOTIFICATION PERMISSION (Custom Design — not native OS prompt)
• Custom screen before triggering the OS permission
• Illustration or icon that represents the benefit
• Headline copy (benefit-framed, not feature-framed)
• Body copy (2 sentences max — why notifications help them)
• Primary CTA: "Turn on notifications" — design
• Secondary: "Maybe later" — styling (must feel secondary, not equally prominent)

SCREEN 5 — PERSONALISED PLAN REVEAL
• User's name display (where it comes from, how it's personalised)
• Plan summary: daily goal, streak target, first session recommendation
• Celebratory micro-animation (confetti, pulse, checkmark draw)
• First Session CTA: copy, color, size
• What text or illustration communicates "this is made for you"

FOR ALL SCREENS, ALSO SPECIFY:
• Color mood and exact palette (max 3 colors)
• Typography: heading font, body font, sizes
• Progress indicator design (dots, bar, numbered steps)
• Transition animation between screens (slide, fade, spring)
• Illustration style consistency rules (stroke weight, color palette, character proportions)