UX Design: Crafting a Userflow with Psychology and Empathy

1. Introduction: Hi. My name is Chris Camerin, and I'm the lead instructor at the Awesome Design School. Here at the often design school, we focus on helping our students learn foundational you, um, skills and how to apply it to their projects. Today's class is focused on user flows. We're showing you everything from the initial concept ing I have. You go about doing it all the way to using our template to create a final user clothes. This class will be good for anyone who wants to learn more about you. I us and wants to build a foundational knowledge. You know, if you really want to get into yours or experience that user flow and figuring out what that user story journey is is super important. You guys kind of like the frosting on cookies. But if the cooking isn't based, right, it doesn't matter how much frosting you put on it. If cookie will still be bad. So the user experience really provides that foundation and those key ingredients to making a really great website app for any sort of experience. Come along with us for the right 2. Project: Designing a user flow : now we're gonna be talking about the specifics of the user flow will be making today, argues Airflow, is going to be about the on boarding process of a mobile application similar to pager or uber. You know, we're going to trying to bring patients and doctors together, or, in Deuba's case, drivers and people who need cars together. Now the components of the usual flow that will be talking about today could be applied to everything from mobile applications toe websites to other user experiences. The count of the user flow contained pages, actions, inputs and outputs and users. So you have a specific user like a patient versus a driver or a patient versus the doctor. So paydays, for example, are those screens on on the on boarding process that will be showing the splash screen, the first sign up page filling in your name, etcetera. The inputs are going to be no, those decisions like you have to put in your first name. We have to put in your last thing. You have to put in your email address really diving deep into those type of experiences. Then the actions are gonna be those things that you know a user has a choice that they have to make. So when, for example, with our own boarding process will see that there'll be a will be a point on one that pages where the user has the ability to choose whether to log in or a sign up, and that then determines the rest of their flow When you're making the user flow, you're really have to be empathetic about it because you're trying to put yourself into that person shoes and walking them through the process, meaning that what is their user story? We're gonna be talking about things like, you know, where they experience in this point. What are they thinking about here? What are they going to be doing at this decision point where they're gonna be doing when they're putting in this input? Are we having too many inputs of front in this on boarding process and should have it later in the application? There's a types of questions that will be looking thinking about working with when we're making this user flow and important because that abuser story, what that is, will help drive how they experience the app we want to make sure that the usual flow is the best possible thing for there for the users to experience, Let's get started. 3. Gathering Materials: for this next part of the lesson. I'm gonna be talking to you about two main things. One how to sketch out your ideas on to begin the process of learning what to dio And then how to apply your sketches and your initial writings to the template will be going over each of those two things. Let's get started with that. So when we first start off here, there's a couple things to consider. The first thing is defining. Okay, Who for? Your user flow on boarding? Okay, who is your user? In our case, you know, we're gonna be focusing on a user who's going Teoh someone who's looking for a driver, someone who is a patient, someone who's looking for services so user looking for servicers. And for the for the point of this lesson, let's be very specific with that and say they're looking for physical trainers slash gyms. Okay, so what that helps us to do is that we just defined hey, dear people who are looking physical trainers looking for a really specific skill set, but also tells us that you have to talk to us about couple of things. For example, we gotta know their name, their email. We'll have set a password. They'll have to set up. You know what their skill level is? What are they? What kind of experience are they looking for? What kind of activity? We have exercise, sirs eyes and what is their trainer? Preference. Now we need all this information to help match these users looking for services with our trainers, the providers of those services. So what this helps us to do by riding this out, giving it in, sketching it out. It gives us the opportunity to think about what? What could be some possible pain points or where some things are super important. And knowing this on boarding process? No. Where for email and password. Other two things will need to accept their account. Then name helps to establish a personal, friendly dialogue throughout the entirety of the process. The skill level is super important because that helps us determine not only for themselves but also for the trainers. What are they looking for? What level are they looking for? What kind of exercise that can vary from? You know I want to more cardio. I want to do more running. I want to do more biking. I wanted to swimming. I wanted to weightlifting. That's super important as well. And then what is the trainer preference? Are they expecting someone who's been a drill sergeant? Expensive ones a little bit more laid back? You know that asking those questions early on helps provide a better user experience toe when they're using art our services or using the app to find that really great trainer. So there is the critical sketches for that? No. And if we're doing the user flow for the entire to the APP, we'll be talking about a couple. Other things will be talking not only about the user looking for services, but also what's important is the trainer flow. Okay, and after the user on boarding float, have the user set up a new appointment. Now these two are some. He flows as well, because this defines people, define the people who are providing the services and the users set up of a new import appointment is when they're coming back into the APP. What is that like, Where is that going? So let's dive into the user flow template that we've provide in the information below and we'll just get started with that. I'll walk you through it. Let's get started talking about our template that will be using today that we provide in in in the class information. I knew that we have the page information here, and that's really about talking about, you know, where the particular screens or events that we're gonna be happening. Splash screen. The welcome screen, etcetera. We had the decision, you know, symbol here, which allows us to find what are the different symbols? What we might be using this sign up a lock in something like that. Input output, you know, putting in particular inputs or outputs like first name, last name, all that kind of stuff and then the user. Which years are we talking about? We're talking about the trainer. We're talking about the person looking for exercise where we're going with that. And then finally, the connector arrow help getting a kind of visual cue of how where everything goes. Let's move on, For example, we have for you today. In this example, we kind of want to break it down a couple different ways. We have the user, the splash page, the welcome page, the sign up or log in information here. And that decision, you know, breaks off in a two particular past. The log in just a path were the input, email and password and the sign up. Email password, sign up. Made a name and age sent birthday. Now, these are just examples, but we're going to be using this as a structure for when we make the one for our application today. Cool, Let's get started. 4. Sketching out the flow: So now we're gonna actually start putting some pen to paper and you start making this flow and kind of giving a little bit a little bit of structure. Now you can follow along with, you know, the idea that I'm working on here or you can apply to the concepts to your own app or your own website experience. Let's get started with that. So, as you can see the first time when I start with who is the user So when draw the little user icon that we talked about from before, Okay, just to establish in my sketches who were talking about this is someone who wants to train like a training in this sense. Okay, the first thing that we'll see when they open up the application that I imagine is the splash page. So splash. You know, this is an opportunity to put like your logo. It's an opportunity. You kind of have that loading period there. So just adding a little bit of Eros, we get the idea of the of the flow of it all. After that, we have the first welcome page will have content such as, you know, welcome to the app. Please sign in. So welcome. Okay, this is where we'll have our first main major decision. And that's gonna be the log in. Sign up. So we're going to use our lovely square. Go sign in, log in, pull that out in two different directions. Okay? We have the log in here. Some inputs that will be in part, and it will be inside of this. It's going to be the 1st 1 is like gonna be email and password. After you fill that out, it's gonna take him at the very last step to the home page. No, this will be our dashboard. Maybe that that place on the application where they're going to find trainers or pick see their appointments, all that possibility. Now, let's dive into what this on boring over here is gonna talk about and I'm gonna dress. I'm wearing a little bit more room for this. So just right now, I'm gonna be Here's a little box next page. Let's check it out. So the first thing we're gonna want No for re tile. This is the on boarding user flow. First contact we need is their email, their email and password. So sign up. They have email and password. Okay, so those will be the two inputs. And so for right now over here that have two inputs, huh? From there, we're gonna need a couple other things. So I think an important part of this on the next page will be a couple more inputs. Let's go. Our first one's gonna be like, there waits for the hype, for example, our next one is going to be their weight. And then finally, here it's gonna be a birthdate. No, these are all things that day of birth GOP. So this is gonna be said some general information about them. I have established a baseline of who they are, and I'm gonna flip back to this and see OK, name, email, password, oak skill level. Let's talk about school level next. Okay. The pages about skill level. Okay. So what does that mean? So I think there'll be a couple different options they can choose from, you know, I'm imagining. Will have, huh? You know, we're gonna have, like, beginner and her immediate in the advanced, But how can we show that this is an opportunity that I think we'll have a interactive element and her element. And maybe, you know, it's something that it's a dialogue. So as a dial. No, I'm not putting this in any sort of the boxes or the input things that we've been talking about before because this was just a night. This is an idea. I think we'll use the skill level and how that will be portrayed later on process, because I'm already going to think about, you know, where is this going to go and then what's going to happen now? It's flipped back again. We have what kind of exercise? So I think that one next, what kind of exercise, you know And right now, keep it really simple and put cardio water and then lifting now, depending on what we what we know, depending on as we continue to build the app, this might be an opportunity to look a grid of icons where we have multiple palms with different options. And, you know, this is just the sketching. So we want we only get into every single possibility, but we're just finding a general sense of what it could turn into. And then what is their trainer? Preference trainer Preference for there we could have gender and then like intensity. Now, as you can see, I quickly was sketching this out because what's really important is just getting all these ideas out there and getting it into some sort of paper into some sort of flow that allows you to be like, All right, let's walk myself through this and see how it goes. I could review it, but okay, Trainer, Splash page, welcome case or any and the opportunity here is sign up in log in. Is this something that I should have as a Facebook log in? Should have a Twitter connect. Is there a social media log in Idea? Is there? I know, but this is that this is the point was to ask these questions because if you're already in wire frames or you're already in high fidelity in lockups, then you're so far beyond that because that this idea changes the development changes the user experience because if they do a Facebook log in, for example, they'll be taking out of the app and then brought back into the app. They want to make sure you know exactly what the user is doing. So you can optimize for their experience. So that's just one thing here. No Senate log in email password. That makes sense. We'll see the next page for that. In the homepage, that all seems pretty straightforward. We have our lovely will Arrows here. That kind of show the possibilities of what could happen. Perfect. Now this next page, You know, we have the two options, you know, for email and password. I think that's a great way to start. Oh, I'm looking at this now. I forgot their names. So this is where you could be. Like whom? Okay, Weren't I put their name? I think their names should go here inside this first sign of where it goes name and then email and password. So that's the beauty of the sketching is that you could go back, add additional content, see where you're missing stuff, height, weight, date of birth. For general information. That was great. Skill level beginner, intermediate, advanced, integrate with starting at, you know, maybe it's a dial and see how that works. And then doing the cardio water lifting. I know the more, but I think that kind of gets the general idea. And the trainer preference. Oh, you know, what I forgot is that before we get so home page, which you have a thank you page? No, thank you for signing up. So that's a really simple way to add data in our next video will be taking all of this and bring it onto the computer. 5. Designing the user flow: Now that we've create all of these really great sketches, we've, you know, base kind of roughed up the user flow. We talked about a little bit about the user user story or the user what they're going through. And we've definitely went through the on boarding process. Now what we're going to do is we're going to take all of that and apply it using the template. So as you can see, we are a copy and paste copy and pasted dartboard. We're start with the new one here. So we have the training here. As there are User, we have the splash page, which is what something we already talked about are Welcome page. Now we had talked about in our sketching over here that talk with Social Media Log in idea . We don't need to incorporate that into the user four right now, because that doesn't it's not. It's a non decision. It's something that we have to decide overall perspective of. That's something that's valuable or not. But for simplicity's sake, we're gonna leave that to the side. So we have a sign up or log in No decision. So let me now, crab, All right, input outputs from our symbol key. Copy that. Bring that right over. I'm holding down the altar. Hate a copy. It is that simple and easy. Let's bring this up. So it's on top of all this now for this process. I had written us to help explain it to explain the on boarding information. So now you can delete that and bring pull that away so less Now, bring make this a bit smaller. So it fits on the screen. It fits within our user flow. And like we talked about here really bringing out the inputs on this on this right hand side that's gonna ask Force estimable this over, though. Time log in and put is going to be e mail and points all the front. So we have email here. Password Perfect. So we have email list in a password. Okay. We're gonna connect all this together so we know that this is attached to this. Had it matched the styling that we've been using on the other stuff on. Well, cool. So those are those two things. Get rid of all this information we have here. Now. We've done that. We've completed this part of the flow goes, All this build is straight back into the home page. Now we can deal with enough stuff. Our necks papers are on boarding user flow. So So you're a little more room here. We're gonna do the sign up proportion of it now. So we talk about our first thing. We're talking email and password or as part of their informations. Let's pull this over copying pistol here. So the reason why I'm doing this in the reason why I'm not like, uh, being with a real stickler about consistent about the having everything with the same size , because what's important is that you get all of the right things there, and at the end, when we review it, is when you can try toe, find the best ways of making it consistent. But right now we just want to make sure we get all of our content, all of our interactions, that we want to do all the really meaty information in here. This is also an opportunity feared for you to decide. You know what size are what order is always gonna go into, you know? Is it going to be named email? Password is gonna be a password is an email password. Name. You know, in this instance, I think would be really good if we did name email passwords. Let's make sweets. Those three main things that we're doing for first page of our Senate form. Let's move on to the next one, which we talked about here is general information. So as you could see, you know, I feel like we're a little bit tight here for some of this. So because thankfully it's in, Illustrator could easily move all this around and get it to the exact perfect sizing for what we need to be. And the reason why we do this is important is because you're flows for your APS specific to yours to what you're doing. And so the beauty of it doing ill shares at all modular. You can change. Everything can move things around. And that's and that's gonna be essential of keeping all of your information organized. So our next one is gonna be height, height, weight and date of birth, huh? As you can see now, we're getting into it to a point where a lot of things that we're having here, so like we gotta find something. The exclusions for that. We're doing that by just moving some of the land. I'm gonna title this. Don't want information, general information. And this includes all right, where it and it deal be your date of birth. GOP moves back up to 12 the rest of them. So no, they will move on to, um, skill level scalable, super important for the school. Only have three main things that will be doing beginner intermediates danced, and we'll just be adjusting that. So our information is clear. Cool. There ago. Then after that, we have what kind of exercise, And you can see our you know, that we have to do our trainer preference. And thank you. So let's do this and make our world a little bit bigger that we could do that. Sign up trainer preferences. Thank you, Bone. Cool. Now also, I'm feeling this needs to be just this little bit just to give it some breathing space because, you know, this is a really important document because no one gets you on the same page it gets. It helps communicate day dia to developers, to a client, to your teammates. That way, everyone's working from the same document and is going through the usual flow with the exact same way. So that's also something to keep in mind. How do you not only create a good user experience for your users, but also good user experience for everyone else is gonna be viewing this document. No, that's why we picked certain decisions and just, you know, done it from there. Okay, What kind of exercise? This out here? Boom. Just like that. Said Mr Path as you didn t. I'm putting stuff up a Zycie problems just to make sure that we are always improving. What? What is what we're working on to make sure that we're communicating all the right stuff to everyone. What kind of exercise? What we talked about before. The cardio water lifting different inputs. Trainer preferences. Let's add those in nest. Some of copying was the same stuff we have from other places. Boom training, preference. We have gender in the intensity intensity. Okay, sweet. We now have all of our stuff that we talked about. Here are sketches in some store capacity here on our digital template. In our next lesson will be talking about reviewing this scene where possible pain points are. See where the possible ways of improving the information we're displaying here and taking it to that very next step. So look for talking to you about that. 6. Reviewing the flow: next up, we're going to be refining their use of flow, kind of looking at it for a couple of main things. Work me and the light for our users. Where can where is there confusion or pain points in our presentation of it, or even in the user flow or experience of it? And then how could we know pretty this up First, allies this and organize it that way. It works much better, so let's just dive into it. Let's start the beginning. Let's look at exactly what we're are beginning over. Use your flows. Let's zoom in on that. As you can see, we have to Trainee Splash, Welcome. All that stuff seems pretty well organized. Pretty simple. Log in pretty simple, but as you can see the sign up general information, skill level exercise. It's a little messi. So let's no, I'm gonna work on this for a minute and clean all that up and then we'll get into the delight and stuff. So just give me a minute. When does I'm going to try to do is that to make some of this consistent is to kind of bring all the con, all the inputs and kind of have them kind of Mawr aligned and kind of see it. I can fit them on the right hand side. Here's let's get this to work Kind of make all this a little bit more organized. - Perfect . So there you go. Now we have cleaned up all of that, so it's a little more control, and you can see we have the column over here in a common were there to kind of break that allows. So it's very easy to understand. Now we're going to kind of walk through the idea of Are we asking the right questions? We re asking the right type of information because it's not just about okay, we're organizing it. We're putting information about it. It's putting yourself in the in the situation of the user and thinking. Is this the type of information that I would want to be asked or some of that wanna be asked later or have a different interaction with? So, for the sign up process, you know the name Iman password that seems very standard. That's very that's very was best practices people usually what people would reduce. That makes sense, and people don't people have a tendency to get out the information easily. The general information, the height, the way, the date of birth. This is a point where we're actions, more app, specific information because we'd high read weight and date birth, given understanding of what the physical fitness is like with their body weight. No proportions are all that jazz and, you know, even thinking about that from a user experience. Well, maybe a line of poppy here, the top be a good opportunity to explain why we're asking these questions. That could be a good way of solving that problem. The skill level beginner, intermediate, advanced kind of thinking about. Maybe this is interactive element. It's something else. Sign up. What kind of exercise? Cardio water and lift. You know, that was a good three standard for right now. And as we continue to develop, the apple will be like, Well, when I add this, we want to add that, and that's where kind of your user stories, or even talking to trainers talking to people who are looking for it. What are the things that they're looking for? Are they looking for lifting, looking for water aerobics, looking for Yoda looking for plot ease for, you know, biking classes. All of that you can start to integrate into their by talking to your potential user base by understanding your users mawr and giving them that development information right there. Trainer preference, gender. Have a gender preference? I intensity drill Sergeant Teoh. You know something else just having that, giving them those opportunities and what this does. This this gives us a better understanding of what they'll be going through. So is that if there's any point here, we think we're asking too much information. Like for example, um, if we're not asking for credit card information here, because that's something that I think Way would want to do during appointment flow of the app. That way, once they decide to make an appointment with a tender, they then plot a credit card that can save into the system. Or they can. You know, here's a different one for deployment. That's up to them. But it was here in this beginning, on boarding. It might overwhelm them. We don't want overwhelm them. We want to give him a seamless experience that gives us the information we need but doesn't sacrifice on people dropping off, having it be too complex. And, as you can see here, the majority of our set there are three main things. No name. Email, password, height, weight, date of birth, beginner, intermediate advanced cardio water left gender and intensity as the really glommed together in particular categories. Now one could argue that height and weight should be one page and data birth should be another. That turned gets into a possibility of life. Is that worth an additional page? Is the value that you're getting from having date of birth their on its own page, whether it's scroll wheel, whether it's some sort of other interaction, does that improve the user experience or doesn't detract from the user experience? And that's the kind of things that we're talking about in this beginning part. No. And one more thing that we want that we want to take the opportunity to look at, especially right here, is where can we add delight? Wouldn't like a fun little moment or something that encourages them to finish the app or finishing on boarding process. That's what I was talking about before. When we're asking about general information, we could add some writing a little bit of tax that might help them the scroll wheel or the wheel that helps them pick what level they are. That could be a little bit of a fun thing. Your just thinking about what is that you can add that little bit of delight or an empathetic note to it. The reason why we're doing this. The reason we're asking these questions where we're thinking about these things in this point in this early stage is because by doing that, you're saying that foundation and you're getting all the information out there you're communicating to their clients are communicating it to your developers are communicating it to your teammates. That helps true to allow all the stakeholders to refine and refined all the best things about the apt to make a truly amazing experience. 7. Advice: Now that we're afraid our years of flow and we refined it, we've thought about it. We thought about pain points. We thought about really great opportunities for really interesting interactive content. You know, we have to think about how do we communicate that? Because we have this great document we have to communicate to our team members. We can pass that around. We have a meeting about it. We have to communicate to our clients. I person recommend that whenever I'm communicating, usually flows to a client is to send in the document and then walk them through. It really explained to them the user story, explaining to the importance what we're doing and then walk them through it and be like, Here's this opportunity and this opportunity. And this page does this because that helps you get there thinking along the same path. And they can really bring in some important insights that will shift how the APP is being developed or the website or the experience, you know, and also sending this to your developers early on is important because it helps giving them romantic road map as well, because they can start organizing some sample pages they can start making a flow in their tools instead of interactive content. No, in this case, this is a really great communication tool. I really want to highlight the this. Like I said, that in your duck Sharia video we're building the cookie were baking the cookies so you really bake the cookie, right? For for to be able to put that amazing frosting on top of it by taking the time, putting in the effort and not brushing to the user flow that allows for you to have a solid , foundational user experience. You know that foundations what everything else is gonna build upon the wire frames, the copyrighting, the animations, the sounds, the colors that typography all of that builds on on top of this initial stop processed in this initial user flow. So it's important that we do this right the first time and get the buy off all the stakeholders involved now to help get this part of this process nimble, we provide the template which is available below or available in the class notes, allowing you to build your own user flows, follow along with us etcetera, and we kept it nimble because it's just easy. Dragon drop herbal. You know, different icon, different shapes. And I wanted to change things, move things and really customize it for your needs. Now that we've gone through the importance of the years, airflow be important to the refinement, the importance of communicating effectively to your coworkers, clients and the developers. And we've talked about how this is a foundational piece of the of the overall user experience. By doing this well, everything else from wire frames to the U I would build on top of it. Thank you for watching and participating with us on this journey and our very first skill share. Our next and final video will wrap all this up into a nice, pretty bow. 8. Final: So as you were falling along, maybe we're making your own years. Air flows falling are on boarding example. Maybe you were making use of flow for own user experience. Project would really love to see them. Well, to see them, we left a comment about them. Let it interact with them, you know, uses as a sounding board of, like, how do I, you know, deal with this? You are this US problem. How do I deal with this year s problem or that your ex problem? We would love to help. Now, if any a part of this seems overwhelming or you feel you've gotten stuck in some capacity, don't worry. No one in doubt. Just ask yourself the question. Well, what the user want here or what I think the views would want here, where we even ask a potential user for your user experience of what they would think buying snowballing that by taking that one step all slowly comes together. Because the beauty of this is that you take it one step at a time. One interaction, one page one input and think about. You know what would be the best way of doing that? we look forward to seem or more of the stuff below and see your own interpretation of it. You know, it's the beauty of skill share. It helps keep us all accountable to be able to interact and show off our work in this really great way. So thank you again. I look forward to seeing you on our next class.