arrow_back Artifacts

User Flows

A User Flow is a diagram that visualizes the complete path a user follows through a digital product to complete a specific task.

artifacts schedule 3 min read
toc Table of Contents expand_more
Info Icon Definición Rápida
A User Flow is a diagram that visualizes the complete path a user follows through a digital product to complete a specific task. It shows the screens, actions, and decisions the user makes from start to finish.

What are User Flows?

If a wireframe is the blueprint of a room and a sitemap is the blueprint of the entire building, a User Flow is the fire evacuation route. It doesn’t show all the rooms, just the specific sequence of steps to get from point A (e.g., “being in the hallway”) to point B (e.g., “being safely outside the building”).

A User Flow focuses on movement and interaction. It answers questions like:

  • What steps must a user follow to register?
  • How does a user get from the home page to purchasing a product?
  • What options does the user have if they forget their password?

They are generally represented with simple shapes (rectangles for screens, diamonds for decisions, arrows for direction) to keep the focus on the sequence of actions.

Why are they important?

  • They optimize the experience: They help identify unnecessary steps, dead ends, or friction points in a task, allowing for process simplification.
  • They ensure there are no loose ends: They guarantee that all possible scenarios have been considered (success, error, edge cases).
  • They facilitate communication: They are an excellent tool for the entire team (designers, developers, PMs) to understand and discuss the logic of a feature before building it.
  • They are the foundation for other artifacts: A good User Flow is the starting point for creating wireframes and prototypes.

How are they made?

  1. Define the goal: What specific task do you want to map? Be clear and concise. Example: “Purchase an item” or “Upload a profile photo.”
  2. Identify the entry point: Where does the user start? On the home page? From a link in an email?
  3. Map the sequential steps: Using a tool like Miro or FigJam, start drawing the flow.
    • Use rectangles to represent each screen or interface state.
    • Use arrows to connect steps and show direction.
    • Use diamonds to represent decision points where the user has to choose (e.g., “Is the user logged in?”). At least two arrows will come out of each diamond (Yes/No).
  4. Consider all paths: Don’t limit yourself to the “happy path.” Map what happens if there’s an error, if the user wants to go back, or if they take an alternative route.
  5. Define the exit point: What is the final screen that indicates to the user that they have successfully completed the task?
  6. Review and simplify: Once mapped, look for opportunities to eliminate steps or reduce complexity.

Mentor Tips

  • Start with a clear goal: A User Flow without a defined goal becomes a confusing sitemap. Focus on one task at a time.
  • Don’t worry about visual detail: Just like with wireframes, the goal is the logic and flow, not the aesthetics.
  • Collaborate: Create the User Flow together with your Product Manager and a developer. They will bring valuable perspectives on business rules and technical constraints.
  • Use legends: If your diagram is complex, include a legend that explains what each shape or color means.

Resources and Tools

Tags

ux artifact process junior