Designing an efficient product requires a full understanding of users and their needs. There’s a lot that you can do with knowledge about the people you’re designing for. You can even predict users’ needs before they know what they want or need!
One example of predicting user needs is the process that happens when you order food from a restaurant. The cashier asks questions about condiments for your burger, whether you want a side of fries, and if you’d like a water or soda to drink. The cashier is anticipating your needs as a user and meeting those needs, possibly before you recognized those needs yourself.
As a UX designer, you can anticipate user needs when interacting with your product. A clear and simple way to outline this process is by creating a user flow. A user flow is the path taken by a typical user on an app or a website, so they can complete a task from start to finish.
UX designers often outline the user flow before they start to design because it can help to picture how users will move through the app or website. In other words, before you design screens of an app, you need to understand how users can effectively move through the app overall. You need to determine:
- What actions will users take in the app?
- What decisions will users make?
- What screens will users experience after taking action or making a decision?
Draw a user flow
UX designers often outline user flows with common shapes: circles, rectangles, diamonds, and lines with arrows. Each shape represents an interaction the user will have with the product you’re designing. Assigning a different shape to each interaction makes the user flow clear to anyone on the team involved in creating the product.
Action: The actions users take when moving through a product design are represented as circles. In other words, circles show steps that must be taken to complete a task from start to finish. For the user flow of a dog walker app, actions might include opening the app, clicking on a dog walker’s profile, and booking a dog walker.
Screen: The screens of a digital product that users will experience while completing tasks are represented as rectangles. For the user flow of a dog walker app, screens might include a homepage or a booking confirmation page.
Decision: Diamonds represent points in the user flow where users must ask a question and make a decision. The decision users make will either move them forward through the flow or back to an earlier part of the flow. For the user flow of a dog walker app, a decision could be choosing whether or not to book the dog walker whose profile is being reviewed.
User flow direction: Lines with arrows tie everything together and display the flow of information. Solid lines indicate forward direction through the user flow, and the dotted lines indicate backward direction or returning to a previous page.
Example of a user flow
To apply these concepts to a real product, check out an example user flow below, for the dog walker app that’s been mentioned throughout this certificate program.
The user flow starts with a user’s entry into the app and continues all the way through to their appointment confirmation with a dog walker. This user flow anticipates the user’s need to browse multiple dog walker profiles before choosing the right walker.
As a designer, you have to consider the entire journey that users take in order to get what they need from the product. As you create your own user flow, reference the problem statement you developed to ensure your designs will really address user needs.
Keep in mind that the user flow could change based on the needs of users and their circumstances. If your problem statement changes, the user flow will probably need to change too. For example, imagine you learn that users of the dog walker app want tips on hiring dog walkers before booking an appointment. The user flow would change by allowing an option to break away from this planned user flow to visit a new screen within the app, as shown below. This screen might branch off of the “read tips” action to provide extra information on booking a new walker. You don’t need to come up with a new user flow for every possible circumstance in the product, but you should ensure that the user flow you create focuses on the needs that the majority of users will face.
For your current project in this program, you’re designing an app from scratch and creating a completely new user flow. But in the real world, you might work on an existing product with an established user flow. For existing products, creating or updating the user flow can be complicated. With thorough user research, screens can be reorganized, expanded upon, and trimmed to better meet how users work through a product. Whether you’re working on a new or existing product, remember that users and their needs must be at the forefront of the product’s design.
Designing with knowledge of your user’s needs will make you a better designer and will keep users engaged in your product. Creating a user flow is a solid step. As a UX designer, one of your best tools is being able to outline the path that users will take to complete a task in your product. Now, it’s time to show what you know and create a user flow for your own app design. Good luck!