Illustration by Matt Rae

High-fidelity prototyping is a great way to do user testing and getting business stakeholder approval without having to build out your app or website in code. But before we can “wow” our clients and get a thumbs up from our boss in Slack, we have to get our strategy right.

Designing only in high-fidelity is way too time consuming, definitely not the best practice for an agile workflow, and it’s also a recipe that gets us too attached to our designs. 

It doesn’t matter how pretty or cool an interface looks if it has poor usability and users get lost or can’t find what they need. The business goals will suffer greatly and the whole experience will fall short of what it was designed to achieve.

When we take the extra time in our design process to properly plan out experiences, validate strategies, and make the necessary adjustments with our team, meaningful experiences can be created that will not only delight users but also result in a positive ROI for our businesses.

What is a UX flowchart?

Before jumping into creating a UX flowchart in Adobe XD, we need to first understand what a UX flowchart is, why it’s useful, and where it fits in the user experience process.

UX flowcharts, also known as ”user flows,” are living documents that show all the routes and possible pathways through an entire experience (e.g., a website or application). This chart should be updated continuously throughout the design process, and adapted when changes to the designs are made. This is where creating your flowchart in Adobe XD can be very valuable.

UX flowcharts can also come in various levels of fidelity depending on where you are in your design process. They should depict the movement between screens or sections of content within a user interface, as well as include all possible branches of user decision logic that your users may take while navigating through your experience. As UX flowcharts progress, it is also common to include system logic and documentation about the interactions.

Why are UX flowcharts important?

UX flowcharts are inherently collaborative design tools in that they:

  1. Help UX designers understand and analyze the sequence of the screens that they need to create based on specific user task flows, context, and intent.
  2. Assist in content planning and strategy with members from other cross-functional departments.
  3. Aid in interface interaction and backend functionality discussions as well as documentation of the design hand-off process with developers.

The closer the flow of an experience is aligned to the mental model and expectations of the user base, the more intuitive and usable that experience will become. UX flowcharts help by reducing friction points and confusion within your user experience; these also become invaluable business tools.

A benefit of sharing these living documents with cross-functional team members and stakeholders is that UX flowcharts also encourage a more collaborative, aligned, and agile environment. Problems within the UI design or task flows discovered from user testing can quickly be addressed and fixed by involving all the necessary people.


 

Now that we know the value of UX flowcharts, let’s dive into where we can use them and the 5-step process of creating them using Adobe XD.

5 Steps for creating a UX flowchart

Step 1 in creating UX flowcharts: Knowing your users and their goals 

The first step in creating a UX flowchart from scratch is to start by defining who your target audience is. Based on user research data, you can create archetypes that represent patterns of behaviors and mental models of specific types of user groups. You can then assemble an artifact called personas, that summarize themes, mindsets, and insights synthesized for each type of main user that reflect the observed pain points, goals, and jobs that they “hire” your experiences to complete.

In this step, define the scenario and use case for your potential user with a specific goal. We should define who our main type of user is, what needs and frustrations they have, and what behavior patterns you can observe that give you insights into their expectations.

Step 2 in creating UX flowcharts:  Turn user goals into task flows 

In this step, you can begin by asking yourself:

“Can I break down those bigger user goals into a sequence of tasks?”

Being able to review data from user needs research and competitive analysis is also extremely vital to obtaining a thorough task analysis. You want to begin mapping the exact steps of the “current state” of the journey users take to achieve their desired outcome. You will need these steps to know the process that users will expect and also to gain insights on their mental models – which is their thought process about how they believe your experience should work. 

After reviewing the data, you can begin to write down all the main steps that a user must take to complete their main high-level goal from beginning to end. While post-its or note cards are useful for this exercise, we can also do this directly in Adobe XD using the Whiteboard plugin and the “post-its” elements found within the plugin. The goal is to use simple elements that you can move around as you think of this flow.

Using post-its elements in a flowchart with the Whiteboard plugin for Adobe XD to visualize a task flow.

So if a user has the goal of creating a new calendar invite, create a simple flow chart that outlines all the tasks required to successfully send an invite.

Task Flows are similar to User Flows in many ways but one key difference is that a Task Flow does not branch out. It is a single flow followed similarly by all users. 

A flowchart illustrating the task flow for creating a new calendar invite in a calendar web app.

Step 3 in creating UX flowcharts: The flowchart outline

Once you have an accurate overview of the whole process and all the steps are in the correct order you can start to create your UX flowchart outline. Keep in mind that this UX flowchart outline is your best hypothesis at the sequence of content and the tasks with which our users will most likely expect to go through to complete their goal for a specific use case based on our research and data from observations.

If you start with the mindset that UX flowcharts are meant to be tested and are adaptable from the beginning, you can embrace the agile process and can open your eyes to look for friction points and potential areas that confuse our customers.

To create a UX flowchart outline – and in reference to Ryan’s article at Basecamp about designing shorthand flows – let’s go back to the drawing board.

Go to each step from the task analysis and underneath each step, and create a new post-it with a description of what the user sees for that step. Now draw a line under that word or phrase and underneath it write the action of what the user does in response to viewing that content. 



You can now plan out, in the correct sequence of events, all the content and click or tap behaviors that a specific user takes through your experience for one specific task or intent. This UX flowchart outline will allow you to start to plan the content that users will see, the desired behaviors, and also all actions the user can take in order to complete their tasks within that specific user interface.

