How to Create UX Flowcharts with Examples and Symbols Explained

Using Flowcharts as a UX Tool

Flowcharts are used in many different fields, not only in UX. However, it's a great tool to have in your UX design arsenal and is an effective deliverable that will help you get acceptance from potential stakeholders. They can even participate in this exercise, which is a huge advantage, because they feel more invested.

Flowcharts can also serve as a fantastic discussion piece for your team and to get a collective overview of the entire process. Identifying potential flaws becomes so much easier and the scope is suddenly crystal clear for everyone involved.

Most Common Flowchart Symbols and Their Meaning

Let's have a look at the most common flowchart symbols used in UX design and what they mean.

Start/End (Oval)

The oval symbolize the start or the end in a flowchart.

Process (Rectangle)

The rectangle symbolize steps in the process. This is your go-to symbol in any flowchart and by far the most commonly used.

Input/Output (Parallelogram)

The parallelogram symbolize input/output.

Decision (Diamond)

The diamond symbolize decisions. This will typically split your flowchart using arrows.

Arrow (Direction)

The arrow symbol is used to represent a flow direction. This will be, coupled with the rectangle, your go-to symbol.

Simple Flowchart Examples

Let's have a look at how flowcharts can be used in a UX context with user flows and task flows as examples.

User Flow Example

A user flow helps us get a better understanding of the steps a user takes through an entire service, app or a website (i.e. from entering an eCommerce site to purchase confirmation).

The example above show a very simplified version for illustrative purposes and could include more decisions with branches.

However, I like to keep them related to a user goal, so that it doesn't get overly complicated. Once you have all your user goals mapped out as flowcharts, you can merge them all into one single diagram to see the bigger picture.

Task Flow Example

A user task on the other hand, is a more isolated part of a service, app or website (i.e. checkout process).

Again, the example above is a simplified version for illustrative purposes. It could include more decisions with branches.

Task flows should be simple, so don't over complicate things. The point is to isolate specific user tasks within user flows. A deep dive so to speak.

Conclusion

As you can see, using flowcharts as a tool in your UX design process offers a lot in return with very little effort.

It's easy to pull off and works well as a team exercise. Go fast and iterate quickly.