The essence of UX flow design

User flow mapping allows UX professionals to evaluate and optimize the user experience, and thereby increase customer conversion rates.

Each touchpoint in the user journey is represented by a node in the flowchart. These nodes are shown as shapes, and each shape stands for a specific flow.

For example, a diamond means a decision is being made, so it is followed by “Yes” and “No” arrows. A rectangle indicates a task or action to be performed, for example “Read next” or “Buy”.

There are three main cases where UX flow design is of outstanding benefit:

• When creating intuitive interfaces
• When reviewing existing interfaces
• When presenting and demoing a project product

Intuitive interface creation is needed when designing a product where it is important that users can quickly learn to use the system on their own.
The review of existing interfaces takes place when user flowcharts for products are already in use help to determine what works, what doesn’t and where improvements are needed.

When demonstrating a product, user flowcharts make it easy to show how to use the product before an actual line of code or graphical element is created, so finalising the UX flowchart saves designers and developers a lot of unnecessary rounds of changes.

UX flow design at Ergomania

At Ergomania, UX flow design takes place by developing the structure and navigation scheme of each function based on the knowledge of the functions and content defined during research and workshops. We don’t think in terms of screens and discrete details in UX flow design, but rather as a flow, a flow from start to finish.

We determine how these will be organized and interconnected to enable a seamless user experience. Our flowchart shows the information architecture of the entire application, or its highlighted details, with the most important features already illustrated.

Where the flows of key personas differ from each other, they are marked and illustrated separately.

We use a number of software tools for flow design, but the most convenient is Axure, which is good at keeping each screen and the flowchart connecting them consistent.

Main methods of UX flow design

In UX flow design, you can create several types of user flowchart:

• Task flowchart
• Wire diagram
• Interaction Diagram

In a task diagram, we focus on how users move through the product while performing a particular task.

A wire diagram is a combination of wireframes and flowcharts. The layout of each screen is used as an element within the diagram.

For the interaction diagram, we focus on how the target audience will interact with the product. It is by no means certain that all users will perform tasks in the same way and therefore may follow different paths, all of which are represented.

What do our customers gain from UX flow design?

Through UX flow design, our customers will know exactly how their product is used by users, i.e. what paths they may take, so that the product can be designed or redesigned accordingly to be perfectly optimised for the target audience.

What is the role of our clients in UX flow design?

The role of our clients in UX flow design is to actively participate in the Workshops, as this is the most effective way to create the new flowcharts that are being designed or redesigned.

The result of a successfully applied UX flow design

The result of successfully using UX flow design is a process-centric presentation of the wireframes, showing the interfaces and pathways that the user can take when using the product.

The level of detail may vary from project to project. It may contain only high-level symbols with names (e.g. landing page, product page, etc.), but it may also contain relatively detailed mini-screens that show the inner workings of each step at some level.