UX Design - Why you NEED to know User Flows!

today we're going to create our very own user flow from scratch i'm also going to explain what why and how [Music] what's up everybody gary simon here so today we're stepping into the world of ux design and we're going to cover user flows all right so what's a user flow well basically anytime you have an app or a service or website of some sort you have a bunch of different tasks or objectives that a person or a visitor or user might be engaged in what are the processes or the steps that a user must take to become a member what are the tasks that a user has to take in order to like a video there's a bunch of these there could be hundreds of them and you can create a user flow for each one of them and this helps you ultimately in the early stages of the ux process it can help you formulate the ideas before you get into the step of creating high fidelity mockups all right so there's a bunch of different types of user flows here um you can have simple ones like this that are just based on labels with uh you know text or there's ones based on wireframes sort of like this there's also user um user flow services uh here's overflow.io this is probably the most popular one i it does it is price you know it does cost money um but it is really solid um you can see these examples of like high fidelity user flows cross device flows wireframe based user flows uh and so it just makes the process of creating these quite easy uh you can also have like as a part of figma there's a template called ux flow 2.0 that has a lot of this like the the wireframing templates created for you as along with the little connections between them it's free there's also wireflow.co which is also free and it's just an app for creating these user flows although i don't think you can add captions and stuff like that um but for me we're just going to use adobe xd i'm going to create mine from scratch essentially and it's going to be for a real world purpose the designcourse.com really re-launch and the user flow i'm gonna create for that one is how does a person become a member this is an important question how many screens how many clicks does it take and that's gonna help me formulate the idea before i start getting into the high fidelity mock-up process all right so as always make sure to subscribe and let's get started now before we begin some of you may not know but early in the year i released a ui design bootcamp on scrimba now scrimba.com is one of the hottest new ways to learn coding as well as design at scrimba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so visit the very first line in the description this youtube video to access my course along with many others for a very low monthly fee all right here is designcourse.com this is just a landing page just to collect your guys's email and girls of course uh for the anticipated launch um and i suggest you put in your email by the way and i that way you can be notified when it does launch which is going to be in several months from now but anyhow i digress this is going to be uh the basically the service that i'm going to create a user flow for all right so you can have many user flows as a part of a single project some can be real complex others can be just directed at one specific task that's a part of a web service or an app or whatever in the case of my service i mean it's going to be a subscription based service where a user pays a monthly or a yearly fee uh in order to access all of the content that's on my service so there could be a lot of different uh object objectives for a person who uses such a service one could be uh them watching a video or one of them could be completing one of the ui design challenges uh another could be um becoming a member and that's the one that we're gonna do so we're gonna take them from the landing page uh which this is not the landing page for when the service launched of course i we're going to take them from the landing page and see how fast we can get them to become a member and you want to do so in the least number of steps possible if that makes sense all right because the more steps that you have the higher the degree of likelihood that you're not going to have you're going to have a lower amount of members all right so this is going to be the one of the the use cases for a user flow before you get into designing the actual high fidelity prototype or even even a wire frame you can use this process this user flow process in creating this diagram to get the idea out first without having to jump into a wireframe and creating wireframes or high fidelity mockups all right so let's go ahead and step in to adobe xd so adobe xd doesn't really have a dedicated user flow feature um neither does figma there's there's templates that you can get that have these little assets here like this i created this one myself it's very limited obviously but it's going to work for what i need i didn't feel like designing all this stuff when i'm working on this tutorial i but there are actual user user flow services out there some are free some are paid but i figured i wasn't going to feature any of one of any one of those over the other um yet and i just wanted to to just create my own here just so you can do it in xd so um one of the things that you can do is i instead of having each of these steps or these lines or these arrows pointing to you could have them point to like say for instance uh just a caption that says home page like a little circle that says home page in it and then the next step would go from that circle to another circle that goes to another page so you don't even have to have mockups uh or wireframes or high fidelity you can also use wireframes though as well so it's up to you and it depends on how much time you want to uh put into your user flow so what i'm going to do is get ui kits here and then we can choose uh wireframes so we can use wireframes like this so you can just choose download kits and for some reason lately when i get up a tab like it hasn't been working well so you see right here here's the zip file if i open this up you'll see we have wires dot web and mobile so these would be mobile interfaces um this is going to be web-based interfaces or wireframes rather and so all you do is just drag this to your desktop and then double click it and it will load up in your adobe xd so i'm going to double click it it's loading on the other screen and there's a lot of stuff here look at all of these artboards so they're all eyes categorized into like ui elements sign up onboarding activity feed profiles messaging blah blah blah blah and these are just uh really quick ways to get up uh uis if you haven't yet created your own so it's very handy in that context and especially a context for you know what we're about to do which is creating a user flow um so one of the um what we what we basically want is just something to represent uh the the home page of the service so one of those screens is uh right here now i changed it to have like a little join button uh right here and i kind of like uh dimmed out the rest just to show like okay this is the join button this is where they're going to click um after that we're going to take where do they go from that join button all right well we'll go straight here now again some of you might be wondering i why don't i just use the prototype feature between these elements you could do that in addition to this what is nice about a user flow is you can see everything in one step like a when you step out from a macro level perspective you don't have to use uh an actual prototype there is value in seeing just one screen between each step and that will really help you and plus in order to have a prototype feature you have to have at least a wireframe already worked in and that's going to be more work so the idea is to avoid unnecessary work here so when they click on join where does it go where where is it going to take them so these are important questions that's a part of the ux process and it all depends on which it's all dependent on your specific project or your app or your service um for me we know it's a subscription-based service and i'm going to have different tiers or plans t-i-e-r-s not not like the cry very baby tears maybe some of those too um and so we have to figure out a way to present that those different plans to them right and i think that would be the logical next step they click join they have to choose the plan all right so there's another um i kind of created this one um based on one of the other examples and this is annoying like if you have something outside of an artboard like this right here and you paste in an artboard and it goes behind it it'll become a part of that artboard no big deal though um so this is just a very rough wireframe of the choose your plan right here um i'm not sure why i'll put two if i have three there because of like uh well i'm not sure i honestly i'm not sure yet and so that's why i don't even want to deal with trying to create a high fidelity mockup when i don't know how i'm going to present the plans see because i want to have a monthly plan that's either like 14 or 19 a month i also wanted to choose if they want to do it yearly um and also i'm going to have a higher place plan price plan that gives people access to live ui ux workshops on a bi-weekly basis um and also project submissions where we rate them so i'm not sure how i'm going to present that stuff yet and that's okay though we just know that for now at the very early stages we're going to have a choose your plan section uh after which will be the first step um after they click join and they want to become a member so these like little higher you know these buttons right here these would be buttons that people click to select the plan where do we go from there do we put them straight into the order process or do we have to ascertain whether or not they're logged in already or not if they're logged in they'll probably just go straight to the order page where they enter their credit card details or choose paypal uh but if they're not logged in what do we do then do we send them to a another form for becoming a member i like where they create a user account at least so these are questions that we have to ask and you as one person as a person who's responsible for creating this user flow and maybe perhaps the the high fidelity mockup in the end as the ui designer you make you make assumptions right and so you need to put this stuff in front of other people uh your team ultimately i i that user flow stage so you can really work through the process together to say you know more minds are better than one right and so the somebody else might come up with something that's better so what all you can do as the person is responsible for this at this point in time is come up with your best guess in terms of where you think the person should go next so for this step i guess we'll go here let me push this down we're gonna have this branch off into two different sections so is the person logged in all right so i'm gonna put this whole section right down here all right so are they logged in if it's yes it's going to go over to this next screen which doesn't exist but if it's no we're going to have them go here let me move these down there we go if it's no right here we're going to have them go to another screen so that will be a sign up screen and this is also coming from the ui stuff but in order to prevent this stuff from happening i'm going to create an artboard just down here and wherever it's selected there we go so now i can just move it there all right so here's the create an account section right here by the way something you can also do which can give it context as a part of your user flow you don't have to do this but you can we can go ahead and put a title and or a description so this is the home page the user clicks the join button in the navigation so it gives a little bit more context uh in each one of these scenarios so i could take choose your plan i will get that centered up all right so this page will present two different tiers for the design course subscriptions all right and then this one over here we'll have another one all right so the user creates an account a user uh user creates an account it will not require a double opt-in so if we required a person to check their email in the process of trying to become a paid member that's not a good idea in my opinion because you're adding in extra steps i worst case scenario they screw up their email they can contact you for support in order to change up their email or if they screw up their password so there's a lot of different ways we could deal with this you can maybe not even have them enter a password upon account creation you can include a link to where they click it and then they can choose their own password password after they've become a member so there's a million variables that's why the ux process is very important and thinking about this stuff up front before you put in a lot of work creating high fidelity mockups that it just makes a lot more sense this way right so let's go ahead um after they come here we'll have this go we'll have this little bit right here oh come on gary grab the damn thing there we go all right so from here let me move stuff i know i'm very anal about this stuff i want it to be lined correctly all right that's the ui designer i mean from here if they're logged in if they're not logged in either way it's going to go to the same page and that will be like a payment selection page so let me take another there we go payment selection and then finally i will put this down here so here's the payment selection so the user can select i between regular credit or debit cards or paypal and they'll process their payment so this is a very simple user flow that can help your team decide what is the best process you know what i think this one right here probably isn't the best process we can minimize this perhaps to just three screens we could take out this whole signup section and if a person is logged in then that's fine it won't have to modify this page at all but maybe if they are if they're not logged in if they don't have an account there could be a little section here at the top of the form that i will have them go ahead and log in uh or to just specify an email and that's the only field you would require and if they're not already a member the system would know the backend would know automatically to i send them an email to help them set up their account further after they become a paying member i think that would be the best bet and so there you that's the purpose of a user flow so your team can get together and say hey this doesn't make sense we don't need this page right here as a part of the the uh the sign up process we want as few steps as possible so that it doesn't nothing unnecessary happens uh that would result in the user just leaving and forgetting about uh doing anything so this is basically the uh the user flight process um that i've come up with here for just one example and yeah awesome stuff all right hopefully you enjoyed that and now you have a little bit uh more knowledge perhaps than before when it comes to the ux design process let me know what you think in the comments if you like this make sure to subscribe click click that new applause button too if you want to of course and check out designcourse.com enter your email for the relaunch and i'll see you guys soon goodbye [Music] you

Channel: DesignCourse

Views: 59,608

Keywords: user flow, ux user flow, ux design, user flow diagram, user flow tutorial, ux design tutorial, what is a user flow, what is a user flow diagram, ux flow, ix flow, gary simon, designcourse, user flow adobe xd, user flow figma

Id: 4uHxJMCzeGg

Length: 18min 6sec (1086 seconds)

Published: Thu Sep 24 2020