Screen Flow

Also Called, Flow Diagram, Navigation Flow Chart

A screen flow is a visual representation that maps out every screen a user interacts with to complete a task within a digital product.

A screen flow is a detailed diagram that showcases the sequence and relationship between screens that users encounter as they complete specific tasks within an application or website. It goes beyond a basic user flow by providing a granular view of the user interface at each step, often including the transitions and interactions that occur. Screen flows are instrumental in illustrating the detailed navigation pathways, including the UI elements that users will engage with, such as buttons, forms, and menus.

This tool is particularly valuable in the later stages of design, once the user flow has been established, and is critical for the development and design teams to visualize and understand the complete picture of how the product will be used from screen to screen.

What stage of the design process are you at?

Ideation, Prototyping

Who would you like to engage in the design process?

Stakeholders, Service Staff, Users

What aspects of the service are you working on?

Experience, Offering

What types of representation you'd like to use?

Map, Narrative

Use it to

Map out the detailed interactions on each screen for clarity and functionality.
Show how users move from one screen to another and what triggers those transitions.
Identify redundancy and reduce unnecessary steps to streamline the user journey.
Ensure that all necessary information and UI elements are included on each screen.
Provide clear specifications for developers implementing the UI.
Help stakeholders visualize the final product in a more concrete way.