Build 30

Flow Diagram

A flow diagram shows the relationship of states across an interactive experience. It uses mock-ups to capture these various states and documents how the user moves between them. Flow diagrams can vary in level of detail, layers of information, and even in comprehensiveness of the system. With careful organization, a flow diagram makes it easy for stakeholders to understand the overall structure of an experience and for developers to see the detailed relationships between elements. Meanwhile, the creation of the flow diagram can help designers identify and maintain patterns across complex design systems.

Not all products or services need a flow diagram, and not all experiences can be contained in a single flow. A simple product design that has only a handful of nonsequential states isn’t complex enough to benefit from a flow diagram, while an experience that crosses many possible touchpoints over a lot of time likely needs one flow diagram per touchpoint. A conversational interface where inputs and responses are based on the endless variations of user input is probably too complex for a visual flow diagram, but the conversation could still be mapped using key words and responses.