From landing page to main stage: Mapping user flows with draw.io and AI

It’s all about the user

Building a user flow isn’t just about adding shapes and connectors; it’s about putting yourself in your user’s shoes. It’s easy to make assumptions about how a process works, but those blind spots can lead to a frustrating experience for the people actually using your site.

The best way to build? Get it straight from the horse’s mouth. When you listen to what users experience, you can map out a journey that works. In this post, we’re going to build out a user flow step by step using AI, with draw.io for Confluence and Jira.

Why use draw.io for your user flow diagrams?

draw.io is packed with nifty features to get your user flows exactly how you want them. Your diagrams are natively embedded on your Confluence page or Jira ticket, so colleagues in other teams can quickly consult the user flow. For example, designers can refer to the diagram while building the UI, and devs can check the logic while working on the backend.

Other advantages include:

• Generate diagrams using AI: Our Generate tool (Sparkle button ) is ideal for laying the groundwork for your diagram in seconds.
• Multipage diagrams: Keep your diagrams concise by breaking down complex flows into main and subprocesses.
• Custom links: Make your diagram interactive by linking shapes and text to external webpages, internal Confluence headers, and even other pages of a multipage diagram.
• Custom images: Drop mobile mockups or festival icons onto your canvas to give your team a better visual of the user experience.

Step 1: Know your goal and your audience

Before you open the draw.io editor, ask yourself: What is my user trying to achieve?

Keep your audience front and center. Use the data you already have, like customer feedback or CRM insights, to identify the happy path, as well as potential blockers.

For Flowchella, our goal is simple: The user wants that ticket in their inbox. But our audience isn’t just local – we have people flying in from all over the world. If we’re targeting fans in different countries, a language barrier can become a major roadblock.

We can remove friction by building dedicated landing pages in our fans’ native languages. When you account for things like localization in your user flow, you’re not just capturing a process; you’re ensuring a smoother checkout and more ticket sales.

Step 2: Build your user flow

There are two ways to achieve this. One is to build your user flow from scratch, dragging and dropping shapes from the left side menu.

However, you can save yourself a ton of time with our AI Generate tool (Sparkle button). To do so,

1. Locate the Sparkle button in the top menu.

2. Type in your prompt.

3. Hover over the generated diagram to preview it.

4. Click the Plus (+) icon to add the diagram to the canvas. Alternatively, hit the Regenerate icon to generate a new diagram using the same prompt.

For our Flowchella flow, we used this prompt:

User flow diagram. 1. User enters website 2. Selects tickets 3. Decision split camping or day ticket? 4. Add selection to cart 5. Review order 6. Input card details 7. Decision split: Transaction successful? If Yes Transaction complete If No Payment declined – loop back to Review order

For prompt writing best practice, see How to write better queries for smart generated diagrams

Once the diagram is on the canvas, you can customize fonts, colors, and images to make it your own.

Step 3: Adding the “VIP” touches

Once the fundamentals are down, it’s time to add the professional finish:

Add multiple pages to your diagram

Click the Plus (+) at the bottom of the draw.io editor to add a new tab. This is great for showing different “what-if” scenarios as well as subprocesses, without cluttering your main flow.

For more information, see How to build multipage diagrams in draw.io

Add custom links to shapes or text

You can add links to either shapes or text. Add links to Jira tickets, Confluence pages, or other web sources containing relevant information.

• To add a custom link to a shape: Select the shape, right-click, and choose Edit Link.

• To add a custom link to text: Highlight the text, then in the Text tab in the right side menu, click the link icon under Insert, and paste in the URL.

In our user flow diagram, shapes containing links to other pages become buttons that allow viewers to navigate between the main and subprocess. These links work in both the diagram edit mode and Confluence page preview.

For more information, see Use custom properties including tooltips, custom links, and placeholders in draw.io

Team alignment for a smooth performance

And there you have it! A clean, professional user flow that lives exactly where your team needs it. Whether you’re planning a world-class festival or a simple app update, keeping your team aligned in Confluence and Jira is the best way to ensure a smooth performance.

The best part? Using draw.io means you have a full toolkit at your disposal: AI-powered generation, multipage diagramming, and seamless sharing across the Atlassian ecosystem.

Want 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, as well as pick up some helpful tips and tricks.