Get inspired by design stories

Weekly UX and product design case studies. Trusted by designers from companies like Apple, Google and Spotify. It's 100% free.

How to Create UX Flowcharts with Examples and Symbols Explained

In UX design a flowchart is used to visually represent user flows or user tasks. More specifically, a flowchart is a diagram of a process using a set of standard symbols and connecting lines.

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.

Flowchart Symbol Example Oval

Start/End (Oval)

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

Flowchart Symbol Example Rectangle

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.

Flowchart Symbol Example Parallellogram

Input/Output (Parallelogram)

The parallelogram symbolize input/output.

Flowchart Symbol Example Diamond

Decision (Diamond)

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

Flowchart Symbol Example Arrow

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.

Flowchart Example User Flow

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.

Flowchart Example User Flow

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.

No items found.

More from the journal

Tobias Van Schneider

Stop Trying to Fit in With Your Portfolio

Interview
Ales Nesetril

Case Study Talk

Interview