User Flow

Why do we use user flows?

Picturing and developing this process allows designers to evaluate and optimize the user experience and to understand what needs to be built; it helps you and your team think about how the users might approach a task and what type of experience you want to provide them.

One persona at a time

When you start: you need to determine which persona you'll focus on for the exercise. You can and should create multiple user flow exercises based on different scenarios and personas. Each scenario should contain a persona, a motivator, an intent, an action, and a resolution.

From start to finish

When you create a user flow you need to determine where you want your users to end up and what your users want from your app or website. Some examples: purchasing a product, subscribing to a newsletter, downloading your eBook, login, sign up, etc.

Different entry points

You need to define the entry points: a user can come from direct traffic, organic search, paid advertising, social media, referral sites, email marketing, etc. Each entry point can and should have a different mapping scenario — because the user motivations may differ depending on what brought them to your product.

Exercise: Login Modal User Flow

I am using Adobe XD since it'a a free tool and has great integration with the Overflow plugin. We will just make a Login Modal. First, start making the screens of your Login Modal. I made a screen for the splash screen also (the entry point in the app).

Start designing the boxes for "username, password". Also make buttons for "login, login with Facebook, and login with Twitter". You can design these yourself, or you can copy them from the free wireframes kits from Adobe XD. (Get those from Adobe Xd Menu → File → Get Ui Kits → Wireframes)

Design a second screen for "login" where the username and password are filled in already by the users. Design a 4th screen for what happens when the user "logs in" successfully. In this case, the user ends up on the account screen.

I did a simple design for the Splash screen too.

Now, let's go to the Plugins Menu and search for the Overflow plugin.

Once you find it, install it. You will also have to install the app on your computer/laptop. Download it here.

Now you need to select all the screens and click "Sync to Overflow".

The Overflow app will open. Here, you will need to create a new document. Everything is in Overflow now. You can now start to create connections, create the user flow.

You can also write on the connection lines to give extra information about the interactions.

Now go to the "Phone" icon in the menu bar and select a device skin for our screens. Select a phone model for your screens. This will make your screens look much better.

You can now share your user flow screens with your team and stakeholders. Just go to the top-right corner, and click on the "share" icon. Copy the link and share it with anyone you want.

People who have the link can comment on your work, and give feedback on anything you've designed.

Conclusion

User flows will help you easily communicate the flow of the product to your stakeholders and help your design team visualize how users will move through the product. Scenario mapping is useful to do fairly early in a project to help define user flow features and UI design.