Design a first-run onboarding flow
Designs a first-run onboarding flow that gets new users to the activation moment fast, using progressive disclosure, skip paths and measurable steps. Use when designing or fixing onboarding.
Onboarding is usually designed as a tour of features: five carousel screens, a profile form, a tooltip on every button. Most users skip or forget it, then leave before they ever do the one thing that makes the product useful. Good onboarding works backwards from the activation moment, removes or defers everything not on the path to it, and teaches in context, at the moment a feature becomes relevant.
Design the first-run onboarding for this product, aimed at the activation event ph:activation_event.
- Check the activation event. It should be a user action, reachable in the first session, and plausibly tied to retention. If it is a vanity event ("completed profile", "watched tour"), say why and propose a better one, then design for the better one and state that assumption.
- Map the shortest path from sign-up to activation. List every step the current flow (or a naive flow) would include, then decide for each: keep, remove, defer, or automate (sensible defaults, templates, sample data, import).
- Design the flow:
- Ask at sign-up only what is needed to start. Ask personalisation questions only if the answers change what the user sees, and say what each one changes.
- Get the user into the product early and let them act on something real or realistic (a template, sample project, or pre-filled draft) rather than an empty screen.
- Use progressive disclosure: introduce secondary features at the moment they become relevant, triggered by behaviour, not by time.
- Prefer contextual guidance (empty states that teach, one inline hint, a short checklist tied to activation) to product tours.
- Give every non-essential step a visible skip, and a way back to it later (checklist, settings, resume banner).
- Cover other entry paths: invited users joining an existing workspace, users who abandon mid-flow and return, users on mobile, and experienced users switching from a competitor.
- Define measurement: the funnel steps to instrument, time to activation, activation rate, and the guardrail metric (e.g. week-2 retention) that shows the change is real.
- Propose 2 to 3 experiments, each with hypothesis, change, primary metric and the risk it addresses.
- If key facts are missing (who signs up, what setup is truly required), make a reasonable assumption, label it, and list it in Questions. If the product description is too thin to design anything, ask first.
- Every step in the flow must earn its place by moving the user towards or by being legally or technically required. Say which.
- No dark patterns: no hidden skip links, no forced invitations or contact uploads, no pre-ticked marketing consent, no fake progress.
- Do not invent data about the current flow. If no metrics were given, say the plan relies on assumptions until they are measured.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
Activation
The activation event (as given or revised, with reasoning), the target time to reach it, and the "aha" the user should feel.
Flow
| # | Screen or moment | User goal | What we show or ask | Why it is here | Skip path |
Deferred
| Item removed from first run | When and how it appears instead |
Edge cases
Invited users, returning after abandoning, mobile, experienced switchers.
Measurement
Funnel events, metrics and guardrail.
Experiments
Hypothesis, change, primary metric, risk.
Questions
Assumptions to confirm.
2 required values still a placeholder; the assistant will ask for them.
details
- kind
- Prompt: a task you run by name to get one finished thing back
- domain
- Design
- category
- UI design
- level
- Intermediate
- made for
- Product / UX / UI designer, Product manager, Founder / business owner
- risk
- read-only
- version
- v1.0.0 · incubating
- reviewed
- 2026-10-02
- works in
- Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai
use in
npx @hermes-hq/hodios install design-onboarding-flow --target claude-codenpx skills add hermes-hq/hodios-dist --skill design-onboarding-flow -a claude-codeclaude plugin marketplace add hermes-hq/hodios-distclaude plugin install hodios-design@hodiosThe plugin brings every entry in this domain at once.
pairs well with
All of UI designWrite UX microcopy
Writes interface microcopy (buttons, labels, empty states, errors, confirmations, success messages) that is clear, consistent and in the product's voice. Use when designing or reviewing screens.
write-ux-microcopyWrite a text wireframe spec
Writes a low-fidelity text wireframe for one screen with layout regions, components, content hierarchy, all states and responsive behaviour. Use before visual design or to brief a developer.
create-wireframe-specBuild a user journey map from research
Builds an evidence-based journey map with stages, actions, thoughts, emotions, pain points and opportunities, marking every assumption. Use after interviews or studies about one segment.
build-user-journey-mapProduct designer
Product designer who frames the problem before the pixels, explores several options, designs every state and defends decisions with user evidence. Use as a design partner or reviewer.
product-designerAdapt a desktop design for mobile
Adapts a desktop screen to mobile by ranking content, choosing layout changes, touch targets and a navigation pattern, and deciding what to drop or defer. Use for responsive products.
adapt-design-for-mobileCritique a UI screen
Critiques one interface screen for hierarchy, layout, consistency, clarity and accessibility against its goal, and returns prioritised, concrete fixes. Use when reviewing a mockup or live screen.
critique-ui-screen