From the course: UXPin for UX Design

Create user flow diagrams - UXPin Tutorial

From the course: UXPin for UX Design

Start my 1-month free trial

Create user flow diagrams

- Most user experience design projects start out with a rather lengthy planning session where all of the aspects of the project are thoroughly discussed and agreed to with the team. Inevitably, the project winds up with a, what does it look like, discussion. And that also involves, what do the various screens look like and what screens will be involved. In many cases, these screens are represented, initially, by post-it notes on a wall, which can be easily rearranged to represent a more logical flow of a user moving through the project. Eventually, a more permanent record of the wall will need to be created. And this usually involves the creation of a user flow diagram. This diagram is the path taken by a prototypical user on a website or app to complete a certain task. The user flow takes them from their entry point, through a set of steps towards a successful outcome and final action, such as arriving on a landing page. UXPin contains a feature that lets you quickly create a user flow. And this exercise, I'm going to create a very basic user flow showing how a user gets from the start page to a landing page. And what I have open here is that very simple user flow. Now user flow can be found right here, in the design system libraries. And if you open them up, it's right there, user flow. And what it's got, are all of the little bits and pieces that you would use to create a logical user flow. Now the first component I used is right here at the start, is a label with a stroke. So I'm just going to add it. You can see, there it is. And I double-click the text, and type in the word start. And then I just select the box itself, and I can just round-off the corners to say 25, and you can see that's the way it works. And I can even reduce the height, so it kind of looks like a button. So we'll take the height down to say, 45 pixels. Now when the start is initiated, usually by tapping or clicking on the app icon, the first question or screen will ask, "Is this a new user?" And that is this item right here. And all it is, is again another one of these blocks, only I rotated it 45 degrees. If they are a new user, they're not going to be taken directly to the user page. And that will show with this little error here. Which is nothing more than the error icon block that I added here. So they're going to have to come from here and they're going to have to come down here, which says, "Okay fine, they are a new user, and they're going to have to sign-up, go through the onboarding sequence before they land at the landing page." Now I've added a couple little things in here just to help me along. And these are the arrows. And the arrows are just right up here at the top. So as I move from sequence to sequence, I can just add them, just like that. Adjust their thickness and their color, and I can even rotate them, and make them bigger, longer, whatever. And then when you're finished with them, you can just select them and delete them. Now this little icon here, is good ol' success and you probably saw it right here. Only all I did was just round-off the corners. Now the arrows, they just indicate the paths, that's all. And there're the flow lines and as you saw, there are just a ton of them up here. And as you saw it also, they're all editable. Finally, this is a very simplistic user flow diagram. These things, depending on the scope of the project, can become very complex, very quickly. Still, they provide the team with a permanent record of how an actual human will move through the project. And this way, the project switches its focus to the user and what he or she needs to get done and how to deliver that in the most effective manner possible. At this point, then you are free to ask the really important question, "What does this thing all look like?"

Contents