DESIGN TOGETHER
Turn a user flow into an onboarding wireframe
A user flow explains where someone goes. A wireframe explains what they see and do at each step. This guide connects the two through an original example: a new teammate accepting an invitation and reaching a shared project. Use the example as a design exercise, then adapt its rules to your own product.
30-day complimentary access · no card required · secure email verification1. Define one outcome before drawing screens
For this example, success means the invited teammate opens the intended project and understands their next action. Account creation alone is not the outcome. Write down the starting condition: the teammate has received an invitation, may already have an account, and may open the link on a phone.
Keep the first pass deliberately small. Exclude billing, project creation and administrator setup unless they are essential to this journey. Record assumptions beside the flow so reviewers can distinguish a product decision from an unanswered question. Our example is hypothetical; it is not a claim about the exact steps in Kanvixo’s invitation interface.
2. Map the main path and the decisions
Main path: open invitation → check invitation → sign in or create an account → confirm workspace → open project → choose the next task.
Add three decision points. Is the invitation still valid? Is the person signed into the intended account? Can that account open this project? Give each branch a visible destination. An expired invitation should explain what happened and offer a recovery action. An account mismatch should identify which account is active without exposing someone else’s private details. Missing access needs a clear explanation and an appropriate route to request help.
Avoid arrows labelled only “yes” and “no” when the decision itself is unclear. Name the condition first, such as “Invitation valid?” Then label both outcomes.
3. Turn flow nodes into a screen-state inventory
One flow node does not always need a separate page. A decision might appear as an inline message, a modal or a state of an existing screen. Build the inventory before choosing the layout.
Invitation screen: workspace name, invitation context and primary action.
Account screen: current identity, sign-in or registration fields, validation and recovery.
Workspace confirmation: the destination, available action and a way to correct an account mismatch.
Project screen: project name, useful context, a clear next task and an empty state if no work exists.
For each screen, list default, loading, error and success states. This prevents a polished main path from concealing incomplete recovery behavior.
4. Sketch the smallest useful wireframe
Start with neutral boxes, text labels and a single clear primary action. On the invitation screen, place the workspace name above the action so the person knows what they are accepting. Show secondary help below it. Use realistic text lengths rather than identical placeholder lines.
For the project screen, try this hierarchy: project title; a short description of its purpose; the next task; recent work; supporting navigation. Test the hierarchy at a narrow width before adding visual decoration. A long project title, a missing avatar and an empty activity list should still produce a usable screen.
Keep the same labels in your flow and wireframes. If the flow says “Open project,” avoid changing the wireframe button to a vague “Continue” without explaining why.
5. Review the recovery paths with your team
Walk through the example aloud without explaining the interface on its behalf. Ask a reviewer where they would act next and what result they expect. Start with the main path, then repeat with an expired invitation, a mistyped email address and a project with no content.
Record each issue as an observation, its effect and the proposed change. For example: “The error message does not identify the affected field; the person cannot tell what to correct; place the message beside the email field and preserve the entered value.”
Separate feedback that blocks the journey from preferences about visual style. Resolve unclear actions, lost input and dead ends before spending time on colour or illustration.
6. Copy this wireframe review checklist
Outcome: What must the person accomplish?
Entry: What brings them here, and what do they already know?
Identity: Is the active account and workspace clear?
Primary action: Is the next step specific and visible?
States: Are loading, empty, error and success states described?
Recovery: Can the person correct a mistake without restarting?
Content: Have long names and realistic messages been tried?
Access: What happens when permission is missing?
Mobile: Does the reading order still make sense on a narrow screen?
Handoff: Are the agreed behavior and unresolved questions recorded?
Copy these prompts into your project notes. Assign an owner to each unresolved question, and keep the checklist with the wireframes so later changes can be reviewed against the same outcome.
YOUR NEXT WORKSPACE
Connect the flow to your design work
Kanvixo brings user flows, wireframes, interface design and team review into a shared workspace. Explore the capabilities before choosing a plan, and use this checklist to structure your next design conversation.
Explore the design toolsYOUR NEXT WORKSPACE
Review the wireframe with your team
Apply a focused review checklist to your onboarding journey. Check recovery states, separate evidence from assumptions and record the decision before handoff.
Open the design review checklistYOUR NEXT WORKSPACE
See the starters in a real product demonstration
Explore a user-flow starter and an iOS mobile wireframe created in Kanvixo, with the steps and saved-layer checks documented.
View verified product examples