Design patterns
How to design an onboarding flow with AI
Build onboarding around a first useful outcome, with clear steps, resumable progress and recovery paths. Includes a team-workspace example.
Define the first useful outcome
An onboarding flow should help a new user reach a specific result. For a team planning app, that might be creating one project with a task they can assign. Completing a profile or watching a tour can support that result, but neither is automatically the outcome.
List what the app truly needs before that first project can exist. Separate required inputs from preferences that can be chosen later. This makes the sequence easier to explain and prevents a long questionnaire from becoming the default first experience.
Sketch the route and the exits
For an illustrative planning app, the route could be: choose a workspace name, create a project, add a task, then optionally invite a colleague. A person who is not ready to invite anyone should still be able to inspect the project. If collaboration is essential to the product, explain why and show the invitation’s status.
Decide what happens if the person closes the tab halfway through. Store only the progress the implementation actually supports, and make returning users’ next step clear. Do not show a completed step before the underlying request succeeds. A failed invitation should not erase a successfully created project.
Look at transitions as well as screens
Save references that illustrate a complete step, its confirmation and the next action. In Taste notes, distinguish “this progress indicator makes the remaining work clear” from “copy these colors.” A polished welcome screen tells you little about recovery from a failed save.
Write the field labels and explanations before asking for visual polish. “Workspace” may need a short explanation for your audience. A button labeled “Create project” communicates more about its consequence than a series of identical “Continue” buttons.
Give the agent a state-by-state task
Use this prompt to make missing behaviors visible before implementation.
Map the first-use flow for our planning app: name a workspace, create a project and add one task. Inviting colleagues is optional after the task exists. Review my Taste onboarding references and the current auth/navigation code. Specify the saved state after each step, what Back does, what happens after refresh, and how a failed request can be retried. Reuse existing form controls. Implement the smallest complete flow and label any persistence behavior that is only mocked.
Observe a first attempt
Give a new person the goal without walking them through the screens. Note where terminology, permissions or decisions need explanation. Test a return visit as well as a fresh account. Try a duplicate name and an interrupted request.
Measure the chosen outcome separately from signup and step completion. A rise in completed profiles does not by itself show that more people reached their first useful project. Keep the flow’s promises aligned with what the product actually saves.