Proper way of doing User Flows for digital products

In this world, we are always using digital products in forms of apps, websites, smart home interfaces like Alexa or google home, and things that makes your car an “Smart Car”, but sometimes we can easily forget how the user interacts with our product, that’s why we need to create some basics user flows before even start creating screens.

The tools

For creating flows we might have many many tools online, but why I recommend the most is pen a paper. Why? Simple, you can’t ever get short creating simple or complex flows with a tool you can easily escalate or erase. After you created the pen and paper you might want to digitalize what you created, so for that, you can use tools like draw.io that works really well for creating flows.

How to create the flow

Let me explain first what a user flow is and why we need them when creating, or improving, a digital product.

User Flow is the process of how the user will interact with your product, starting from when the user finds out of the existence of your app/website, to when is downloaded/opened and each step the user might take or have, including screens, decisions, outcomes, screens after those outcomes, and you get the idea.

Why do we need to create this? So we can know how many screens we need, how the interface will look like, even when we don’t have 100% clear at this point, how we need to create navigation, calculate the possible pain points, and so on.

The process of creating a flow

We need to start with a premise, something like “The user finds out about our app after googling about sports”, the more specific the better.

Then, we go deeper and start creating if the user needs registration, how the login and register works, what will be the first thing the user will see after the login, what will see after registration, and so on. You can never get short creating flows because they can be as specific and complex as you want and that’s a good thing! The more descriptive and specific, the better.

One important thing to remember

There can be a lot of content around a user flow, but one thing needs to be clear, when its a screen, a decision, end of the flow, the start of the flow, and every part you consider special, like a modal of possible pain points, needs to be described with a special color or symbol, something like this:

“Decisions use a red box, the start of the flow will be white and the end black, screens will be a blue circle and possible pain points will be light purple”.