Creating User Flows with Overflow

[Music] welcome back everyone today we're going to be talking about user flows how i build them why i build them and i'm also going to be doing a quick demo of a product that my company uses which is called overflow and this video is not sponsored by them in any way but this is a tool that i use pretty frequently so i just wanted to give a candid review so let's get started so first of all what exactly is a user flow well it's a visualization of how your users navigate across your product to achieve a certain goal and it tracks all the different paths that they can take as well as any interactions that they might have along the way now as you're building these user flows you might find that users don't always start and end in the same path so for example a user might actually get to your products your website through a google search or it might be through clicking on an advertisement so their entry and exit points might vary my company creates user flows so that we can map out exactly how our users are interacting with our product along the way and it also helps us plan out which screens we would need to design and also you know it just helps us lay out the overall flow so that we have a visualization and can see whether or not you know there are certain points within the flow that can be simplified are there any uh steps that we can cut out along the way to make it easier for the user and it also acts as a point of reference and kind of like a guide for both our engineers and also our customer success teams like i said before today i'm going to be going over a piece of software that my company uses to build out these user flows but you can always just start off with pen and paper um i never never begin to draw any wireframes until i have a user flow down because i don't want to box myself into any ideas if i'm already you know thinking about how the overall screen is going to look then i'm not looking at it from a big picture perspective which is how does this one individual screen fit in with the overall process that a user is going through okay so let's get started with demoing overflow so like i mentioned before overflow is actually a software that you have to download onto your desktop and you can start for free i think they have like a 30-day trial um and it also works with xd sketch figma and photoshop which i'm going to go over later on and also runs on both macs and windows if you ask me one of the major downsides of overflow is definitely the fact that you need to download and install the software onto your machine whereas you know a lot of web apps today like figma they have a browser version where you can just start in one machine and then pick up where you left off in your work on a different machine and it's just a lot more flexible that way so i'm not too big of a fan of you know overflow having to have you download their desktop app every time so what i did is i created a flow map based on one of the projects that i had worked on during ux bootcamp and let me show you how it works within overflow [Music] all right zooming in so i always start off by building a key um so a key can be you know a page an action a decision point um you know kind of like what you see over here each one of these is indicated by a different shape or color and it just helps the viewer of your user flow map understand how to navigate through it overflow actually has a few shapes that you can choose from if you hit the plus icon and go into shapes there's a rectangle diamond and an oval now this might seem kind of limited a lot of its competitors actually have a huge huge pattern or shape library but i'm actually a fan of the fact that it's a little more limited because i feel like if you have 15 to 20 shapes on your user flow map it actually makes it way more confusing and difficult for someone to navigate through it so typically i just stay to a few shapes and just alter the colors a bit so in every flow map you want to start off with a user story which basically tells me what the end user is actually trying to achieve and what we're mapping so in this particular example my persona wants to sign up for a remote live stream workout class and she prefers to take a session taught by her regular gym instructor and wonders if she has any available so let's start off with the flow map at the beginning you see that the user is going to land on the live sessions page and you know that it's a page because of the key that we've already established over here so what i usually do is just copy and paste this and drag it on to the flow map somewhere wherever there's a page and at the top over here you can also again modify the styling of your shapes so for example if you go into shape properties you can change the radius of it the fill color border and also the weight of the border and even the line style even though you're somewhat limited by the number of shapes that are available you can certainly style it in such a way that they're distinguishable if i want to change any of the copy within my shapes it's pretty simple to do so all i got to do is tap into the shape double click and then i can even edit the font up here or the font weight the sizing padding letting text color quite a few options actually um so you know i want to change this to hello you can do so very easily probably doesn't come as a surprise but i can type a lot faster than i can write so i can speed up the process way more and you know be able to just throw some shapes against the board and try some things out and move connectors and shapes around you'll see that we have different arrows coming out of these shapes right so if you hover over any one of these shapes that you've created there are actually different points that you can drag out an arrow from so for example if i want to connect this shape with search bar i can do so here and then you can also just adjust these lines or these connectors however you want all right so i'm going to undo this and then you can also move it around and these connectors actually follow the shapes if you were to connect one decision point for example or any other shape you want you can also drag the arrow there and then if you double tap on the arrow you can add something else like do i want to search for a specific instructor yes or no right so this points me to different paths and um if i want to double click this yep so i can say no over here if i wanted to or i can type in anything else so yeah it's pretty flexible in that regards and you can even change some of these connectors and style them as well so if you want to modify the color the weight the start and end point arrows if you have been trying to build user flows with say sketch or figma you'll know that this is way easier you don't have to tediously draw in every single one of these arrows and connect them so one of the questions i get asked a lot is exactly how specific do i need to make my user flow map so i need to record every micro interaction let's take a look at an example and see how that works so over here you see that i have sign up as a user action but notice that i didn't go into detail about things like input email input password input first name last name those kind of things once we do drag in the high fidelity wireframes you'll see later on can kind of cover all of that think about what the person who is viewing your user flow is trying to accomplish you know do they really need to understand all the different input fields that they can put in are they just trying to understand how do i get from point a to point b and can you break it down in the simplest way possible how granular you want to get really depends on your project and your audience most of the time i would say just keep it simple and cover some of the major steps that the user is taking along the way usually i also put things that are happening concurrently on the same level so right over here um you see that you know after you've included your payment info or you know if you wish to donate or if you don't then you get a confirmation page and let's say you know at the same time that you are landing on this confirmation page you're also getting an email so something like that i would probably put right next to it and connect both of these points too so for example receive an email or receive a confirmation email so for something like this um because it's an external source it's technically not within your product i would probably include something separate uh in the key to indicate a different style for these external interactions again the purpose of a user flow map is to be able to lay out all the possible paths that your user can take but you definitely want it to be as clean as possible so that whoever is looking at it isn't going to get lost in all the lines so for example let's say here it says did i find any classes by my instructor if not then it goes back up to the live session and also here do i want to search for a specific instructor it's also no and it leads back to the same path so over here you see that these two paths are actually overlapping and part of the reason for that is just it's easier for your eye to follow this line back to live sessions and this one is going along the same route then say you know if i were to move this so if i were to click on this path hold on to this connector and drag it over to this side and maybe this connector i want to drag it on to that side so now i mean the person who's looking at your flow map has two different areas that they need to concentrate on so there's one path leading here and another path going this way and i mean they both go to live sessions anyway so yeah what i like to do is if there are two paths that have the same destination just allow them to overlap so that it's easier to guide the eye along the way one of the things that you can do in overflow to keep things more organized is tap into this thing called the boards panel alright so here you can create a new board or you can also right click on what you currently have and duplicate it usually i create multiple boards in one overflow file if i am able to fit them all in one category this way you know if i'm trying to pass along a file to someone to review they don't need to receive like 10 different overflow documents and i can just send them one with 10 different boards and this way you can also split your user flow into more digestible smaller segments instead of having a giant map even though overflow does provide you with an infinite canvas but again the purpose of a user flow map is to make it easy for whoever is looking at it to follow a path and understand you know what journey the user is taking splitting it into smaller chunks makes it a lot easier to follow i mean think about it if amazon only had one flow map and they tried to throw everything in there it's going to be a mess it's going to be chaotic and you're not going to be able to see for example how does a user reference orders that they've made in the past you know how do they check their orders and then you're going to have to sift through everything within the map to try to find that one interaction so break it down if you are able to so i indicated before that overflow integrates with figma sketch adobe xd and photoshop and that's actually one of the major major selling points of this product um and i'll admit that's a huge part of the reason why my team is using it because the final flow map just looks way better and adds a lot more context so let me show you what i mean over here i'm looking at my figma file now i already have the overflow plug-in installed but if you don't have it and you know you want to use it with overflow all you got to do is browse the plug-in in the community and look for it and then just install it so it's going to show up here and let's say i want to bring this board or this frame into my overflow so what i do is right click go to plugins go to overflow select it and over here i can even choose the export density so for example if i want it to be more high quality a larger file i can also do 3x and the pixel density is going to you know just increase if i want to keep the file size a bit smaller i could do 1x and all i have to do is tap sync to overflow [Music] alright so i already have some screens here but as you can see here i can select which file i want to sync it to and also which board within the file so i'm going to sync it here into overflow alright so again i've already brought this in before but one important thing to note is that the way that overflow integrates with figma and the way that it's able to detect which board to update is based on the name of your frame so over here it says search and um i just need to make sure that in my figma file i do not change this title or if i do change it there um then i also update it with an overflow so it's able to detect which one to sync up to you can see how having these screens on my flow map actually adds a lot more context so if i'm sharing this with a customer service rep or if i'm sharing this with someone from engineering i can show them exactly how the screen is supposed to look and which button they're supposed to click onto so for example over here you'll see that if i zoom in within figma i have these broken down into different components but overflow is actually able to pick up the layer and you know detect that this button is an individual element and you can connect it to the next screen in this way so pretty cool same thing with say the search bar yep over here or even the x icon typically you could use overflow for building prototypes as well but personally i still prefer figma because it's more tightly integrated with my actual design file so you know i usually just use overflow for a visualization of the flow map another great thing about being able to integrate directly with figma is that if i ever make any changes to this particular frame so maybe instead of search results i want to say results then all i have to do is edit the copy within my figma file and then just resync it to overflow and then it will update as long as the frame name is the same this really saves me a lot of time because instead of having to export a png or jpeg and drag it into my user flow map all i have to do is update everything in figma and it cuts out that extra step now the major major downside i would say is definitely the lack of collaboration as i mentioned before overflow is a desktop application so because it's not in the browser and you can't just sign in and update it along with someone else on your team it really makes real-time collaboration kind of impossible if i make any changes to my overflow flow map i have to push it to the cloud by clicking into this icon over here and creating a new share and then afterwards someone else who wants to pick up the file and edit it will have to download it from the cloud server onto their own machine and then repeat the process so this is really clunky and i hope that overflow is going to do something about this because the lack of real-time collaboration basically means that what i use these flow maps for is like a single source of truth to share with my other team members and it doesn't get updated quite as often now i've talked about the upsides and downsides of overflow you can decide for yourself if this is a tool that you would like to use but again you can always download a free trial just to play around with it a bit other tools that i would recommend are whimsical mirror lucidchart and also creately if you want to you know try out different resources for user flow maps and each of those have you know their own pros and cons but i would say that none of them as far as i know have this really really tight figma sketch adobe xd and photoshop integration which really makes overflow worth it to me just because like i said you know there's being able to have your final wireframes on this map provides so much context to anyone who's taking a look at this so i hope that gives you some good insight into how i use overflow with my team and also you know just how i usually build out these flow maps and what their purpose is let me know in the comments below how you like to build your flow maps even if it's just with pen and paper nothing wrong with that alright until next time bye you

Channel: paintpops

Views: 9,750

Keywords: ux design, user experience, user experience design, product design, overflow, user flows, product review, flow maps, user flow maps

Id: 3XfDaEeRXoI

Length: 20min 15sec (1215 seconds)

Published: Sat Mar 13 2021