We cannot imagine life today without SaaS, digital products, websites and applications, and with that comes high expectations from users about how they perform. To perform as the user expects, digital applications require a huge amount of upfront work during the design process. That’s where a user flow comes in – a practical and efficient way to ensure your technology always provides a great user experience.
In this blog, we’ll be covering the benefits and reasons why we here at Strafe, believe that creating a user flow during the SaaS design process is essential. But let’s get back to basics, what even is a user flow?
We’ve talked about wireframes and design systems in our previous posts, but a user flow comes before all of that…
What is a user flow?
A user flow is a diagram to explain how a user would click and flow around a website or application. This includes from page to page and interactions that trigger emails or processes, such as user sign-in. The user flow maps out every single journey a user could take, depending on any possible action.
Why do we create a user flow?
We create user flows to map out all the ways a user could potentially interact with a SaaS product. This helps us find out if the journey through the software, at any given moment, makes sense to the user and if they end up where they want to be.
Where does a user flow fit into the SaaS design process?
Before we start to work on any wireframes or SaaS designs, we start with the user flow. Typically we’ll design a master user flow first and then create individual components off the back of that.
There are three key things to consider when starting work on your user flow:
- Do you know your product? What is the SaaS product for? What benefits does the user get from the software?
- Who is your audience? Some SaaS products offer different functionalities depending on who is using it.
- What is the objective of the flow? This can vary depending on who the user is and where they are in their experience with the software. For example, the onboarding process vs. the process to add new team members to an account.
Why would I create a user flow over a task flow or wire flow diagram?
While there are three types of flow diagrams UX designers use to map their user journey. We prefer a full user flow, and here’s why.
Task flows
A task flow is a simple start-to-completion journey diagram for specific tasks – best used when all your users take the same steps to complete a task.
As you can imagine there aren’t too many situations where this type of diagram will give you a full sense of user experience in most modern SaaS products.
Wire flows
Using app screenshots to map out your user’s flow is a slightly more detailed approach and can help convey a design idea to clients and investors. Again it’s pretty simple because it doesn’t consider branching pathways, so just like a task flow, it’s often used for software where users take the same steps to complete a task.
It can, however, be a great way to ideate a new feature before you map it into a complete user flow.
User flows
A complete user flow accounts for each task a user might complete in your app and how that sits alongside choices in other tasks. It also accounts for how users navigate the different routes to each task.
For example, if Dan opens his Slack app on a Monday morning, he might want to check his unread conversations first. Alternatively, before he does that, he might want to check his saved items to remind himself what happened last week and what he needs to do next. Knowing this, Slack has made both choices in the first task effortless to make on sign-in, and they have come to this by designing a fully integrated user flow.
Six reasons why a user flow really is essential
1. A communication tool
A user flow is a much easier, visual way to present the initial product design to a client. We show our user flows to clients on calls and talk them through the journey their customers will take. By using a digital user flow like this, we can make live amends and edits during meetings and finalise solutions that make sense.
2. Easier to figure out what’s working or not
By walking step by step through the user journey it’s much easier to identify what is working and what is not. If a user forgets their password, is the next step to ask them to reset it? Nuances like this can be much more difficult to find and address if the processes aren’t clear in the initial design stages.
3. A great starting point for future development
By producing a detailed user flow at the start of a SaaS project, you make your life easier further down the line. When new developments or features are required, the master user flow can be reviewed and new user journeys can be added in where they make logical sense, rather than squeezing in updates wherever you can.
4. Easy to check usability and pick it apart
Is the user following a journey that makes sense to them? A live user flow that can be reviewed and analysed is such a useful starting point. Test with clients, target personas and 3rd party testing teams and find out where you can make improvements. Pick it apart and then easily put it back together in an order that immediately adds value to the user.
5. Improves efficiency of the project
Given the user flow is the starting point of the design process, getting this part right is key – especially in a large, detailed and complex SaaS project. In our user flows we identify which sections are required in every part of the journey so we can ensure that all interactions align and flow smoothly. For example on the welcome screen of an app, which buttons and menus will be available? Noting down, the main menu, logging in and signing up helps you then ensure the journey a user could take from each is clear.
With our experience on larger technology projects, at Strafe we always ensure the user can DO what they logged on to the software, to do. From inviting new team members to a SaaS plan, resetting their password or going through the onboarding process, every step of these processes needs to be planned out in detail.
When you have such detail written down, in an easy-to-understand format, the rest of the design process is much easier. Going back to add in a full ‘forgotten password’ flow, once the software has already been designed and built is a lot harder!
6. You can personalise it
Depending on the audience that will use that particular part of the product, you can personalise the user journey they take – in particular when it comes to onboarding the user onto the product.
As designers, we think of onboarding in two ways, frictionless and friction-based.
Frictionless onboarding makes it really easy for a user to sign up, log in and get started with the product straight away – removing barriers to entry. For example, creating an account with just an email and password. Unfortunately, this means a user might not understand the full value of the product and may lose interest more quickly.
Friction-based onboarding takes the user on a more detailed flow, asking questions about what they want to get out of the product, their role at work (if relevant) and then showing the user how to get started. Whilst some users may find this too long of a process and drop-off, many will enjoy learning how to get the most out of the software and understand its value early on.
For instance, take ‘Notion’, a project management software that enables users to create useful boards, notes and plans within their teams. During onboarding, Notion asks users what they will use the software for and their role, which allows them to take users through a specific flow. A marketer for example might then be shown how to create content calendars, mood boards, asset lists and how they can integrate team members for collaborative working.
To follow up, Notion sends a series of onboarding emails showing the new user how to use the product for maximum efficiency and value. Each of these parts of the user journey will have been mapped out to ensure each possible persona understands the value of the software from the moment they start using it and therefore are more likely to stay as a long-term customer.
How to design a user flow for a SaaS product
Here’s a general process you can follow to create a user flow for your Saas design:
- Define the user persona – Define the persona or target audience for your SaaS product. Identify their needs, goals, and pain points, and use this information to inform your understanding of their key tasks.
- Identify the key user tasks – Once you clearly understand your user persona, identify the key tasks they will need to complete on your SaaS application. For example, if you’re designing a project management tool, key user tasks might include creating a new project, adding team members, and assigning tasks.
- Map out the user flow diagram – Having identified the key tasks, you can map out the user flow or journey. Start your user flow diagram with the user’s entry point into the application and map out each step they must take to complete their task.
- Use wireframes to create a visual representation – With your user flow mapped out, create wireframes or low-fidelity mockups of each screen or interface the user will interact with. Use these wireframes to refine the user flow and ensure it’s intuitive and easy to follow.
- Share your design with your client – Here at Strafe, we keep our clients involved in every step of the process, but wireframing is the first real opportunity for a client to see a minimal viable product (an MVP).
- Test and iterate – Once you have a rough user flow and wireframe, test your design with real users to see if it’s intuitive and easy to use. Use feedback to refine and iterate on the design until you have a final version that meets the needs of your users.
Remember your UX designer (hello!) can do all of this for you, so as long as you understand the process you don’t need to struggle with it.
Our 5 favourite tools for user flow design
There are several tools on the market for user flow design. Here are some of the best (in our opinion):
- Figma – Figma is a popular cloud-based design tool for collaborative design and prototyping. It offers a variety of features, including user flow diagrams, wireframing, and high-fidelity prototyping.
- Adobe XD – Adobe XD is a UX/UI design tool for rapid prototyping and collaboration.
- Lucidchart – Lucidchart is a cloud-based diagramming tool that offers user flow diagrams, wireframing, and collaboration features.
- Sketch – Sketch is a vector-based design tool that offers a range of plugins and integrations to help with user flow design.
- Axure RP – Axure RP is a prototyping tool that offers advanced functionality for user flow design, including conditional logic and dynamic content.
In Conclusion: Why your user flow an essential part of the UX design process
The bottom line is, user flows are an essential part of the UX design process. They bring clarity, certainty and efficiency to the user experience. From simple login pages to complex SaaS tools, a user flow will ensure your customers get the most value from your software from the moment they open it. Without a detailed flow, you’re likely to end up with a clunky experience that users may eventually give up on later down the line.
If you are struggling to understand your user and keep them signed in, then drop your project into our planner below.
