What is Flowchart

As designers, it often happens to us that we get a brief for a project and we already start thinking about how the wireframes will be and we practically have in mind the final design.

This sometimes leads us to have discussions with stakeholders that are already based on concrete screens, a fact that can divert the conversation to the aesthetic side, forgetting the functional one.

What is Flowchart

A flowchart is a tool that will allow you to easily understand and communicate user flows and tasks with development teams, product managers or product owners and, in fact, with anyone interested in the project.
Flowcharts are used in a multitude of fields, they are not a tool that only belongs to user experience design. This is in itself an advantage, since it makes it more understandable for the rest of the profiles within the team.

In a nutshell, a flowchart is a user-centered design method that allows to visually represent how the user moves through the web or application. The objective is to draw and analyze in detail the different flows to optimize them and communicate them to the rest of the team.

As I mentioned in the introduction, diagrams allow to represent task flows and user flows.

They have another important feature, and that is that they are completely agnostic to the type of device and aesthetics, which makes it easier for the discussion to focus on what happens and not on how it will look.

When to use Flowchart


The flowchart can be used at a multitude of times within the design process. These include:

When first designing functionality.
During the benchmark in which the competition is analyzed.
When evaluating a flow in order to make corrections and adjustments to it.
When adding a new functionality in an existing flow
How to prepare a flowchart
In order to make a flowchart you first have to be clear about what you want to represent. And with this “what” I mean both which user person you are focusing on, what their objectives are and what the business objectives are.

You need to have this information along with other quantitative, qualitative and technical data, since there are times when the existing operations or technology can condition the exercise (for better or worse).

Elements of a flowchart
As I said in previous lines, the flowchart is a tool that is used in other disciplines. It is for this reason that it has a nomenclature and predefined elements that must be respected. These are the following:

The circle is used to identify the start and end of the flow.
The oval rectangle is usually used to identify interactions performed by the user.
The rectangle is used to communicate “scenarios” or states. In the specific case of UX design it usually represents screens.
The diamonds indicate that a decision occurs at that point in time, which usually has a positive or negative response. This will divide the flow in two
The arrows or connectors allow to identify the direction that the flow follows (usually from left to right or from top to bottom).
When making a flowchart it is advisable to always add a legend that should explain in a summarized form what each geometric shape or color means.

Examples of flowcharts


I leave you with a couple of examples:

Flowchart proposal for sharing songs on Spotify.

Final notes
Beyond being useful to work a flow and communicate it to the rest of the people interested in the project, the flowchart will also help you to design well the application or the web page.

By having all the steps that the user follows represented in a simple way, you will be able to identify much better how many screens you have to design. It will also allow you to detect earlier when it is better to show alerts, empty states, and so on.