Contents

• 📚 A quick definition of user flows
• 🖥 What role do wireframes have?
  — What do wireframes have to do with user flows?
• 🔍 What are the different ‘resolutions’ for user flows?
• 🤔 FAQ: Frequently Anticipated Questions
  — a cool gif

And if that doesn’t entice you to read to the end my busy skim-reading friend then here is my Code of Content which I promise to abide by ✋

📚 A quick definition of user flows

First of all, a quick definition for the uninitiated:

A user flow is a series of steps a user takes to achieve a meaningful goal.

In this article we’re going to learn how the rise of user flows will have a similar impact on product teams as wireframes.

What’s so great about wireframes anyway?

🖥 What role do wireframes have?

Wireframes were a great invention that will go down in the records of design. My use of wireframes also stretches to cover: low-fi mockups, blockframes, interfacemonos, and wires (one of those is made-up).

I’ll be painting with broad brushstrokes here:

1. Faster iterations

Wireframes give designers—and non-designers—a way to iterate faster through ideas. As explained by emojis:

2. Better communication

I love how wireframes give us something to keep the discussion about the design itself; without requiring a crisp pixel-perfect interface.

With wireframes the process has shifted from situations like this:

Hey developer I need you to code something that looks exactly like this mockup I did in PowerPoint.
– Eager Founder

To more like this:

Here’s an idea how the interface could look, but I’ll put it in front of some users first.

And in an infographic for our skim-reading peers:

I’m not doing wireframes and prototyping justice! You should follow uxdesign.cc religiously 🙏 they’ll do a better job at covering the topic.

— So what do wireframes have to do with user flows?

They have a lot in common! They both have different levels of ‘resolution’ and fidelity of the finished product. When used at the right time in projects they can both:

• Increase the speed of iterations
• Improve communication across the product team

Let’s step through the different ‘resolutions’ of user flows.

🔍 What are the different ‘resolutions’ for user flows?

That’s not a user flow! I know—but it’s a solid start. A definition of the flow you are designing is what separates it from a sitemap or process map.

I like to define the user and their goal, but you could use a requirement, story, stage of a user journey, or step on their quest to Mordor. Anything that fits neatly into a little draggable card right? 🙃

Make your users the ⭐️ of your flows. Describe what they will do at each step. A good way to get started is to write out what the user needs to do at each step to get the job done or meet the goal/requirement.

Personally, I don’t find it helpful to include the desired emotional state of our users at each step… I mean are you 😃 🤔 🐶 or 😠 while you “Update Billing Settings”.

The wireflow (or visual user flow) stage is the next level of commitment for your flows 💍. At this resolution you can start adding in what digital things your users will stare at/use: screens, messages, unwanted lobby advertising displays etc..

Our pal the wireframe works well here. But so does an icon labelled after the screen it represents. Keep the conversation on the flow not the screen.

The goal at this stage is have a user flow that both your users and developers will understand—otherwise you end up with a solution that neither understands.

To get to this stage from wireframes, think about all of the information required to create the flow:

🤔 What happens when things don’t follow the ‘happy path’?

🤔 What logic or case leads to an alternate path?

🤔 Is there any data being moved around? (And am I accidentally 😉 using it to chase my users around the internet with ads)

🤔 Any state changes in your interfaces? What triggered them?

All together now for the TL;DR crowd!