Creating User Flows

James Hamann
3 min readJul 18, 2017

Recently I’ve been involved in planning and designing the app for our startup as well as personal hobby projects. Something that came up during a recent discussion was planning the user’s journey through the app and creating a “user flow”, so I thought I’d share my process. I’m new to the whole design game, so if there’s stuff you don’t agree with, feel free to leave a comment and discuss.

What is a “User Flow”?

When building and planning your application, it’s important to understand a user’s journey through it from start to finish. User flows help plan out the route a user takes through your app and prompts you to think about all the different potential screens you may require.

What you’re trying to achieve in this process is a “smooth” as possible flow; I guess that’s why they call it flow right? You think of the word flow and you think of something consistent, clean and smooth, which is similar to the experience you’re trying to replicate. Even though each user may choose different routes, or “flows”, you want to be able to create a clean, efficient and fun experience for them when they’re using your app.

These “flows” can come in all shapes and sizes, whether it’s a diagram on a whiteboard, what I describe below, or even a set of Trello cards describing the journey.

My process

There’s always a lot of ways to do something and it’s important you find what works for you and what you’re most comfortable with. For me, I use an app called Mindly, it’s designed as a mind mapping application, which works quite nicely when prototyping flows. I’m also more of a visual person so I find diagramming, either physically or using software, to be way more productive than long lists of bullet points. The advantage of presenting it visually is you can physically see the objects/screens and how each relates to each other.

Apologies for the laggy GIF in advance, but here’s an example of a super basic user flow diagram I mocked up in Mindly for a mobile app. Obviously it’s very simplified but each bubble represents a screen. Each screen also has notes attached to it describing important features or things to consider.

Basic Mindly Diagram for a Mobile App

This allows you to get a quick snapshot of a user’s journey through the application and also allows you to get a glance at what screens will need to be considered/designed. A problem I’ve faced in the past is even though you know your application and user stories inside out, there’s a good chance you’ll miss a screen somewhere or forget to implement an important function. By physically thinking and mapping out a journey the user takes, as well as all the possible options at each point of that journey, you get a good understanding of what’s required. It also helps when scoping out your MVP, it gives you the chance to categorise what’s required and what can maybe be pushed back to the next release cycle.

Complete Mind Map for the Demo App

Don’t over think it though and don’t spend too much time on it. Whilst it’s important to plan things, there’s a balance between planning and over planning. Your plan will change, your flow will adapt, you need to be agile and flexible to whatever changes may arise.

Thanks for reading, hit 💚 if you like what you read and be sure to follow to keep up to date with my future posts.

--

--