Product Management Roundtable: Best Practices Recommended by Product Experts for Creating Powerful User Flows
Wonderment Apps is proud to present the Product Management Roundtable, our insight series into product development processes. As a group of experienced product managers and product developers, we would like to provide some perspective into the product development processes throughout the lifetime of a product buildout. In this episode of the Product Roundtable series, we will explore the purpose of user flows and look at some useful methodologies behind creating them. User flows are one of the necessary steps in the product development process. They are essential in communicating the flow of an application to product managers, developers, and stakeholders.
The primary purpose of user flow diagrams is to demonstrate the user’s path on an application to complete a task. At Wonderment Apps, we have years of experience working with user flows throughout the application development lifecycle. As experts in this area, we think extensively about making quality user flows for various audiences. In this roundtable, we dive into user flows’ deep purposes and try to give you perspective on some of the best practices to follow when creating them.
————–
Product Roundtable Transcript
Best Practices for Creating Powerful User Flows
[00:00:11.280] – Ryan Williams
Hey everybody, it’s Ryan from Wonderment Apps here. We’re doing another product roundtable today, and the topic that we’re trying to explore in today’s session is how do we create really great, powerful user flows? I’m sure you’ve experienced this before. It’s been something that as a product or tech person, you’re having to figure out the pathways on a constant basis for how you guide people through whatever environment you’re creating, whatever app, whatever website, all of the experience itself has to be given the right kind of flow and guidance for the user to get them towards the specific things they need to have happened. So today we’re going to explore kind of what’s the purpose of user flows. We’re going to look at what are some good methodologies behind creating them. Think about some of the software that might be good. And we’re also going to think about how this thing might be able to use in our process. So, I want to reintroduce this team. If you’re revisiting us, then you might know us already. But let’s do a quick round and introductions for one of my product team or at least part of the team. So, let’s go ahead and start with Amy.
[00:01:30.890] – Amy Halvorsen
I’m on mute. Good start. Hey, I’m Amy. I’m a product designer here at Wonderment Apps and I’ve predominantly worked with internal tools and I’m happy to be here.
[00:01:44.420] – Ryan Williams
Awesome thanks Amy, how about you, Alexandra?
[00:01:48.340] – Alexandra Adelman
My name is Alexandra. I’m a product development manager at Wonderment Apps, and yesterday was my two-year anniversary with the company.
[00:01:55.900] – Ryan Williams
Yay, awesome. And then the last one is Joe.
[00:02:04.100] – Joe Gillette
I am Joe Gillette, I’m the director of product at Wonderment Apps, and so I lead our team of designers, product developers, product managers, engineers, and we do all kinds of exciting projects together.
[00:02:18.740] – Ryan Williams
Very cool. All right, thanks, guys. So today we’re going to dig into this awesome subject of user flows. It’s one that sits at the forefront of our minds here at Wonderment Apps. We work on a lot of user flows and a lot of different scenarios. I like to think that we’re kind of premier experts in the area and we think extensively about what makes a flow, a quality flow for whoever needs to engage with it, because at the end of the day, it’s really a map for people to follow, for how to achieve the goals that they’re trying to achieve in whatever kind of software packages they’re trying to execute it in. Whatever website, whatever mobile app, there’s a purpose. So, I think that’s one of the first topics I actually want to talk a little bit about today is like what is the purpose of the user flows? And I think we all know that the basic purpose is to kind of show Step-By-Step how people might move through something. And I want us to explore not just like what the main purpose is, but kind of what’s the deeper purpose of being able to give people this kind of perspective as they’re going into a technology build. So maybe Joe will start with you, actually.
[00:03:29.490] – Joe Gillette
That sounds good. So, as you mentioned, user flows kind of on a basic level, they represent a user’s path through the app or through the website, basically paths towards conversion path towards basically in any way they can navigate through this environment. It serves several different purposes. Some of them serve us as product developers directly in the sense that it starts to act as an inventory of sorts like it’s a start to help you visualize what is the full scope of this thing I’m developing. If the user gets from point A to point B, how many pages, how many wireframes, how many flows does it take to get there? So, it serves that purpose. It also kind of acts as a foundational piece of building like test cases for QA, Quality Assurance. As you mentioned before, QA, Quality Assurance, will kind of use user flows as a basis for the scenarios that they need to test when they go into testing that app or that software. It also serves a good purpose in the sense of getting sort of perspective for stakeholders and for businesspeople, again, in regard to the full scope of what they’re trying to build, because sometimes people see it’s really simple. The user goes, they put something in their shopping cart, they check out. But there’s actually a lot of parts that the user can go between point A and B, and to understand all those variations in the path, because what we do in user flows, we don’t just look at the user does this, the user does that. We look at system actions as well. We look at every possible variation of that flow, whether it’s the golden path, the happy path, or every offshoot of that.
[00:05:20.790] – Ryan Williams
Awesome. Yeah, thanks, Alexandra. I know, I know you just brought up like one of the topics being one of the big reasons being able to communicate with business and stakeholders. And I know there was a project that we had worked on in the past for an entertainment company that didn’t have pretty much any perspective on this. And I know for one of your projects you spent quite a bit of time helping them think through some of those things. How important was the communication using that diagramming system and kind of what did you learn through some of that process?
[00:06:01.480] – Alexandra Adelman
User flows are critical. I mean, in my mind, user flows are primarily a communication tool and what I like best about them is that they’re a mix of technical and visuals that can be such a mix of technical and visuals. And you can adjust the ratio of between how much technical detail you provide or how much visual detail you provide. But it’s the adjustment of the ratio of these details that allows you to communicate to so many different audiences, whether it’s business. As Joe brought up QA, Quality Assurance, development, other stakeholders, like everybody, have their own perspective into what the system user is going to be doing. And user flows allow you to, a product manager, to adjust the story so that it is best heard by the audience seeing it. So, at this company, I mean. User flows did everything from the present the complexity of the problem to highlight all of the areas, the detailed areas that need solutions. It was an inventory, as you mentioned, not just of screens would have like, have we solved this, how we solve this, how we solve this. If we think about this and think without user flows, the project could not have been accomplished.
[00:07:30.840] – Ryan Williams
Yeah, I agree, and I think like when we really got into it and we saw that this particular product had quite a number of audiences, I think they had like maybe up to eight to ten different core audiences using this thing. So, every time that people would use the application, they would have to think about how one perspective of an audience would use it. It was a great way to kind of like bifurcates some of those flows. And it created to be like that purpose of being able to show what an audience perspective is using a tool that is a vital part of user flows. So, I know for me, I like to always think about creating an image and a happy path before a happy path, meaning kind of the most successful conversion path someone could take through user flows. I like to look at that on a core audience, by core audience basis before you start anything because another good case is like a marketplace where you might have you may have a buyer and seller in the marketplace. They have very different paths against the same application and their purposes are totally different in there. And communicating those to the people that represent them is important. So, yeah, it’s great. Thank you, Amy. Maybe give us a little perspective. I know. In early and when earlier when you’re engaging, I know one of the things that you’re primarily from a design background. So, you kind of jump into the wires and the designs quickly. And I know one of them as you’re growing, one of the things you’re doing is really working kind of the user flows process into that. How has that changed your perspective on things for you?
[00:09:14.580] – Amy Halvorsen
I actually really like user flows a lot because some of what Joe mentioned before is that it does give you an understanding of how many screens you have to design and you want to make sure that you can get approval that, hey, this is what you’re trying to go for. Here’s a representation of your wires. Now I have to go build six screens. Six screens are going to take me. I don’t know, say two weeks, so it gives an understanding of how much work I have in front of me and it also helps when I have to go deliver those items. So, I have to go deliver those items to development to say, OK, Dev, here is the user flows that have been approved. Here are the six screens and they line up directly with my six-screen design and I hand them over to Development.
[00:10:07.380] – Ryan Williams
Yeah, so that actually brings up a good question, kind of the next topic that I want to look at a little bit at is how do we best construct user flows? Right. So, the kind of construction process of them, maybe you can talk a little bit about the way that you’re integrating those two things. So, I know if you look at the pathway and we’ll try and put up a visual of some user flows examples here. If you look at a pathway of like user interaction, so they’re moving from one thing to another to another, is it just like they go to this screen and then this screen in this? Is that simple for you or is there more complexity?
[00:10:47.070] – Amy Halvorsen
In one of my latest features, we’re actually integrating some. Text enabling. So, like the system does something very complicated in the background in which has to come back to the user. So, it’s not just user does X, Y, and Z we have to incorporate to help the development team say, you know when the user does this, the system reacts this way to give the user back this information. So, it’s not just the users doing certain things on screens. There’s a very complicated development piece that goes into that.
[00:11:28.430] – Ryan Williams
There’s communication. Yeah, I know one of the things we work on is we say like the user commits this action and then the system responds with this action. Right? And then the user might do this or maybe even an outside third-party element will respond. But like actually kind of layering in the communication runs, not just human to human or screen to screen, but often human to the computer and then how that kind of plays out. Right?
[00:11:57.710] – Amy Halvorsen
Yeah, totally. So even in the latest feature, as I said, we have a user, a secondary user, and the system and how they all communicate together.
[00:12:09.920] – Ryan Williams
Awesome, thank you. Great. Joe, do you want to talk a little bit about that when you’re thinking about the communication of kind of the structure of communication, of interaction? What are some of the things that you think about and got everyone on?
[00:12:29.620] – Joe Gillette
Yeah, that’s a great question. What my goal, as mentioned before, these act as a communication tool right between us and developers us in QA, Quality Assurance. So, my goal is to provide them with the greatest level of detail possible in terms of, you know, every variation that the system might take in response to a user’s action as well. Right? So. Depending on which path the user takes, the system might respond in different ways or depending on a path that the user took previously or a setting that was set in another separate user flows user enters with the following setting. The system responds this way. The user enters with another set. The systems can respond in a different way and that sort of thing.
[00:13:19.360] – Ryan Williams
So, like for you, it’s the kind of like an important part of this is like how like within a user flows, right? You might have different kind of diagram boxes or circles or however you identify, which I actually want to talk about, shape, choice, to like what matters to you, but like but really like in the language inside the box, when you’re going from user flows, you’re really like what I’ve seen is it’s usually like it’s helpful to see who the main actor is. Right? And then what that next action is they have to complete. Right? Why is that important?
[00:13:53.920] – Joe Gillette
Well, so. A key foundational thing when building any user flow is to have your actors clearly defined, I think actors are a great way to think of it and think of like a stage play. What are they? What’s the script? Thinking of it as a script. And developers think of it in a similar way. QA, Quality Assurance, think of it in a similar way. It’s kind of acts as the foundation for their testing scripts in away. So, you define your actors very clearly, and that helps everybody understand, OK, this one is the user. This one is the system. I tend to color-code them. So, the user is one color system that is another color. If there’s a yet another user or yet another different like role or different permissions, those will also be color-coded. So, it’s really clear to everyone on a visual level. And I tend to keep them in separate lanes as well. So, we have concurrent lanes where there is the user lane, system lane, user number two, and how all of those lanes interact and how data transfers between those lanes is a really helpful thing for everybody to understand.
[00:15:01.300] – Ryan Williams
Awesome, thanks. So, Alexandra, I know you’ve built some pretty advanced flows in the past and you’ve actually pioneered a lot of the visual components that we work with within the flows. What are some of the important considerations you take into mind when you’re building one?
[00:15:21.890] – Alexandra Adelman
Yeah, absolutely. I love what Joe said about color-coding, color coding of layers because that is a very immediate visual distinction that everybody can understand that helps and it’s consistent to recognize those players throughout the board. Sometimes I will. So, the way that I’ll use planes is I’ll have a surface lane, what’s going on in the foreground? What actions is the user taking in the foreground? What action is the system taking the foreground? This is interaction with screens. And then my second lane will be like, what’s going on in the background? Right. What is the system doing in the background? How is the system connecting to third parties to databases to whatever, but like what’s going on in the background that is important for the functionality of whatever it is that you’re building but our user doesn’t necessarily know about? Let’s see you brought up shapes, right? And the two shapes that I use the most are boxes and triangles, boxes, rectangles. So, the boxes, those to me represent actions. Actors like those are fine entities. Whether it’s something that happened in the past or something that’s going to happen, it’s like it’s defined. And whereas triangles, those to me represent splits and perhaps they’re either decisions, it’s a question like, is the user going to go left, or right? Are they going to click OK or cancel? They represent splits in the path that will then create different lanes with different responses. So, if you choose the left path, then this is going to happen. If you choose the right path and this is going to happen. And then they have their own flows built both in those different directions. So those are the two shapes that I use the most. Let’s sometimes, as Joe mentioned, you might group things hold flows that take place on a different color background and the whole flow here that takes place on different color backgrounds. And things interact because systems are complex. So I try to break as much as possible, whenever possible, I try to break flows down into the lowest common denominator, flow into the simplest elements, and then I’ll have multiple simple elements and then how they interact and relate to each other, because whether it’s comprehension, human comprehension or development direction or testing, like having smaller bite-sized pieces of things, is I feel a happier path towards completion. So, yeah, sometimes that puzzle piece my close together.
[00:18:31.220] – Ryan Williams
And just to be clear here, to be right there is a difference between technical schematics that tend to use very structured shape orientations to say this is a database. This is a thing. But like these are really more about actually showing system communication. So, like keeping the shapes simpler is often more easily readable by people, even though you could potentially mix them up and add more kind of subtle information inside.
[00:19:05.620] – Alexandra Adelman
Absolutely. So that’s a great point, I deliberately don’t do that because I’m not trying to create technical diagrams, there is a place in time for that. There are people with expertise in that. But then I found, as I said, the rectangle and the triangle, those are the most streamlined and informative shapes for communication, for the purposes of what our user flows.
[00:19:30.940] – Ryan Williams
Awesome. And I want to come back to a question kind of related to some of the stuff. It’s like a lot of times a user flows include like very simple, like one-line descriptions of like the admin user clicks the link and the admin user expands the box and clicks open create. Maybe that’s a simple act of what they’re going to do. But sometimes you need more detail within the user flows itself. How do you show some of the expansion of detail in there so that if you want to keep more on the page like that, there’s a way to expand that?
[00:20:13.870] – Amy Halvorsen
Well, you can take your user step up into a wider flow if that’s, you know, a good solution.
[00:20:20.920] – Ryan Williams
Can you describe what that is really quick?
[00:20:22.960] – Amy Halvorsen
So, a wireflow. It would be like a user flows with a graphical representation of what your page might look like without being fully designed in a UI, User Interface kit or anything is just here. Here’s a skeleton of what this page needs to do. These are the boxes that are on the page is the information that is being displayed. So, you’re actually capturing. A fuller picture of what’s happening and then the paths that continue on, so you can still say your system is doing this in the background, but here’s what your users presented within a more detailed fashion.
[00:21:04.540] – Ryan Williams
And if you need to write more text and user flows, like what are some ways in which you might present that?
[00:21:12.010] – Amy Halvorsen
Do you mean in terms of annotations?
[00:21:13.910] – Ryan Williams
Like if you need additional annotation within there, do you put it all into one box, you break it out. How do you handle some of that?
[00:21:21.740] – Amy Halvorsen
So, I guess I would use a combination of. Not only user flows or wire flows, but I would combine the deliverables with I would use a user flows, maybe a wireflow, I would then translate those wireflows directly into prototypes and I would leave the annotations on the prototypes. So, if you’re using a full wire flow, you can definitely incorporate annotations in there. I would think that those would be more like. The system does X here.
[00:21:59.640] – Ryan Williams
Awesome. Yeah, thanks. That’s a good rundown. So, Joe, I want to ask you to tell me some of your favorite kinds of user flows software’s that you’re into or that you’ve come across over the course of time.
[00:22:14.010] – Joe Gillette
Sure. Yeah. Over the course of my career, I’ve used all kinds of tools, my current favorite is definitely whimsical, whimsical is super easy to use, really highly visual. The great thing about it is we can actually collaborate with people who are less familiar with UX, User Experience, and things like that. We can share it with a business stakeholder. And they generally understand it’s you know, you just you have all the basic shapes, you’ve got rectangles, circles, you’ve got the sort of database cylinder, you’ve got decision trees, all that sort of stuff. Connectors are really easy to just kind of grab those snap them into place. It snaps everything into alignment. You can kind of connect the arrows in a single click. It’s a really intuitive, really visual, super simple interface. And that’s the thing I like most about it. It’s also really easy to grab flows and group them so you can kind of like just to draw a box around an entire flow. And now that flow is a group and I can move it over here, rearrange things as needed. It’s also got a couple of different styling options. So you can kind of distinguish between the sort of some primary things, secondary things, as you mentioned, when you’re looking for like a greater level of detail, oftentimes I’ll have sort of an adjacent box that goes off of the main flow and maybe it’s kind of like a ghost box, you know, just the stroke outline and it’s got some additional text there that’s maybe some important technical notes that couldn’t fit into the main flow. Yeah, but whimsical is definitely our favorite at Wonderment.
[00:23:53.930] – Ryan Williams
Great, awesome. Alexandra, how about you? I know we obviously use whimsical are there other ones that you use that you like as well? Do you think that is relevant?
[00:24:02.450] – Alexandra Adelman
Miro is one that’s come up. In the past, I have used Lucidchart that I think is a lot more rigid, perhaps more technical. But as soon as whimsical came around, I carried it over to that. But let’s see…
[00:24:25.800] – Ryan Williams
Even sketch.
[00:24:27.950] – Alexandra Adelman
Yeah, but I think the biggest two on my radar right now are Miro and Whimsical.
[00:24:32.640] – Ryan Williams
What do you like about Miro that you’ve experienced with it?
[00:24:35.610] – Alexandra Adelman
Um, it seems like a really comparable tool to whimsical honestly. My preference, it would be to use whimsical, but they very much on par like they thought, you know whimsical has. You can do mind maps; you can do decision trees like they have different template formats. Miro has something similar. Amy, do you have anything to add here or any other ones that you want to make?
[00:25:00.790] – Amy Halvorsen
The only other one I have used is draw.io from Google.
[00:25:04.680] – Ryan Williams
So, what do you think about that one?
[00:25:07.410] – Amy Halvorsen
It’s more like Lucidchart. It’s kind of rigid, you know, but it does what it needs to do.
[00:25:16.480] – Ryan Williams
That is Draw.io, right? Yeah. And with Lucidchart as well as Lucidchart is a Google app as well. So, it integrates in with a lot of the Google Documents stuff. So those are two good, good options for Google based environments. But I think we primarily focus on whimsical here because of the speed and media use. To that end, we’ve had a lot of team members pick it up really, really fast. So, what we’ve seen is you can use it for really expansive knowledge base creation that goes beyond just product as well. So, a good example of that on a product level, if you’re creating a product, does not only do you need the stuff for development and QA, Quality Assurance, but you might also need user flows for your customer service process. Right? So, like a user sends in an email about having this issue and you can actually flow out like the way that that should work helps you make decisions on some of your choices and software. It helps you think about how you need what team members you need to hire to be able to do things. You create these things; those teams can use these as simply and quickly as other teams with a little bit of guidance. You can have them be impactful and create an entire environment knowledge base across organizations powerful. So, I mean, I think that brings up other good uses of these flows beyond just in that product that you’ve seen, or you can think of that make a big difference when working with the company? What do you think, Joe?
[00:26:49.200] – Joe Gillette
Yeah, that’s a great question. As you mentioned, user flows can be used not just within product design, product development, sort of digital screen-based environment, but can actually be used on a much higher level as well. For example, at Wonderment, we use it to document all of our internal processes, as you mentioned. So, whether that’s in our admin department or sales department, it’s really easy for everyone to pick up this tool and understand how it works and start to lay out some of their own processes. I’ve also with one of my recent clients. I’ve been working really closely with the service design team. And so, I’ve been kind of digging into more about what exactly is service design and what role do they play. In service, the design is not unlike user experience design, but it’s wholly different in the sense that it’s not just thinking about the actions that a user takes on the screen, but the overall journey of a customer. And a lot of our products, they have real-world applications as well. Like it’s not all about being on the screen, but how does the user how do the user finds themselves enrolling in our program, to begin with? How does the user get to the point where they want to sign up for this software and things like that? So, with some of our bigger clients where they’ve got a service design department, we’re also working with them in the kind of user journeys that they map out as well.
[00:28:17.390] – Ryan Williams
Awesome. Yeah, that’s a great example, awesome. Alexandra, can you think of any that is applicable?
[00:28:31.320] – Alexandra Adelman
I’ve even seen it used for managerial roles to indicate and to try to lay out a process for how to how somebody or a department and a manager role is going to communicate and stay involved with their employees, whether it’s a schedule of communication or like or what’s the purpose of each point in communication. What are the goals? What’s supposed to come out of it. What is the purpose of staying engaged, who it benefits, how? I actually spent quite a bit of time trying to design a system like that for wonderment and used flows extensively to illustrate that for the whole thought process behind them.
[00:29:22.020] – Ryan Williams
Yeah, that’s a great one, like we have worked on conceiving an entirely new kind of like communication process between employees and managers and thinking about the big part of what we, like, try and work into the company. And so, like visualizing that and actually bringing in all these different departments that may not even be familiar with the stuff, it’s pretty powerful because they can immediately at any moment go reference it and have access to it. And it’s powerful for them to come back to. We use them actively on a daily basis, just like, hey, that’s not in the flow. People can go back to, oh, yeah, I’ve got to do this thing. Here it is. So, you don’t have to live with the total brain dump in here.
[00:30:02.460] – Alexandra Adelman
They’re also really great training tools, whether you’re bringing somebody new into your company, new into your department. I mean, this is a way to document the policies and procedures of your organization and clearly lay out the way that that you want things to run for anybody new coming in.
[00:30:24.090] – Ryan Williams
Excellent. Yeah, completely agree. Amy, anything you want to add here
[00:30:29.880] – Amy Halvorsen
outside of products, the product flow for user flows, the only other thing I’m the most familiar with is like the sprint process and how that could set up and how that’s used as a tool to communicate between product and design and what’s going to be delivered and when and when does this meeting happen. And so, someone can step in and say, oh, this is the process. We need to have this meeting tomorrow on this. And what comes out of that meeting?
[00:30:55.720] – Ryan Williams
Yeah, I love that we actually did a prior one of these. I’m talking about the products from the process and how that works. And actually, a big part of that is the diagramming system of communication that goes back and forth between deliveries and feedback and the way that that process works. And that’s really about communication between teams really effectively. Yeah, it’s great.
[00:31:16.300] – Ryan Williams
OK, well, awesome guys. I mean, I think this is a great overview of how we approach user flows where we think the benefits are, and kind of like some of the aspects of them. We hope you found it useful. We hope you found this process really useful. We hope you enjoyed some of the tips and the tricks that are in here. And obviously, if you want to learn more unique insight and growth, let us know. We would be happy to talk to any of us and dig in. We Wonderment Apps. We create really great apps and websites and software. We do a lot of custom and bespoke work. We also work on specific platforms. But our goal is to try and help an organization find the best pathway to create the right software for what they need, whatever version that is. And as you can see, we think a lot about the processes that we go through a lot about, like how we approach solving these problems to create better efficiency, to create more effective deliveries and to be creative in allowing these things, allow us to come up with really awesome creative solutions to things. So, I appreciate you guys taking all the time and offering your feedback and your insight. And we hope this was a useful video for you.
[00:32:42.490] – Joe Gillette
Thanks, everyone.