High-fidelity prototypes are great tools for user testing and getting business stakeholder approval without having to build out your app or website in code. But before you can “wow” your clients and get a thumbs up from your boss in Slack, you must get your strategy right—and that starts with how you approach the design process.
Designing only in high-fidelity is way too time-consuming, not the best practice for an agile workflow, and it also gets you way too attached to your designs. Unfortunately, it does not matter how cool an interface looks if it has poor usability that causes your users to get lost. If your design isn’t usable, your business goals will suffer greatly and your whole experience will fall short of what it was designed to achieve.
When you take the extra time in your design process to properly plan out your experiences, validate your strategy, and make the necessary adjustments with your team, you can create meaningful experiences that leverage the unity principle of design, delight your users, and result in a positive return on investment (ROI) for your business.
But before we jump into how to create and build user experience (UX) website flowcharts, we need to first explain what they actually are, why you need to use them, and where they typically fit into the UX process.
What is a UX website flowchart?
User experience (UX) website flowchart example.
UX website flowcharts—also known as ”user flows”—are living documents that map out all the routes and possible pathways a user can take throughout their experience with your website or application. What “living” refers to, in this case, is that these charts should be updated continuously throughout the design process and adapted when changes to the designs are made. They should also reflect the latest data from user testing.
UX flowcharts can also come in various levels of fidelity depending on where you are in your design thinking process. They should depict the movement between screens or sections of content within a user interface (UI), as well as include all possible branches of user decision logic that your users may take while navigating through your experience. As your UX flowchart progresses, it is also common to include system logic and interaction documentation.
When to use a UX website flowchart
It is never too early or too late to develop a UX website flowchart—and by doing so, you will be able to map out your website architecture in a way that all members of your team can easily read and understand. This flowchart can help identify UI design and task flow issues earlier in the design process or during user testing, which you can later leverage to help prioritize work for an upcoming sprint. Another benefit of creating these living documents is how well they encourage collaboration and alignment with cross-functional team members and stakeholders.
UX flowcharts are inherently collaborative design tools by nature, as they:
- 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.
- Assist in content planning, strategy, and delegation of work with members from other cross-functional departments.
- Aid in interface interaction and backend functionality discussions, as well as documentation of the design hand-off process with developers.
Your entire UX will become more intuitive and easier to use the more aligned your UX flowcharts are with your user’s mental models and expectations. Essentially, by reducing friction points and confusion within your UX, these also become invaluable business tools. Take a look at the image below for a simplified website flowchart example.
Simplified website flowchart example. Image credit Dan Silveira.How do I design a UX website flowchart?
Now that you know the value of UX website flowcharts, let’s dive into the three-step process to creating them.
Step 1: Know your users and their goals
Adobe XD user persona profiles. Image credit Kiran Khan.The first step in creating a UX website flowchart from scratch is to start by defining who your target audience is. Based on user data, you can create archetypes that represent patterns of behaviors and mental models of specific types of user groups. You can then assemble user personas that summarize themes, mindsets, and insights for each type of main user. These personas should reflect any observed pain points, goals, and jobs that they “hire” our 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: Turn user goals into task flows
In step two, it’s important to start by asking yourself:
Can I break down those bigger user goals into a sequence of tasks?
Being able to review data from user research and market competitors is also extremely vital to obtaining a thorough task analysis. You want to begin mapping the exact steps of the “current state” of what tasks your users must make to achieve their desired outcome. You will need these steps to know the process that your users will expect and to gain insights on their mental models—which is their thought process about how they believe your experience should work.
After reviewing the data and just before jumping into Adobe XD, you should first write down all the main steps that a user must take to complete their main, high-level goal from beginning to the end. Post-its or note cards are great because you can easily move them around on your desk. However, whiteboards or even large sheets of paper can work, as well.
Step 3: Create your UX website 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 website flowchart outline. Keep in mind that this outline is your best hypothesis at the sequence of tasks your users are expected to go through go based on your research and data from observations. Additionally, remember that these flowcharts are meant to be tested and are adaptable, allowing you to look for pain points and potential areas that confuse your customers.
Creating “happy paths”
It is generally easier to begin by creating a UX flowchart outline of the desired route or “happy path” for your users to accomplish their goal without any error states or problems. But once you have a solid outline 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 or pages.
Design tip: Keep in mind that users with different intents may interact with your content differently and have different needs.
These “alternative paths” within your flowcharts are extremely valuable, as they allow you to consider different users and plan experiences that accommodate different intents. How well you plan for these “not-so-happy paths” can lead to 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.
Sketching your outline
Post-it notes used in the user experience (UX) flowchart sketching process.
Much like any good design process, it’s always best to start with a sketch. Sketching is a great way to quickly get your ideas on paper and to think about how to compose and lay out your designs, but they are also an amazing way to quickly map out your flowchart. To start, grab a stack of sticky notes and use each one to articulate a step, task, or action. Sticky notes are great because you can easily move them around, remove them if necessary, or even add new ones to efficiently map out the user experience without worrying about how it looks from a visual design perspective.
After quickly sketching your UX website flowchart outline, you should have a 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
- Any gaps in the user flow that do not address a significant user need or pain-point
The whole idea of creating a 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 any potential alternative flows. Now it’s time to design your actual UX flowchart.
How do I design a UX website flowchart?
To design your UX website flowchart, you will want to take all that wonderful user research—along with your flowchart outline—and build it out using one of several design tools made specifically for creating flowcharts and diagrams. There are a few options out there, so make sure you choose one that will be the easiest to implement with your website design software and is also accessible by all of your cross-functional team members.
Once you have selected the design tool you are going to use to create your UX flowchart, begin by taking all those steps and tasks you documented in your outline and start to connect them. This process may feel similar to when you are using a wireframe tool to build out the wireframes for your prototype, and that is good because these user flows will help guide that process, as well.
You will want to make sure that you create an easy-to-understand legend for the shapes and colors you use so that anyone on your team can quickly pick up the diagram and understand it. For example, you might use squares to represent each screen the user will access throughout the flow, whereas you might use diamonds to represent when a user must make a decision. No matter how you decide to design your flowchart, make sure you test it out with different team members to ensure it is as accessible as possible by others.
UX flowchart best practices to keep in mind
As you continue to create more and more UX website flowcharts, you will surely develop your own best practices that work for your team. However, here are some that you can add to your design board of design inspirations and help you get started:
- Conduct user research. By investing more time into user research before creating your UX flowchart outline, you will be able to create stronger, more accurate flowcharts.
- Collaborate. The best UX flowcharts are ones that were created with the input of your entire cross-functional team.
- Pick a tool that works for your team. There are quite a few tools you can use to create your UX flowcharts, so be sure to review them all and see which one is the best for you and your team.
- Test, test, test. Make sure to test your UX flowcharts with your users and team members to identify any gaps or errors quickly.
Create your own UX website flowchart
UX flowcharts are adaptable, living documents that map out all the different user flows that exist within the experience you have created with your website or application. By creating a UX flowchart, you will not only be able to better understand the steps, tasks, and goals of your users as they interact with your product, but you will also encourage collaboration and alignment with cross-functional team members and stakeholders.