User Flow Diagram Tutorial - MASTER Breakdown of UX Method

in last week's video linked here at the top i showed you how to draw a test flow chart and how that helps you initiate a design process today we'll do just that with user flows it's like test flows but on steroids the power of these is the fact that it helps you see the diagram or sequence of steps that a potential user of a product would take in order to complete a task the user flow in contrast to task flows looks at every step throughout the process including scenarios where the user could branch off and take a different direction knowing how to draw these diagrams will help your entire team think through and plan the development work helping you save costs resources and mitigate potential user confusion and pain points don't worry if this all sounds too complex at this point in time if you're just getting into ux and product design this video will help you see how actual ux work is done if you're already a designer then there might be a couple of gems for you to pick up along the way too enough with the chit chat let's dig in [Music] earlier we sketched the task flow diagram for a food delivery app we created six simple steps for a user to set up an account with their email address and verifying their account with a phone number as a first step let's use that task flow as a foundation to the user flow diagram we want to create today before doing anything let's define which type of user will design for and what pain points we'll be solving the phone verification process of mobile apps can sometimes be an issue for users who have prepaid or pay-as-you-go plans for their phone services instead of a monthly plan depending on which provider these users have they may not receive the one-time pin codes that they receive from the apps in order to verify their account therefore let's define this hypothetical user persona to be an exchange student living and studying abroad she uses a prepaid phone service and loves ordering food online [Music] we'll start off by looking at what potential branches or edge cases we see for each individual screen from the task flow chart we have here we can do this loosely just to form ideas on what scenarios to consider when we actually map out the diagram let's add some notes on the fig jam board as we go first off the welcome screen we might need to consider adding a couple of links for things like terms of use or privacy policy second step sign up options what potential branches could you see being related to the sign up options i'll give you some time to think [Music] if you guess sign in then you're definitely on the right track what happens if a user already has an account and wants to log in should we place a separate button and flow for that or should we use a catch all button that allows you to both sign up and log in through the same button in the latter case we need to figure out where and when the app would recognize the user if they're already a member sign up and sign in option one separate flows sign up and sign in option two one flow for both also what sign up options do we need to consider email and social accounts are most commonly used if social accounts which ones apple facebook twitter moving on the verification process what states do we have to consider for the input field [Music] what if the number isn't real or is too short [Music] should the app be able to verify if the number exists or not otp the one-time pin code getting into the fundamental pain point we want to solve for what happens when the user doesn't receive the four or six digit code should we provide alternatives if so which ones for steps five and six i can't see any edge cases or alternative views after finishing the onboarding process we can move on to the next step now that we have a good idea on how to lay down the user flow chart [Music] the symbols we use for creating user flows are the following circle to indicate a start or an end point [Music] rectangles to indicate steps the user takes or pages they view diamond shapes indicate a decision point or conditional as it's called an engineering lingo a parallelogram to indicate inputs actions or outputs in the process we'll use this to communicate data inputs or actions from the user in this example and lastly arrows and between each symbol to show the direction of the flow [Music] we'll need a start and an end point so let's create two circles for each the welcome page is the first screen let's imagine our users being asked if they want to log in or sign up using socials we're using their email i'll add a diamond shape here for this decision point and let's add a parallelogram at the top to indicate if a user clicks on any external links and a page for the external link url if they choose to sign in or log in with socials they'll choose to click on one specific option depending on which one they choose they'll see a different third party screen from that service that asks them to authenticate once that's done they'll be redirected to our app let's add in a couple of options for the social account services connect with apple connect with google and finally connect with twitter let's add in an alternative for connecting with email as well [Music] since we're allowing users to both sign in and sign up in the same flow we can add a conditional to see if the user already has an account if they do they'll go all the way to the feed page at the end of this user flow chart if they don't which is the case here they'll be asked to verify their phone number and i'll add a rectangle to represent that page as well let's start off with the conditional [Music] i'll just tidy this up a little bit next they'll add their phone number which is an action and then we'll see if they receive the otp and if they did they will be redirected to the next screen and then they'll take an action on entering that code and then after that they'll get to the final page the feed page and this is where the flow ends if they didn't get the code however we can add some alternatives either they can choose to send the text again which could help users that can receive otps but didn't just get it in the first time but for our chosen persona we want to clarify that their number must be able to accept sms text for verification or else they could choose another option that could allow an automated bot to call them and give them the code through phone this is an option commonly used by big companies such as google this could actually help them bypass the issue [Music] now this time the user receives the code through a call follows through all the way receives the otp goes to the otp page enters the otp goes to the final feed page and ends the flow now that's how we create a user flow diagram it pushes you to do some heavy lifting prior to creating any design but it lays down a foundation that will help you think through the design and user experience thoroughly if you want to practice further start sketching out rough wireframes based on the user flow that we just drafted you should have a good idea of what each screen should look and feel like make sure to subscribe turn on notifications and hit the like button for more videos like this see you guys in the next video peace [Music] you

Channel: Wired to Design

Views: 73,374

Keywords: chunbuns, figjam, ix flow, product design, product designer, task flow, user flow, user flow diagram, user flow figma, user flow task flow, user flow tutorial, user flow ux, user flow wireframe, user flows, user flows ux, user journey tutorial, user task flow, ux, ux design, ux design flow, ux design process, ux design tutorial for beginners, ux designer career, ux flow, ux flow figma, ux flowchart, ux jobs, ux process, ux research, ux researcher, what is a user flow

Id: V6nN3jJMbJY

Length: 10min 20sec (620 seconds)

Published: Tue Feb 15 2022