How to Create UX Flowcharts with Examples and Symbols Explained

July 9, 2019

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.

UX Flowchart Symbols and Their Meaning

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 Task 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.


Portrait of Jan Wennesland

About

Jan is a Norwegian UX Designer working as a consultant by day and making side projects like Case Study Club by night. Read more →

Solving Product Design Exercises

Recommended Read: Solving Product Design Exercise

Whether you're preparing for your first interview, switching jobs, hiring for your company or just want insight into how things are done; this book is a must-read.

It gives you a step-by-step framework to follow and teaches you what to expect. The book even goes into the business side of design (a huge competitive edge).

Alexander Graham Bell said it well:
"Before anything else, preparation is the key to success".

Learn More About This Book →