I 🧡 UX Diagrams – Create user flow diagrams in Confluence

By |2023-04-26T21:42:01+02:00October 13th, 2022|draw.io, learning, productivity|
Reading Time: 14 min

This blog is part of our I 🧡 draw.io series, which highlights our users’ stories about why they love draw.io. Follow us on social media where we are sharing more tips, tricks, and best practices from the draw.io community.

Helping designers visualize

draw.io’s versatile diagramming helps many software teams working in Confluence design a streamlined user experience. But, don’t take our word for it. Paul Baker, a dedicated draw.io user, commented, “I’ve used draw.io across Server and Cloud Confluence systems; it’s been instrumental for UI/UX designs and, really, any diagrams in general. Highly recommend.”

(Want to skip to trying the app for free? Get started with draw.io on the Atlassian Marketplace).

Building UX user flow diagrams in Confluence

UX/UI designers like Paul know the importance of UX in any application, and the ability to rapidly prototype an interface is vital in the early stages of development. From process flows to wireframing and mockups, draw.io has you covered.

One notably important UX diagram is the user flow, a specialized flowchart that highlight a user’s journey, and the creation of such a diagram can be broken down into stages:

  1. Identify target users and create persona profiles.
  2. Define the user’s objectives and create end goals.
  3. Transform goals into task flows.
  4. Create a user flow diagram.

We’ve used the example of a bike retailer below to show how to create an effective UX user flow diagram.

1. Identify the target user

Before the first line is drawn on a UX diagram, it’s critical that the target user has been identified. One common strategy at this stage is to develop customer personas, which are profiles that represent the kinds of users you expect to attract. Using a visual tool like draw.io can make this stage easier to comprehend quickly. For example, at a glance it’s clear in the example below that there are fewer “Professional” personas.

Diagram to identify a target user

2. Define the user’s objectives

Now you know your customer personas, but what are they trying to do? The UX team next works to determine users’ end goals and map the user’s flow and touchpoints. If you’ve used draw.io, you know it’s Confluence’s best tool for creating flowcharts.

Diagram to define users objectives

3. Transform goals into task flows

The personas have been identified, and we know what they are trying to do, so now we need to visualize the task flows they will use to solve their problems. These are typically also displayed as flowcharts. While you’re using draw.io to diagram the task flows, it’s the perfect time to use the draw.io brush tool to add or highlight ideas, and encourage your team to add comments as well.

Diagram to transform goals into task flows

4. Create the user flow diagram

Now it’s time to bring everything together in the user flow, which uses a flowchart to map out every route a customer could take on their journey towards their goals. This diagram will inform nearly every development decision that follows, so it is critical to get it right. In our example, we’re looking at the user flow through an advertising landing page.

Diagram to create a user flow diagram

UX diagrams have exploded in popularity in recent years as the business world has embraced the importance of the customer journey. It’s clear certain techniques in UX design can help make or break an app. Talented UX designers provide a meaningful and relevant experience to users and their efforts impact everything from the branding of the app right through to design and usability.

Has your team used draw.io to design an amazing UX or UI diagram? We would love to hear about it! Reach out to us on our social channels.

And, you can always visit the Atlassian Marketplace to find out more about draw.io.

You are currently viewing a placeholder content from Youtube. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information

draw.io’s continuing evolution

Every single feature in draw.io is carefully considered and thought out. It’s more than just software. It’s a tool designed to help real people work together in real-life scenarios. Our job is to make your job easier; that’s draw.io.

Do you like to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on Social media and learn how others use draw.io and hopefully pick up some tips and tricks.

You don’t use draw.io yet? Convince yourself and start your free 30-day evaluation today. Or book a free no-obligation demo with our customer success team to learn more about how draw.io can make life easier and more productive for you and everyone in (and outside of) your company!

Happy diagramming!

Share This Story, Choose Your Platform!

About the Author:

Bastian has an extensive Atlassian background and has worked for years in Atlassian license sales. Since 2019 he has been Product Marketing Manager of the draw.io Diagrams for Confluence / Jira apps. He is passionate about finding use cases to add value to the broad user base of draw.io.