Documenting user flows with our clients

How Overflow helps us create and document multiple flows for our projects  —  and keep them up-to-date.

Purple squiggly line
by
Jenna Fucci
@jemfucci
iPhone with user flow arrows illustration

The Infinite Red team is 100% remote, so we’ve tested out our fair share of tools to help the design collaboration process. One tool we’ve recently added to our deck is Overflow, a collaboration tool to rapidly test user flows (the flows between screens in an app). I know, another online tool –– but this one is worth it to our team. Before I jump in and list all of the reasons why, I‘ll start by explaining what it’s not.

Overflow is not an in-depth prototyping tool. You won’t be adding any complex transitions or animations to visualize a final product. So what do we like about it? Overflow is a tool to quickly test out multiple flows and get feedback from stakeholders and the team. At this stage of design, we’re testing out ideas, seeing if the flow feels right, and quickly iterating.

At this stage of design, we're testing out ideas, seeing if the flow feels right, and quickly iterating.

Sure, there are plenty of perfectly good options to quickly turn your designs into clickable mockups. Here are four reasons why Overflow works well for our team:


1. No more guesswork around what’s “clickable”

Easily see all of your flows between screens from a birds-eye-view. Our clients love this, and we love not having to rely on documentation or zoom calls to get feedback. For more clarity, we’ll add annotations to state what path is being shown. We’ve found this really useful for development hand-offs too!


2. It’s easy to organize user flows

You can create multiple boards (like a page in Sketch) to group your flows. We’ve found it’s easiest to keep them as concise as possible, so we’ll typically group them by a single flow or screen. For instance, we’ll add login on one board and account setup on another. Not only is it easier to find an artboard, but you also have a much less complex diagram of arrows. <insert Charlie Day meme here.>


3. Create a flow with multiple paths from the same screen

No more duplicate artboards! Set alternative paths for a button instead. When viewing in presentation mode (device view) you can select which path to continue through. This is great for options like error states or login paths. One hotspot can link to multiple screens! 🎉


4. Easily keep your documentation up-to-date

We like to use Overflow as the single source of truth for our projects. When we hand off designs to development, it’s important to show how it works. Static flows and documentation can be a hurdle to update. Because the flows are linked to our designs in Sketch, we only have to manage one document. If you need to update your designs, it’s one click to re-sync your artboards, and all of your hotspots and flows are up-to-date too!

These are our team’s top reasons for why we love using Overflow. Not only has it sped up communication, but it’s also easy to learn. Links make sharing and communicating with our clients seamless. Comments are visible to everyone on the project, meaning no one is left out of the loop.

Have you used Overflow before? Let us know in the comments or tweet us @ir_designers!

PS: Overflow just announced a major update! — We’ll report back on how we’re using it. See their announcement here

Elipses end of article
Jenna Fucci
,
Senior Designer