Incorporating user flows into the design workflow
We’ve all been there. You’re sitting in client kick-off meeting,trying to unpack everything we promised to deliver. We’re dissecting the business requirements, the user stories, the client needs and the user needs. There’s so much we want to deliver, but how exactly do we plan on bringing the user through our solution and how does it all fit together?
Dissecting and disseminating information is a critical skill as a user experience designer. It’s all too easy to get lost in every technical detail encompassing any end-to-end software solution. My favorite way of decomposing complex projects is to start at the ground level.
Breakdown critical information and take some time to create a mental model in the quickest way possible. Start planning out how we envision things will happen and what users might encounter along the way. This brain dump process could take many forms including:
- Sketches
- Wireframes
- User flow diagrams
Introduction - What are user flows?
In short, user flows are a series of steps a user takes to achieve a meaningful goal. They are a critical piece of the problem solving. You’re likely already documenting these flows, either in your head, in your notebook or in some form on your computer. It is our job to understand and own these flows to communicate to the team, clearly and effectively.
The main goal of user flows include:
- What is the user trying to do or achieve achieve?
- What routes are critical in this experience and how do they get from point A to point B?
- How can eliminate fiction on the user’s journey?
- How can we empower users to do what they need?
Benefits of using user flows
User flows accomplish a few things. They create a consensus amongst developers and designers about the desired user flowers as they navigate through an experience. These flows don’t require a linear path - users can branch out of the expected journey, allowing us to better understand possible gaps in our proposed solutions and how we plan to solve for gaps, eliminate potential pain points and reduce friction before things move into the development cycle - a costly mistake.
How can I create user flows?
The quickest way to put together user flows is with pen and paper or a whiteboard, although this does have limitations.
I prefer to use tools such as https://whimsical.co or https://www.lucidchart.com
Both of these options allow you to quickly iterate on user flows (similar to our pen and paper) but also apply updates and share amongst the team. Contributors are also able to leave comments exactly where they would like to see changes or ask questions. This can quickly speed up the design process, gathering consensus across teams.
Why user flows are critical to the design process and how they can fit into your workflow
There is no right and wrong to communicate. As the saying goes, it’s better to do something imperfectly than to do nothing perfectly. User flows are all about communication and documentation. We are empathizing with the end-user and understanding their journey to allow us to better prescribe solutions. While our user flows don’t map to their painpoints / feelings like journey maps, that can ultimately help us identify areas for improvement.
Know what you’re thinking - Different strokes for different folks. I don’t have time to add another tool to the mix or to waste valuable billable time or creating a map that will end up lost on my desktop, never to be seen or used again. Use whatever makes your comfortable that fits your current workflow. Sketch and Figma are excellent tools you may already be comfortable with, as well as the Adobe Suite. If you aren’t a designer and want something easier, try the aforementioned LucidChart or Whimsical. These latter tools allow you to map user flows, sitemaps and even wireframe without paying into a steep monthly subscription (Looking at you Adobe).
Bonus
Expand your user flows into wireflows to power up your user flow communication. Wireflows are similar to wireflows, but fill in the communication gaps where user flows fall short.
Conclusion
Wireflows incorporate useful documentation when describing interaction between screens and how users navigate through the wireframe designs. As they see, a picture is worth a thousand words so stop posting page long email threads and get visual.