9

Documenting user flows with our clients

 3 years ago
source link: https://shift.infinite.red/documenting-user-flows-with-our-clients-e7b15f092928
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Documenting user flows with our clients

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

Hand holding iphone with app wireframe on screen

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.

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:

Screenshot showing design artboards linked together in a flow

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!

Screenshot showing the different pages within the project

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.

Screenshot showing a button with two paths going to different screens

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! 🎉

Screenshot showing the plugin inside Sketch document to update Overflow

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. Read their announcement here

Jenna is a Senior Designer at Infinite Red who jumps into documentation at the start of a project (and secretly loves it.) She’s a proponent of efficiency in design and enjoys collaborating across departments to achieve a holistic and unified product.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK