From the course: Launching Your Idea with Design Thinking

Mapping user flows for business success

- [Instructor] Now that we understand what user flows are, let's talk about how to map them for business success. First, start by identifying key user goals. What do you want your users to achieve? Do you want them to maybe make a purchase, sign up for a newsletter, or complete a survey? Next, map out the steps users need to take to reach that goal. These steps should be simple and efficient with no unnecessary obstacles. You also need to align the user flow with a business goal. For example, if your goal is to increase sales in your web shop, create a user flow that encourages users to easily explore products, add them to the cart, and complete the purchase. Finally, keep refining the user flow based on user feedback and analytics. For example, if you notice that your users are dropping off at checkout, it might mean that the process is too long or complex. This way, you can improve your user flow and make sure that it gets more intuitive. To give you a better example, let's create a simple user flow together in Miro. So let's open up Miro. Make sure to download an exercise file with the Miro board so that you can follow along. As a first step, let's navigate to the upper toolbar and click on the main menu. Here, let's select board and make sure that we duplicate this board so that you can create your own user flow. All right, so whenever you're ready, I've created this wide section so that we can place our elements here for our user flow. Let's imagine that we have an online store, and our task is to map out a simple flow for users to add a product to cart. So first of all, I'm going to navigate to the sidebar and select Shapes and Lines. Here, let's click on More Shapes and make sure that you navigate to the flow chart section. Here, I'm going to select my first element, which is a terminator, and drag it right here into my board. By holding the Control key on my keyboard and scrolling with the mouse, I'm going to quickly zoom in right here. Let's also place the shape right to the side to make sure that everything is nicely aligned. I'm going to double click on this text and type start because I want to visualize the starting point of my user flow. You can also go to the styling settings, change the color of your shape, for example, to this one, and also, I will go to the border settings and remove the border. Perfect. Since we have our starting point, let's navigate back to our shape selection and click on the process and drag it right here into our working canvas. So here, I'm going to type browse products. I'm going to quickly increase the width of the shape and change its fill color to the green one. Great, now since we have two shapes, we can connect the starting point to our first step in the user flow. Next, I'm going to select a decision point and drag it right here into my working area. And right here, we are going to type found desired product. Let's also quickly change the fill color. So this diamond shape will serve us as a decision point whether the user found the desired product in our web shop or not. So first of all, let's also click on our browse product shape and connect both of these points. And then as my next step, I can actually create the flow that will guide my user back to the previous step if the user did not find the desired product. So here for this arrow, I would like to add text, and we are going to quickly type no. This will make it clear in our user flow what the user has to do in order to navigate back or forward in our user journey. All right, let's move to the next step. So I'm going to select my browse products rectangle and duplicate it with a Control + D key shortcut. Let's quickly place it right here on the right side. So if someone found the desired product, that user is going to navigate to the next step, which means that the person is going to select a product. I will quickly again connect both of these shapes. And let's not forget to add text to our arrow. Here, we are going to type yes. So now it's quite clear what is going to happen on this decision point. Next, I would like to add another decision point. So I'm just going to select the shape and duplicate it with Control + D key shortcut. Here we have another decision point, which is want to buy. That's very important for user to decide. So again, let's connect the previous step with this decision point. And if the person does not want to buy yet, we will make sure that that user navigates back to this step to browse products. Let's quickly add again text to this arrow and type no. And finally, if the user is ready to buy, we can proceed to the next step. So again, I'm going to select this rectangle and duplicate it with Control + D key shortcut, and place it right here on the right side. So here, we're going to have our final step, add to cart. And of course, let's not forget to connect both of these points. For this arrow, I'm going to type text, yes. And finally, if you are done with your user flow, make sure to add the final endpoint. So again, I'm going to select a terminator and type end. Let's quickly change its fill color to this one. So together, we just created a very simple user flow, just to give you an example. In the real project, your user flow will most likely get way more complex. But for now, I have a simple challenge for you. Go ahead and expand this user flow in Miro by adding extra steps, such as reviewing the cart and completing the purchase. Good luck.

Contents