• Noah

Bring your app to life with a User Flow and Wireframe!

Updated: Jan 28

📚 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.

🖥 What role do wireframes have?

Wireframes are an important step in design. My use of wireframes also stretches to cover: low-fi mockups and hi fi mockups. The purpose of a wireframe is to define the user flow, information architecture, UI/UX and overall concept.

1. Faster iterations Wireframes give designers—and non-designers—a way to iterate faster through ideas. From left to right you're seeing a wireframe go from a low-fi to a hi-fi then all the way to a prototype. 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." - Eager Founder

And in an infographic for our skim-reading peers:

— So how do wireframes and user flows bring your app idea to life?

They both have different levels of ‘resolution’ and fidelity of the finished product. When used correctly they'll paint a clearer picture. You'll be able to visually see how the user goes from one screen to the next. You'll be able to identify where buttons go and what they do. In addition, they'll help you with

  • Speed of iterations with added features or scope

  • Improve communication across partners and investors

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

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

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.

Like hi-fi designs, high-fidelity user flows are used in the implementation stages of a design. It helps a lot, but takes work.

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?

🤔 FAQ: Frequently Anticipated Questions

If I didn’t hit a question you had, comment it below!

How do I add this to my current [_____] UI process, that fits in with the [_____] quadrant of UX [_____] in design, and still work with the [____] flavour of [_____] that the development team configured Jira for?

Take it easy. I think user flows work best when they’re used as a tool to communicate your designs through the lens of your users’ goals. You can then go from there with however you see fit.

What tool can I use for this? Do they have branded socks?

Great first question. There’s a lot of solid tools in the space: Flowmapp combines sitemaps and user flows, Overflow makes wireflows fun and quick to build, Invision has freehand of course, Marvel generates user flow from their prototypes, and a shout-out to the home-team Primary which focuses on low and hi-res user flows.

Don’t forget pen + paper and whiteboards!

I read this far and don’t want to go back to work, what now?

Thank you for your time ✌️ Let me know if you disliked the article by giving it 1 👏; or if you were mildly entertained leave 40+ 👏 (for user research purposes…).

If you got this far leave a comment! I promise to reply to every question.

0 views0 comments