Take Your Adobe XD Prototypes One Step Further with Overflow’s User Flow Diagrams

Tell a meaningful story by presenting your design work in new ways.

If you’ve ever struggled with creating user flows in the past, we have good news for you! Overflow, available as a plugin for Adobe XD, lets you build user flow diagrams from your XD prototypes to enhance your product creation workflow.

In this article, we’re taking a look at how user flow diagrams can complement your prototypes while making the whole process more streamlined and intuitive.

How user flow diagrams can help you build better products

When we use prototypes to collect the opinions of our team, users, and stakeholders, they only see one screen at a time, and this makes it pretty much like looking through a keyhole. Prototypes allow us to get feedback on the usability of individual screens, and how the colors, fonts, and other design elements are perceived. This of course is important as it allows us to focus on the details and make sure our app’s visuals and user interaction is spot-on. But how can we present and get feedback on the bigger picture?

A userflow diagram for SurfsApp’s Adobe XD Prototype created using Overflow.

Our job as designers isn’t just to create appealing user interfaces. We also have to make sure that users have an overall positive experience with our product! By creating user flow diagrams, we can look at our project from a bird’s eye view and take in its actual size and complexity. We can create a variety of flows and map them out, starting from different entry points. Additionally, user flows let us play through our user stories based on different user personas. As a result, we ensure that our app provides all necessary features and functionalities in a clean and straightforward manner.

“One of the most powerful ways for designers to tell a story is to present their designs in a way that connects the dots and describes the entire user journey.” — Natalie Masrujeh, Product Owner @Overflow

The past challenges when creating user flows

Have you created user flows in the past? How was your experience?

Based on the company’s insights and research, Overflow has found that teams have relied on traditional flowcharting and illustration tools in the past due to the lack of specialized software. As a result, the emerging processes have often been too time-consuming and challenging.

Facing these problems themselves, Overflow decided to develop a tool to bring back user flows into the product development workflow. Overflow is designed with a focus on creating, syncing, and presenting designs, making the whole process more accessible for design teams.

Introducing Overflow: A solution to a known industry-wide problem

Overflow says the key to reviving user flows was to streamline their creation by working closely with prototyping and design tools, as well as enhancing sharing and presentation capabilities. As a result, the team has prioritized integrating seamlessly with Adobe XD.

Using the Overflow plugin for Adobe XD, you can synchronize your artboards with Overflow. You can also import prototyping links created in XD to save time, and your imported artboards will stay in the same layout as you designed them in XD. All that’s left for you to do is to remove unnecessary connections, add any new connectors, and customize their style with ease.

Of course, you can also rearrange screens as you see fit. If you need to change your design in Adobe XD, such as the location of a button, sync the adapted screens with Overflow, and all your changes will get transported over. Overflow also moves the connector of the button you relocated, so you don’t have to create connections from scratch.

“We managed to reduce the creation time down to minutes. At an average speed of 3 artboards per minute, designers can now create a beautiful user flow of a design concept with 60 artboards in under 20 minutes.” — Alexis Piperides, CEO

But what if you want to present user flows to your team, your customers, and your stakeholders?

Overflow lets you zoom in and out to see as much of the flow as needed. You can use the interactive flow presentation mode to navigate and interact with the flow diagram, and take in the bigger picture and understand how screens are connected. You can also get feedback that focuses on the user’s journey, instead of being distracted by unnecessary details. As a result, you can narrate your product’s design story in an understandable and confident way.

Adobe XD prototypes + Overflow user flows

The future of design critique relies on tools that help us optimize the collaboration process, especially when working with remote teams. We need the right tools to share our ideas and help each other create excellent products by providing the required feedback. Creating prototypes and user flows is an essential step in building valuable products that tell great stories, and bringing the two together to see both your project’s individual details and the holistic picture is very powerful.

Head over to their website to try Overflow for free. Also, you can let the Overflow team know what you think about this new plugin by joining the Overflow Slack community.