I typically recommend starting by creating a UX flowchart outline of the desired route or “happy path” for users to accomplish their goal throughout the experience without any error states or problems.

Once you have a solid UX flowchart of your “happy path” for your main audience to complete a specific goal or use case, you can begin to add “alternative paths” where users encounter error states, empty states, or what secondary users (even edge case users) may go through within your screens/pages. 

A UX flowchart for creating a new event in a calendar app includes branches for alternative states like when an error occurs.

Users with different intents may interact with your content differently and have varying  needs. You should also be mindful of the context of the given situation at hand so that you will know where the user is, what device they are on, what front door they are using to enter your experience, what needs they currently have, and so forth. 

The “alternative paths” within your UX flowcharts are extremely valuable because they allow us to consider different users and plan experiences that accomodate different intent. How well you plan for these “not-so-happy paths” can lead to those intuitive experiences that reduce time spent in error, build customer confidence, increase loyalty and engagement, and ultimately drive more referrals and revenue for our businesses. 

After quickly mapping out your UX flowchart, you should have a pretty solid grasp of the following:

  • The sequence of content vital to helping your users accomplish their goals based on a specific intent or use case.
  • What content is needed by your users to take those specific actions.
  • How that content affects your users’ behaviors.
  • All the possible routes or paths that your users can take through the screens or pages, even if they are complex or encounter errors.       

The whole idea of creating the UX flowchart outline is to visualize the order of your content and begin to plan out experiences as quickly as possible. You’ve used your post-it notes to really get a good solid grasp of your “happy path” as well as the potential alternative flows.

When you map out your UX flowchart with simple elements such as paper, white boards, or using the Whiteboard plugin in Adobe XD, you can feel free to make mistakes and explore longer. These simple elements allow us to quickly and visually work out the different paths in our flows with less fear of failure. Don’t worry about this process looking pretty. We can clean up our design deliverables later in Adobe XD for stakeholder presentations as you advance to the next steps of crafting our UX flowcharts. 

Step 4 in creating UX flowcharts: Designing the flowchart with decision paths and system logic

Now that your flowchart has gone through many cycles of iteration, you can now break away from your post-its (virtual or physical) and begin to advance your flowchart in this step to illustrate the User Flow more clearly. Thankfully, there are many free flowchart templates available for Adobe XD to help you accomplish this in no time. One of these great templates can be found using the Wireframer plugin.

In the previous steps you have already mapped out most of your views, paths, and actions. In this step, in addition to designing our flowchart, we can add decision paths and system logic to help give more understanding in our flowchart.

Path, action, logic and view symbols that can be used in flowcharts from the Wireframer plugin for Adobe XD.

Using a template, you can start to use components similar to these, to represent each element in your flowchart.

Decision paths and system logic helps convey when a user might branch from a “happy path” and also give more information into what is functionally happening within an interface when a path is chosen, which can be very helpful in communicating the entire vision to your team.

Using symbols and other components to indicate decision paths and system logic in a UX flowchart.

Notice in this step, you will use a component to represent each screen but will still not focus on adding any UI to this flowchart. Again, the purpose of waiting to add this UI at the end is it allows you to be more flexible and adaptable to changes in the flow as you visualize each option. The less you invest in the visuals through each stage, the faster you can find and solve friction points. You can also break out a user’s actions from each view and place them in a tag that sits along the paths which helps clearly distinguish the views and the actions. 

When adding new decision paths, you may find the need to add more views in the flow to successfully go through a new path. At the end of this step, you can identify all the necessary views and start to think about the UI in the final step as you start to lay out your content in these views.

Step 5 in creating UX flowcharts: Creating a wire flow

In this final step, you are now ready to take the first step in thinking about the layout of your content. The flowchart you created up-to-now will serve as a checklist showing each view you can start to design for and the paths you need to add to the interface. 

If you’re not already working with an established design system or UI kit, I recommend beginning the design of these views at a very low-fidelity stage. The content you design in this flowchart can still change based on stakeholder feedback and keeping the design low fidelity might also save you from receiving unnecessary design feedback in this step.

After designing the content in these views, you can start to connect paths directly to corresponding buttons, form fields, or other UI elements to bring the vision more to life and finalize your UX flowchart to be used in presentations. 

Because this flowchart is created in Adobe XD, you can also very easily add prototyping interactions to this flow to start to get a feel for the experience which will also help you discover more points of friction to solve. 

One of the benefits of designing a UX flowchart is to aid in better communication. Your team can envision an entire flow from beginning to end instead of seeing only one view at a time. This also helps your team get a feel of the scope of an experience to estimate the effort it will take to complete this experience.

Conclusion

Creating intuitive experiences not only requires you to be “in tune” with your users’ expectations and provide them with the content that they need to have the confidence to stay engaged with our experiences, but it also requires us to provide the correct order of information in a perfectly choreographed sequence of interactions. UX flowcharts help us create and also make improvements as we observe our users behavior inside our experiences. 

By designing this UX flowchart as a living document in Adobe XD, we take advantage of the many collaborative and experience design features XD has to offer as our experience grows through each phase. 

Because Adobe XD includes real-time collaboration, we can invite all team members to this flowchart to work together through each step. When our flowchart is finally ready to begin designing our experience, we can design in the same document adding interactions and sharing this experience with key stakeholders at any step in the process.