UX Design - Developing User Experience: Design a User Flow! | Martina Sartor | Skillshare

UX Design - Developing User Experience: Design a User Flow!

Martina Sartor, UX/UI Design Director | UI Mentor

UX Design - Developing User Experience: Design a User Flow!

Martina Sartor, UX/UI Design Director | UI Mentor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (1h 22m)
    • 1. Intro - Welcome to the Class

    • 2. Class Project

    • 3. The User Flow in the UX Process

    • 4. User Journey vs User Flow

    • 5. User Journey vs User Flow - An Example

    • 6. Analyse Your Data

    • 7. Analyse Your Data Example - User Journey

    • 8. Analyse Your Data Example - Web Map

    • 9. Analyse Your Data Example - List of Pages

    • 10. Analyse Your Data Example - No data

    • 11. Consider All Users

    • 12. Consider All Users - An Example

    • 13. Consider the Product Goal

    • 14. Consider the Product Goal - An Example

    • 15. Software Choice

    • 16. Design a User Flow - Getting Started

    • 17. Design a User Flow - Identify the Nodes of the Flow

    • 18. Design a User Flow - Create and Style the Nodes

    • 19. Design a User Flow - Link the Nodes

    • 20. Design a User Flow - Define a Navigation Area

    • 21. Design a User Flow - Create a Key

    • 22. Design a User Flow - Complete the Flow

    • 23. Create Interactions - Link the Key

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This class will teach you how to design a great user flow document from start to finish. The benefits of a good designed user flow are many. It will help to better plan the user experience and wireframe design; It is a great support for the designers that will have to produce the UI and it is also a great tool to be available for the developers which will have to code the final app or website.

Good user flows are also a great added value for the client which will be able to see their content organized more clearly.

For this course you will need to have basic knowledge of design software such as Sketch, Illustrator or any other vector design software you have available.

In this course I will also cover the difference between user journey and user flow and where the user flow sits in the user experience design process.

Meet Your Teacher

Teacher Profile Image

Martina Sartor

UX/UI Design Director | UI Mentor


I am a UX/UI Design Director expert in remote work. 

I have over 10 years of design experience from seed idea to strategy, design direction and hands-on final product delivery.

During the years I have worked with some great clients and agencies such as Mastercard, Capital One, AXA, Mercedes, HSBC and many more, but I have also collaborated with smaller companies and start ups to help them push their products to the next level.

I am also a Toptal member. Toptal is an exclusive network of the top 3% freelance designers, software developers, finance experts, product managers, and project managers in the world.

I teach classes about UX and UI here on skillshare, I also mentor design students as I love to share my knowledge of the industry... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Intro - Welcome to the Class: in this class, you will learn how to design a user flow from scratch. We will also focus on the logic behind the design of the use of, such as the importance to guard the user toe oppressed, ablest school. I am a freelance Texan rider with over 10 years of experience, working drink clients and agencies. This subject in disgust for students that want to learn to dishonor. I will sketch during Melissa, but you can simply follow along if you know, knowledgeable, softer or use any other factor. Softer if you wish to submit your project discussed should be interesting for people started to look into the nexus and process, as well as UX designers who want to improve the user flow. Visual presentations. There are a number of benefits design you would provide your designers and developers with A through the reluctant to better understand project. Facilitating the interaction between you will also get the crime on easy to understand that they will show the full of view off the project. After completing class, you will be able to decide complete is oclock and presently in official appealing way. You will also get enough knowledge to fully understand where the user go fits in the user experience. So please call of my classes, make sure use of meat and share your project, and we're ready to get started. 2. Class Project: the project I'm going to ask you to submit to this class is going to be based on what you will learn in discourse. By the end of the class, you will be able to design a complete is airflow for yours or your clients product. I will ask you to design a user flow for a restaurant business up. The user you're designing for will be a potential client of the restaurant. Now remember where you will learn in this class and make sure you push the brief. I'm giving you this further as you can. Don't forget to submit your project and share with the community. This is the best way to get real feedback any proof of yourself? 3. The User Flow in the UX Process: first, let's see where the user floor seats in a new explosive. We can generically divide the U X process into five major steps. Personas and scenarios, user journey, user flow, wire frames and prototype. If you're not familiar with them, let me quickly give you nobility steps. But each one of them will be explained in their own separate class With their personas will indicate imaginary characters and situations, which we want to represent the potential users. Alvaro. They are oppressed. Identify the ways users will interact with our products. The user journey is a detail mark of the complete experience to the users before, after and while interacting with our product. It is based on the information gained from the study of the personas and scenarios. The user flow, which is the topic of discourse, is the interaction button of the user. With our product completely marked out. The wire frames are skeletal layouts of the pages. They're going to compose our products. You can see I would be there to define. This page is if we have a market, them, which is in fact a user. And finally, the prototype is what brings all the wire friends together to create an interactive experience off our product. 4. User Journey vs User Flow: Let's not have a quick look at the difference between user journey and user flow. These are true terms, often confused and mixed with each other. There's a journey expressed how the user is going or could potentially use the product, highlighting a syriza factor. For example, the emotional state of the user. The user journey focused on the complete process that the user does with the product before , during and after. There's airflow is a visualization of all the possible parts did the user takes while interacting with the up. It can become very complex. With a huge number of nodes, loops and links. It will show every possible interaction within the product from all the user perspective. 5. User Journey vs User Flow - An Example: Let's try to understand the difference between user journey and use the flow better by using an example. Let's imagine we're creating a user journey and a user flow for a very basic and simple act toward their food delivery. They is a journey for these up. We'll only highlight the steps that the user takes on his journey from the side, anyone's food to his decision to order food. We're not going to take into consideration any other element of a classic user journey. For now, just a simple list of auction toe help us understand our user journey structure. So in this case, the user takes the phone downloads. The up search for take away makes an order. I waits for delivery. Any checks, the delivery time. This last action can also be seen as the user closes the up. Then, after a period of time, opens it again in check the delivery status. The user journey shows all the possible action over user before and after every news. The up let's not take a look at a very simple Alina user flow for the same up, keep him under the user flow only shows the interaction within the up. In this case, the user would be presented with a loading screen. You will then see a search screen than a results screen in a restaurant. Many screen, then a payment details screen in front of the information screen. The user flow shows the part of the user will take when using the up. So as you can see, the difference between the truth is very clear. You will use a user journey to analyze the status of a user when interacting with your product, and you will use a user flow to visualize the part of the user within your product. 6. Analyse Your Data: Let's spend some time now to go through the most common way. So we received or produced a date at two years in your user flow. You could receive a user journey or more to police their journeys. You could be supplied with a weapon up. You could simply get a list of pages from your client and in the worst situation. But believe me, it does happen more times that we would like to believe it does. We may receive no data at all about the content of our product. There's a journey is the best possible. Not here you can receive. In this case, it could come from some other UX designers senior team, or it could have been made by yourself previously. A user journey is especially helpful when starting to design a user flow as it will outline all the possible actions that users off the product is going to take. It is very easy this point to separate the notes and link them in a user flow. The world map is another good source of data for you user flow, but if it's coming from the client, it could potentially not be completely accurate. It's the climb may no have included hold. The possible user goals in actions for this reason is his worth. To spend some time analyzing all the goals. A list of desired pages is going to require some work from you. You will have to organized them into a Web map, so they will be easier to understand the structure and find out what's potentially missing and finally, the no data case. This is when your client is probably a very small business and have no intention of spending budget on the U X face of the design process. We will see later where you can do in this case. 7. Analyse Your Data Example - User Journey: Let's are working with an example from now on, which will help us understand better each step they were going to take. Let's imagine we have a client there, has a hotel booking business and wants to create an up for it if the initial data we receive is a user journey, and we imagine that is a very simple and leaner journey. The outlines what's happening. The user heads when, before and after is ready to use the up. We can consider the following steps. The user wants to go on holiday, so downloads the booking up. He started research for a room. He browsed the results. Any finally finds a place is interesting, too. So he selected hotel and makes a reservation for a room in the hotel. He can manage the book in any finally goes on holiday. This is a very simple and basic user journey that we're going to use only for the purpose of creating some data for ourselves and our users from doesn't want to be. It'll complete user journey. Make sure you follow a class or now to create is a journeys. If you're interested to learn how to create a complete one 8. Analyse Your Data Example - Web Map: If we receive a one month from our client, this will likely be a list of pages organized with some books in a row, they indicate. Are the pager linked to each other? If we consider booking up example, and keep in mind that we are creating a very simple and basic up, we could have the following Structure on on Page, which will feature three pages. Want to bring the user to book a room, page one to the user to view their booking and one for the Contact Us page and under booking page. As to sub pages? Want to edit the book in and want to cancel the booking? We can immediately notice other pages are linked to each other, and we can also start noticing if there are any pages missing. This is something quite common. Were receiving a brief from a client, and not because they're not competent sometimes, but probably because they have sent your rush version or what they want and expects to is that it's honor. 12. The mouth. This is up to you through a different approaches you can take with a client. It depends how you feel. What are you Morris is a designer and mainly were. Your rate is. Some people prefer to push the client and ask them to send more detail informations, more complete ones. I personally prefer to meet with a client over the phone or in person in organized a workshop. If they have the time in budget. This will help you to understand their needs, which is essential if you want to gather more information and build a more complete wet month. 9. Analyse Your Data Example - List of Pages: the case for your client only shares with your list of pages that they want is going to be the most time consuming for you. A list of pages could look like this, and in this case you will have to be drawn Web map. And it would be good practice to meet with the client and have some workshop in meetings to get a better understanding of their product. Similar research about competitors could also be beneficial to start sharing and brainstorming some ideas. 10. Analyse Your Data Example - No data: in the case where you have received no data from a client you can perceived in different ways, depending on the reason why you could be in the case, where your client is looking to start a brand new product and contract with you. And it's no idea of the design processing Bold in this case, spent some time to appear client. To understand the benefits of a complete your ex process they for starting the design of their side. So maybe try and suggest to ever work with them to get the conversation started and at the march on the standard books practice. If you're in the case where the client is no interest in spending budget on the U X process , make sure explained the benefits to them. This is I'm suddenly a more common than not scenario. Lots of crying that I have worked with have no idea about brief designers. They sometimes have ideas in their head about what they want but are unable to communicate them with you. It can be a very difficult situation to be, and we require a lot of work and effort from your part to understand their product. You can start by making some research on their competitors and propose a workshop. Show them a weapon up there you have drafted and take it from there. Another option is definitely to ask your client for use a journeys and page list. It is not uncommon for a client toe actually have this material on their hand, but not be aware of the importance of it some other time, and it does happen. They just want to see what your ideas will be for the side structure the actually will take from here. We probably depend from your contract type and the type available. If if you're comfortable to start the year, expresses with a client from scratch, definitely go free. Alternatively, you can try and us for material or suggest to higher, especially Stewart's designer. 11. Consider All Users: Let's not talk about the user Sweeney to consider when designing a user flow. There are many type of users. They interact with website in ups every day, and I use the flow must include all of them. If you have been provided, we use their journeys. It would be very easy to understand how many and what type of users. So we need to design your user flow for the user journey is very helpful because the outlines sold the type of interaction, the different things that may take on your website. Different user could or could not share the same user flow. For example, analyzing two different user journeys could show the cheese There are taking different parts to reach the same objective. This means that you have two ways of reaching the same goal and this need to show it's two separate parts of the same user flow. But if you have to, users that use the same product in chief complaint different ways with different pages than never interconnect with each other. You might want to consider to create two separate flows for the shooting. For instance, of user, let's try to understand this better with an example 12. Consider All Users - An Example: Let's consider our hotel booking up again if we received the user journey before starting our user flow design, we won't know that there are different type of user interacting with the up. Some of them have little in common with the users we have considered when analyzing our that earlier. An example could be the hotel owner doodle owner is someone arrested is going to utilize the up and the way they're doing it is by uploading information about their facilities so that the other user can rent them. The journey for this type of user will be very different from the previously examine type of user. Let's imagine again, we're only considering a very simple user journey for the purpose to create a some later, the use of journey for Dotel owner would look like thes. You tell owner as an empty property or partially anti. They want to rent empty rooms out. So the download, the booking up, the signing, the least their property on the up. After some time, they receive some looking from the other user, and I can also manage these bookings, maybe by making contact with the client or canceling a reservation for whatever reason, and finally they host the guest. You can see that there are not many common parts in this journey, and stay up. We have to act is to separate product for both type of users theology maker and you tell owner at this point I usually take the decision. Whether is easier for my client to understand a very extensive user journey. But most of the notes are not shared. What if it is better to create some interactivity in the user photo I light? That's a different type of users that we can have when I talk about interactivity in the user flow. I usually refer to interactive pdf's or cloud prototypes made in invasion of sketch. This is totally up to you and your client. I recommend to check with your client if they're more comfortable to use a new online interactive user, Phil or A pdf one. 13. Consider the Product Goal: the next step you should take before start designing new user flow is to define what the user goals are. It is important to define these goals and lead the user to them. Think of them as the pages that the user must reach in order to achieve the final objective . The best. An easier way to find his goals is from the user journey. You will be clearly highlighted in them, and you should find them with no difficulty. Another way you could receive them is from your client. They could tell you straightaway where they want to ship from their product and you will have to use this information is one of the user calls when designing new users from, but they could also let you know what they expect the users to be doing in the product. And in this case, you will need to work out. The user goes from their informations, and finally, the last. Another deal option would be from your research. This is the case where your client does not spend any time in budget in previous steps of you X process, anyway left to spend some time to analyze all the material you have available were considering. These is unknown ideal option because it is not part of the user flow, but for the purpose of giving a complete review of how the real world projects work. I'm going to include this scenario famous decades where we receive no data from the client for the pages anyway, remember to keep in mind the boat, your client and the user Goals are extremely important when you designed a user flow, as the boat will need to be included in to sign. 14. Consider the Product Goal - An Example: Let's not try to define the user goal even better with an example. If we can see there once again, our tell booking up we can to find the following goals and for the purpose of explaining better difference between user goal and you're cryin. Cole. Let's split the miss following they use a goal are taken from the user journey. We have analysts previously in our class, so let's say that we have our first user and this is where the personas and a user journeys . Coming. Sandy once again, which wants to go on holiday and wants to book a room. Another user could be wanting to rent out this property to other users and so receive bookings. Let's not have a look over your clients. Good could be were. Just imagine them for the purpose of this class. But they could easily be real life goals, so the first client go would be to get user to list their properties on their website. In another goal could be to get users to Bacolod eight by using their website. Let's not do another quick exercise that will help us to better understand where D schools fits in the user flow. Let's say we want to categorize these goals. We need to ask ourselves, What is this user that we're considering wants to gain? This type of information can also be funding but personas and user journeys if you have them available, so let's go ahead and send it. In the case of the first user, what they want to achieve is to save money. If we had a better and more complete use, their journey in personas, we would not see. Our first user wants to save money, But then you get up. For example, another user. There's a family mother, and he spoke in a leader for a whole family. The priority disease er wouldn't be to save money, but to find a place this child friendly. And in another case we could have the professional couple that wants to go in a luxury holiday. So they're interesting toe all the extras. When you lay out your user calls, it will be easy for you to see are you need to leave the user to the goal. In example, dis mention it is clear how the filter section of the page with network and you see what we just did there. We analyzed the users and found out we need a future section. This information was no outlined anywhere in the brief or in the user journeys, So you need to understand that you will have to work out some informations for yourself. This is why user flows are helpful. If there are more experienced designers, some of these steps will already be in your head, and you will not need most of the times to lay out all the options. It is something that comes with experience, but if you're just starting, this can be a good exercise, and it will also help you in your process. Let's go ahead and to find the other user gold for the second user. They want to make money, disconnect things that probably now or in the future. You want to other way for that user to use the site to make us much money as they can. So you can think of a Data and Analytics section where they can see how many people visit their property are much time to spend on the page. And if they leave after viewing without making a booking so they know they need to make some improvements under post. This will help them to earn more money from the listings. Then, if we look at your client's goal, they would both be to make money so you can think of ways of promoting off during discounts and so on. You have spent a good amount of time in the section and discuss your findings with your client. What happens in most big companies is that you have the whole team working on these. But if you're working with smaller company, it may be a rather you need to take on. And it will look very good on you if you can get your client to agree on some improvements or if you cannot recline the finding a user flow where everyone can reach the goal easily, depending on what they want. 15. Software Choice: we're now almost ready to start the design of our user flow. Before that, let's just stop for a moment and ever look up with softer you produce. This choice usually depends on what type or user flow you want to deliver. I recommend is this sketch illustrator or in designers, main ones in most popular ones. But you feel free to use any rectors after you're more comfortable with. My choice would be to use Illustrator in in Design If you want to deliver an interactive user journey that can be exported. It's an interactive PdF Some other time are you sketch, as I can link pages and create an interactive online user flow that I could share with my client with a link. They're also line software and services that will allow you to create a user flow. But this lesson is focusing specifically in having to design your own user flow, using a client friending. So the choice is entirely up to you, and any softer is as good as the other one. As long as they're back to base and you can easily manage styles and symbols 16. Design a User Flow - Getting Started: Let's now see how to start the design of our user flow. We have to know the research and collected all the data necessary to get us started. I am going to design my user for using Sketch is I want to share with my client and interactive Lee, where I can share more information of the user throat and I want to be able to share. But this Anderson the matter for there would be working on the up. So let's go ahead and create a new sketch document. Let's like the page for much from the top. We can start with a standard dexter up size, which we will change later based on our needs. Let's just select a background color. This is to make sure that when we export, we don't ever transparent background and let's pick a color. There's not pure white. You don't have to print. It is better for the ice to view on screen, right, So make sure you select to including the expert, but if you wish to print it, then make sure the box is not checked 17. Design a User Flow - Identify the Nodes of the Flow: we're not ready to get started. I have included the user generated top, so it will be easier for us to view the food process. But you would usually be printed out with you together with all the other user journey, instead are available. So let's select our are part and start exploring what screens we will need to include in our up. First of all, we will have a loading screen. This is just the first step. Is a busy crew when designing a user flow for an up, let's just position it at the beginning of our page, the next to national screens to follow our does. The will allow the user to access the up. The other at this stage can either register or looking, and once they're done, they can access the home screen. Let's not look at our user journey. This journey focused on the possibility for the user to make a reservation to go on holiday , so the natural first step would be to create search page and again from our user journey. They user now browse the results, which means they need to be able to do this results. So let's create our results page, and they cannot select one of these results to real specifically tell. So let's have a page for the selected listing. The following step is for them to make the reservation with the listing and to pay for the reservation. So let's add a payment page, which will manage all the information to finalize the booking as well as the payments. And finally, the user need to see a confirmation page, which we let them know whether the book it was successful or not. Let's give us a bit more space here. We can change the size of the page and come back to Vixie later. We want to make sure we keep the standard HD diced upsizing because we want to share a weapon to the client so that we can make sure that they would see Okay, but this can be specifics later. If you need more space to work now, we now ever booking flowing place. Let's see what's next. Let's have a look at the floor, which is created. We have added a payment page where the user must have older information. A complete user flow would show that at any time, the user must be ableto update this information, for example, if they move house or reform of the cards expires. So let's create near in the flow where they are able to do so. We can create a setting page where the user can also update their personal details in their payment eaters. Let's now move forward and check again our use of journey. In the next step, the user wants to be able to manage their booking. So let's create unedited booking page and let's now add a confirmation page so that the user know if they're change was successful or not, let's call it confirmation aided page. To make sure differ from the above confirmation page for the payment from the Edit booking page, they will be able to either change the booking or to cancel the booking so we no need to add districts rampages. Once again, let's not give ourselves I'll be more space to work so that we can collect old information easily, and we can leave the design for later. It looks like we have all the information is available for the user journey so we can start linking the pages to get an idea off our flow will look like another of the pages are linked. You can easily see the general shape of our user flow. Let's move to the next lesson now, where we will found out how we can start styling this flow to make it. It's relevant. It's possible. 18. Design a User Flow - Create and Style the Nodes: we cannot start on the actual visual design off our user flow and integrated with the client Sprint guidelines. For the purpose of this class, I'm going to use the colors we have already use so far, so full black, white, light, gray and blue. Let's selector for a snowed, the loading screen text and let's start editing if you're not familiar with sketch as a just to take a quick class to get you started. But you will also be able to follow along and use the software later, even if you're never used before, as it is very straightforward, and I'm going to quickly explain how to create symbol and styles what we move along with the class. So from the side panel, we can start defining some styling for the text. Let's select the color section and change in sketch. You have so pretty fine colored, but you can also a new ones yourself. I have already added the blue in the black 12 the new color to the document called a palate . They find the color you want to use from the box above. I am selected in a random color and then click the plus symbol. Your new color is now safe to the parlor. So the Lady Simple drug it out of the box and it would go so for the text color. Let's select black. Let's don't select the front name and I'm happy with it, and then the fun size. Let's change this down to 36. Let's not give some space to the text box. Change its size. Let's line into the middle and at the bottom of the box. Sketch like in design an illustrator. Give us the possibility to create phone styles. This is something very helpful when designing, so that you don't have to go back and change elements one by one. If you have to make any change later in the design, let's name a body slash not named Black Sketch divides anything your name with forward slash inter folders. So now we're creating the further body with the style. No name black insider. We cannot easily change all the other text just by selecting and setting the new style we just created. You can select them one by one all together by dragging your mouse on the screen, or you can select them from the layer panel. Not that there are selected that. Select the text style we just created, and they will be updated within your style. Let's not get the box size that contains text. So did the rule the same, and it will be easier to align them correctly. We can also not a little links, as we have our general idea of other pages willing, and we can start creating the proper design for Diggins Airflow. Let's start with the 1st 4 pages and let's move the rest of the way so it doesn't confuse us. You can see still there outside the arbor, but it's not in our way. We cannot start creating our first note. We can create a circle by pressing the literal is over. And let's change his style too much the branding that we have used during the class. So let's select her blue for the border, change the thickness to six and change the color white for the field. Let's also the color white horse a document colors, so it is easier to find if we need it later. We cannot change the size of the circle by editing the width and height box. Make sure the lock in the middle. It's locked so you can change one sides and we'll update the other one to 35 would be just fine. Let's not malign into the center and bottom off the text and start changing some names in the layer panel we can name the text layer is not name, and the over layer has just node. Let's not select both of them and group them by pressing command and g the Nor in a group you can see it's a full direction in the layer panel and less name the group this note. Not that they're group together. We can create a symbol. Symbols are very useful in sketches. You might know because you can use the same structure over and over and change. The content is you need the less breast create symbol from the top and not sign our name to the symbol. Notice fun for now, unless press OK, the layers now changed into the symbol layer, and you can see on the right panel that you have some fields you can feeling, which have the name off the layers we previously set in the North Group. So if we now want to copy over the symbol just created and use it to replace the register section so that we don't have to recreate, circle and text terrorists all the time. We can go ahead an old click and drug to duplicate symbol similares duplicated. And you can now change the node name in the right panel like this press enter and the new notice, Freddie. 19. Design a User Flow - Link the Nodes: let me quickly show you now how Symbols. Working sketch. So is there concede? We used a circle to represent our note. If we double click into the symbol, we will open the symbol page in dispatch. You will have a collection of all the symbols to have created for this project. So is there conceive ago are not symbol. And inside it we got the same folder that we created initially the note folder which contains not circle. And they know the name text area. If we're now to change the border of this off the circle and choose, for example orange and now we go back to our page, you can see that this symbol has updated everywhere, even though I only changed one of them. This is the benefits of using simple sketch. You can make a mistake corrected or decide to change your design later, and he will update across all the instances over symbol. So let's change back to blue now and go back to our page. So let's remove the log in page and to particular the register note to create our logging note. Just by using this symbol you can see on the panel on the left, where the layers are that you're creating new symbols, they are having the same name, and we're just gonna update from the panel of the write their name ing's. So now we have our four screens ready. What we're gonna do next is to link this pages together. We know that from the login screen, the user will be able to either access a register screen or log in screen. But before doing this, we need to understand that the loading screen will look directly. Push your user into a following screen. In this case, we have true screens is following screen, so this doesn't work. The loading screen cannot choose itself if the user needs to register or log in. So we need an intermediary page. Let's go ahead and already know we can call the UN access screen. From here. The user will be offered the possibility to either select to register or two looking, So let's align or the screens and start linking them with each other. Try to keep a consistent spacing between them so it would be visually more appealing. Let's not create some links from the loading screen. We will have one straight link that goes to the access screen. Let's select some styles for the links. We can select blue again with a width of six, so it matches our circles. We can and send it backwards. So it is behind our circle, and it just look like they're link. We can also start being a be more precise and change some names. We can start renaming the layers of the symbols so that they make more sense and is easier to find. Them did his best practice, and it's really ideal for you to start naming layers correctly. There's also would know the designers are not too precise in this aspect. I personally quite care a lot if I have to deliver something, especially if I know that some other designer is going to pick these up is it would be way easier for them to understand the file. If we're precise with your name ings for the purpose of this presentation, I'm sure in you now how to change names. But I'm not going to put too much attention in the next one because we're focusing on the design. So let's duplicate our link and let's link access screen with the register screen. We want to create a usual appealing user float. So let's put some effort into our this lake looks, and let's try to make them as usual appealing. It's possible Prescott Month C and Command V to copy and paste your link and then simply changes size to link it to the next note. Do the same to link it to the home screen and again command. See in command be to create another link. Link the register to the home screen. We now have a very first example of a very simple and basic user flow. You can't see a world screens linked to each other and how they make sense, and now you can see how the user will proceed from when accessing the up, up until to the home screen. We can also notice something else. How we have a non screen in a register analog. Something else they should be immediately able to visualize. Here is that one thing is there is locked in. You will also need to logo, so that doesn't where we have the Logan and the register screens here. We will need to add another note they will say logo that will depart from the on screen and will bring the user back to access screen. Let's also hard screen here is these are actually screens. So again, by pressing command, see in common you can link your longer not back to access screen. Let's just added the curse that they look a bit more usual, appealing by creating on ordering. You just keep us in my trick, so it's pleasing to the eyes. Now let's focus for a moment on the direction of the float. This is something very important. It's unit on the standard in a website or not. You will be able to go into a certain direction for some screens and in both directions for some other screen. For example, on the loading screen toe access the Axis screen. The user won't be able to go back on the loading screen once they are on the access screen that say they cannot go back. So that's a one directional auction. So we need to identify these action and make sure that the designers, they're picking this up in the developer of the end know exactly where we're going to do here. So our job is to visualize distraction, weaken simply other narrow on the link. To indicate that this is one direction link, the user cannot go back from this page. That's a just size, and that's it we have a narrowed indicates that from the little screen. The user will then visualize the access cream but cannot go back from the register screen in the logon screen. The process is different because once the user access the logon screen or the register, screen the genocides to change their mind and actually go back to the access screen. So from the on screen and from the home screen as well, we need to specify that once the user is in the on screen and clicks the logo, it wouldn't be directed to the local page. But once is on that page, the user cannot go back to the on screen. He will have to go straight back to the access screen and then and then logging again. So let's that you are a zero. The shows that their from on screen the user have only one option when clicking the logo, and he is to go straight to the access screen. We also have something else to note this year that from the access screen, the user could actually go straight to the home screen because it might be already logged in into the up or registered, obviously especially low green. If you already looked into the up, you don't want the users have to put a slogan in every time he opens the up. So we need to visualize for the developers that the user can actually go straight to the home screen. If he's looking, has already been done and he hasn't signed out before, does so Let's create a different type of link with their still Use the Blue. But let's visually identify these elements differently so we can still have the same with for the line. But let's create a dash free. The dissection is no exactly the same as the other lines. We condemned ify AKI later to explain to the developers for all these different lines and arrows shows. So what we want to do now is move the logon screen text below its note to the so we need to create a new symbol. We can double click into this symbol, and we're not in the symbol page to create a new symbol. Let's rename our original symbol from node to know the text talk. We could not duplicate the symbol by pressing old click and drug. And let's rename this symbol. No, the text bottom, we know want to move the texter below the note so we can align the note to the top and align the text of the bottle. Let's just remember to move their texter a line inside the box at the top. If we now go back to our page and change the node to the new symbol, you can do so by clicking the symbol on the right panel, and you will not see that your two symbols they both appear here. If you select the new single, you created no text bottom. You know, see the alignment changes. Move your symbol to the new position. Now we also want to update the lookout symbol. As you can see, it's now too close to the Logan symbol, so we can just do exactly the same that we just did. Now let's update the link positions, and now our log out screen is going more space around them. It's just quickly adjust well, the position. And so they are in their correct place. And here we go. We go our first pages off our user flow or laid out correctly and neatly. 20. Design a User Flow - Define a Navigation Area: now that we have our inter flow, we want add in the other pages so we can go and have a look at what the other pages we created are so we can go in. Have a look at what we moved outside our page and see what the other screens are. So we have the search page setting page and the edit booking page. Let's focus on these three. For now. We can recreate them by simply copy and paste in one of the notes that we already created and updating their names. So let's go ahead and change the first name to search screen. We can then change the middle one with aided booking page screen so you will notice that even start and tried toe criticizing the symbol. It will actually stretch and change the size off the circle as well as the one of the books . To fix this problem, you need to double click into the symbol and start editing some of the resize ing settings . You can find them in the panel on the right. Let's start changing the settings for the circle. What you want to do here is tell sketch that you don't want for the node to recite itself, but you want them to have fixed width and fix high to the so you need to click the fixed size guides. Select both of them by clicking in the middle this way. Whatever you do to the symbol the size of the circle, we stay to 35 weight and 35 high dimension. We need to do the same for the loading screen because we want to do the same for the loading screen. So let's move it up off the node because it's actually sitting on top of it. And we know want to make sure that when we stretch the symbol, the size of the box of the text actually sticks to the top of the symbol. To do so, we need to pain the textbooks to the edges of the symbol. Let's go ahead and click the pin to the edge symbol. Interest. Sizing Parliament The right. We wanted to paint to the left, to the top, into the right, so that will extend symbol. The box stays at the top left and right off the symbol. Once there's been to the top left and right of the symbol. We also wanted to stretch it while we actually expand symbol. So we need to remove the fixed size high selected. This will allow us toe also pain to the bottom, which means penny to the top off the circle. Now we need to do the same with circle. We actually want to circle toe, always be in the bottom position and a descendent sketch automatically said the positioning in the center. So all you need to do is just pin it to the bottom, all our layers all set now and we can go back into her file and see that now if we stretch the symbol, we will actually be able to see more oversee than before. Let's go ahead and quickly do the same for the other symbol. So we want to keep this same high and with off the circle. And we wanted to depend on the top and then we want the textbooks to don't have a fixed high. So the deacon stretches and we want it to be pinned to all the direction because we wanted to pain bottom left the right and to the top from the note. So too, does so sketch lets you click in the middle toe automatically trigger all the pain to the edge. There you go. Now the no tax bottom is completely too. Let's not completely three notes that we composer main navigation pattern. So let's change the last one to setting screen and let's now link them to the home screen. We can easily adjust the position in by changing their I and then click inside the area and then topping arrow up or down to change by one pixel. And we can then press Muncie in common, be to copy the line. Just created changes, size. So what? We need to pay attention. No. Is that what we visualized here is that from the home screen we will have access, search, screen, edit or settings. But what we want to avoid is to have the on screen toe a differ level to the last three screens that we created. So, for example, if you're thinking of a normal app, you will have a bottom navigation, which has three different links. The wings each one to search at it in settings and you can switch from one to the other one . But we want to make sure that the home screen is included in this bottom navigation. For now, it's not our place to say if there is going to be a bottom navigation or whatever else, because this is the job whoever is going to create the wire frame. But we want to make sure that we are no implying in our design that the almost screen is going to be on another level off the search, edit and settings. We can do so by putting some information they use a pro for the designers and developers they're going to come after so away we can do this is by isolating these four wings, and I lighten with a different color. Let's speak black because this is the other color that we have in our polity, and it was turned out well enough. So let's change the linked black, and we also need to change the noticed black to do so because we're using symbols, we can actually do it really easily. Let's open the symbol page for a moment and selecting on circle from here. We can actually give layer styles to the different elements in this page, so let's give a style to the node. We can do so by dependent on the right. Let's select the nor layer style and create a new low start, for we can name it simply blue Note. Now we need to create the black notice Well, so what we can do is select the same element, change the border to black and not create a new laced. I'll make sure you create a new layer style in no updates. The old layer. Unless Cooley Black Note. Okay, lets put things as they were before. So let's have our blue note. You know, symbol and let's go back to our page. You can not see it that there is a new element in your symbol, and it's the node style. The no style is now certain to blue note, but we can change these into the black node. So let's select all our four nodes unless change their style black. This is the beauty off. Using symbols in sketch, you can actually make changes without affecting any other section worked before, So now we have our black center section. We need to specify to the developers, and we're gonna do it later. Make sure that they understand this section needs toe all be in the same navigation area. This is a guy to do so as long as you specify it. Obviously, it wouldn't be okay to just leave the on screen and assumed someone would understand what you're doing. But it is OK to set areas and make sure you specify what they are and what they do. So let's just change some of the design and tried to make a big nice If we could just simply stretch a bit more the curve to make a more visual appealing and make sure we match the size off the links. So the dural symmetric our effect. 21. Design a User Flow - Create a Key: Let's not give some more space Tow ARDS sign. Let's make the page bigger. We can press shift to make sure that we enlarged page keeping the same proportion. This way, our page will still be next up size but larger so we can make it smaller, easily keeping this in proportion. Let's not create the key so that the developers and the designers they're coming after us can understand exactly what each link in each nodes mean For us, we can simply duplicate the single and something else we can do with. The symbol is we can actually unlinked them from the symbol, and we can use the elements inside them for the purpose of the key. We don't need any text with it, so we can just a link the symbol and take the circle. As it is now, our symbol has reverted back to be a folder, and we can access the folder to select the text and deleted. We're just left with our circle now. Let's not quickly tidy up of Britain us. Let's select the whole flow and let's group it so that we can easily select it all in one go you see now is converted to a folder, which contains all our elements. Let's name user flow. We can do the same with all the elements outside the page, just for the purpose of these five to be a bit Tidier. Let's select the mall and group them together by pressing command Gene. They're now grouped into a folder, and that's name is if we look on the panel of the left. We can quickly identify what we're looking out, right. Let's get started on our key. So the first thing we want identify is our blue note within. Also need to create a key for the black? No. Then explain what they are. We mentioned before that they are going to be into the same navigation. So let's change the layer style for the circle you remember. We set the layer styles earlier. If we go into panel on the right, we can see the we still of our black non, and we can go ahead and select it to change the circle style. Next thing are delink so personal. Let's let dealing days only directional. You can simply copy with Koeman see and common V to paste it and could move at the bottom. Let's just fix the spaces so it matches the size of the circles. We can actually moved him on the right. So the circles are on a side and with the links are one another one. Then it's easier. It's usually easier to understand what they are, so the next one would be our normal link, the blue link. So we can just remove the Arab and the next one would be would be the dust link, the one that we created from the access to current to go straight to the on page in the custody users already looked in. We can do. We can create another style for this line, too. Let's actually start with the blue and black one. And finally, let's add our dashed line a swell to the styles. We can create a new layer, suffer it, and we can name me skip, flow or anything else that will easily help you to identify what we're looking at. So here we go with selected are three different types. Siblings. We actually don't need to add the black link. This is because we are identifying this different style of dealings, so we go the links to the era of the plane link and the dash dealing the black link only shows that is linking black nodes, but it's doing exactly the same that the normal blue link is doing, so we can just go ahead and just sleep. One simple straight line let's not give a quick name or description for are key elements, so the 1st 1 would be a simple page note for the Blue Circle. The Black Circle is actually a home navigation node. Let's just give us ourselves more space here and let's name the links. So the 1st 1 delinquent error is a one directional flow. This simple straight line is a multi directional flow. Finally, the dashed line. We can call it a skip flow. What we can do here and we will see later and is exactly why I like to keep my prototypes and my user flow, especially interactive, is that Skip Lowe means something for us at the moment. But if you are presenting days to a designer or developer, they probably work out what escape flow is. But chances are that they won't understand what it actually means, and he could confuse them so something you can do is you can create disk is an interactive element and create a little pop up or Celtic that will explain in detail what these words mean, what this keys are so that you can keep it short here. So if they glance today, once they find out what they actually are, they understand what they're looking out. But if they need to, they can actually gain more information. We will see these at the end when we are the interactivity for this flow. So is our kids know to extensive at the moment, we can actually specify what the black links are. This can help developers and designers understand later, and because we actually space, we don't have too many key elements. We cannot be in there so they don't have to click and find out that the black notice something else. It doesn't confuse them. They can take any immediately identify what the black links are. So let's just go ahead, create yourself a bit more space and specify what the black wings are. This is up to you depends whether you have space, whether your time it's no essential because you already specified that this straight line is a multi directional flow. The key is important. That has all the different elements that we use. And then if we change color but actually mean the same thing, we're just trying to group them differently. Is no essential. They use specified them in the key. But let's go ahead and do it anyway. In this case, that can stretch the page a bit more, keeping the same proportion. Let's change the line using the layer style that we created earlier Black. Let's just give you a different name. So this can be that multi directional home flow again you clearly see from these days they sort of repeat themselves. But because we use the black, they understand that these just group their home. So you're sort of bring forth in the fact that these section is the home itself and it doesn't work the same way as the rest of the flow. Let's just now tidy up thing. Let's move the key a bit more down so you can see here are your user flow. It started to take shape. We have the inter part, we have the navigation part, and now we also have a key that explains exactly were each note and each link representing our user flow. So let's go ahead and let's build the rest of our user flow. 22. Design a User Flow - Complete the Flow: So now that we have our navigation pages, we can remove them from our from our list of pages that we created earlier so it doesn't confuse itself. Let's not on there making a reservation journey. So So the wonder we start from the search screen. So it's we established earlier. We know that we gonna have. So let's just now remember to change these pages back into the blue notes because these are not part of the navigation anymore. This is a flow there you relaxes from the navigation so they can be reverted back to blue. So let's change our blue note from the panel on the rise under the node style section, unless they're changing the name of the North. So this will be the search result screen. Let's go, then screen pages as we're working for an up because we change the settings earlier for a symbol, we now can simply start distinct ball, and the pages would now adopt in change size without creating any deformation to the symbol . So let's go ahead and copy our link again. This link needs to be blue and not black weakened, changing either from the color palette or from the style window. Let's try to keep things compact so it doesn't become a huge flow. But we can still have enough space for the user to people to see clearly the different names and identify each link separately. So let's go, buddy section. It is a linear flow and we can go. I had a name the the next screen, which will be the listing screen so we can just name it listing screen, and the next one will be the payment screen. Finally, our last string for these part of the flow will be the confirmation screen. Let's actually call it payment Confirmation Screen as we saw that, we believe another confirmation screen later for the edit booking. We know this now so we can go ahead. And actually, name is something that is more relevant to its actual function. As you can see, here we have the other confirmation page, so that's good practice to try and keep them separate. If there are actually two different pages, let's not focus on the added booking screen section off the flow. So we know that from the edit booking screen, we want to access to different pages while we be the change booking and the one will be cancer booking. So what you need to think here you're probably aware of this, but let's just go ahead and say Anyway, on the added screen, when the user access that you will have two buttons there, will one will say, added the reservation. And the other one will say constant looking, So you be able to click them and access to different pages. That's why the flow splits here. So let's go ahead and create this tube knowns. Because this section splits, we can actually copy something that we're really created, which are? They noticed, the split from the X axis screen. We already had these links, so let's just copy and paste them and move them along. Let's I did the hot them a bit so there don't take up so much space. It's We didn't mean it. And let's copy the notes as well, so you would go a come so booking screen and the next one will be They're comfortable. Perfect. We no need to link and drink them back. The one flow going to deck off mission page. So let's go up your links. Let's change them around. Let's copy one last note, which will be our at its confirmation screen. Next, the final flow. Let's create the floor for the setting screen. This is something that wasn't in our user journey, but we added a because most up are actually gonna have a setting section and we can create our floor, be bigger for the purpose of visa classes. So let's just go ahead and creating anyway so you can see how are complete for a flow could look like. So the second screen actually goes in split into two different nods, so we can just go ahead and Kobe, where we did before and tested below. You see now that everything gets to be easy on our pages so we can simply changed the size of the page and move things around a bit more, said Hazel. Tied here and we got be more space for a while are different flow sections. Let's go ahead and move. Some things are below where and the search flow will be higher and then you go. Here we go, the more space available for itself. So this is go ahead. Let's make sure the Kiesel into the key folder, so it's easier to taken grub, and we can now move our flow a bit lower in the page. So let's go ahead and focus on the setting. Throw. Now let's change the name for the first nod to be personal little screen, where the user we'll be able to view or changes Personal Littles and second node would be the payment need to screen where the user can view and change their payment. You go, And because there were deciding that we want the personal deterrence and payment, it is to be able to be edited within these pages. No been linked to another page of the confirmation, but the confirmation would probably on the same page as the payment leader. Screen with something you can think it's a little proper window that just says confirmation or leaders change successfully. We don't need to have a confirmation screen going from the details screens. So now we say we actually are did all the pages that we needed to our user flow. We can go ahead and delete the references. We can just double check the user journeys. Well, make sure they're all the goals and all the on the steppe of the user journey are included in our flow. So yes, we have, ah, the ability for the user to search. Two brought the results to select on a tell to make a reservation managed book in Yes, we included that, too. And it looks like all the steps of our use of journey are actually included in our user flow. That's great. And we also added the setting section, which is extra, and we added it so we can create a bit of a bigger, more visual user flow. It wasn't in the journey, but it's too said before you might have or the journeys available. Or sometimes he wants to need to think for yourself and understand border sections need if you find something that maybe wasn't included before, but you think it's beneficial by all means. Go ahead and tell your client they will only be happy to hear that you might have found something else that might be useful. And if they're signing off, then your more than free 22 your flow to So we cannot delete our user journey reference and we are left with our semi complete user flow we can see from the beginning, starting from the lotus cream upto all the actions that the user will take on the screen start going to be in our up are now displayed in our user float. It's just not a projector. We don't need to add any one directional flows for any of the screens that we created. We could maybe think that from the edit screen we could have one direction. Flow is you can go back and change your booking again. That went up in But from the edit screen, you could go back to the change booking page and make changes on there, so that doesn't essentially need to be a one directional flow. Remember, there was a one directional flow for actions that can go back to the same page, doing the same action from the antique information skin. You could go back and change your booking again, so let's not create some titled reference for our flow. Let's create a general title for these specific flow. This is the only day maker flow, so let's just create a name free and put at the top of the page so that whenever someone opens this file and have a look at eight know straightaway were there looking up. Something else we want to consider now is how do we end our user flow? Being a floor means that Britain is linked to someone else in a logic way. So, as you can see now, we got three sections that end with a node, and that's there. But surely is not. When you access the payment confirmation screen for the edit screener, then your journey finishes. Once you view your edit screen or your payment confirmation screen, there are other actions that you can actually take other than going back to the previous action. So the main action you can take is actually going back to the home screen or to the navigation screen. Remember that we said that the home screen search screen added booking screen and setting screens are part of the same navigation. So what we want to do now is to link all these open notes back to the home screen, meaning that once they reach this screens, they do have the option toe actually up on the navigation bar and start any other road they wish and go back to the home screen or any of the other pages. But anyway, they can access the navigation scream. So let's go ahead, and this place is in a beneficial way. This means that we have to link all these open notes back to the home screen. Let's go ahead and do so. So now the older and Knicks are connected back to the home screen. We need to make sure we specify that the action the user takes from this last screen is actually one directional. And this is because once you're on your final screens and then you top on the main navigation and go either on the home screen, edit settings or search screen, you won't be able to go back to this last spring the use of so just think of it as if you're in the payment screen. You see your confirmation screen, and then you click on edit booking to make another edit. You won't be able to go back by with a narrow or back button and go back and see your payment confirmation screen. The screen will be gone, so we need to specify the desire or one directional flows. Go ahead and not our little arrow as we did before. To shore developers in designed with the D. C. Is a one way so we can add one of the arrow after the payment screen. We need to add another arrow after the added confirmation screen to show that even from the direction is one directional and from the birth of UNDATED screen. We also need to focus these because we want to make sure that our designers and developers don't understand it from the payment confirmation screen at the top. You can actually go down and then left to their confirmation screen. We need to show that this flow is going right and down. So we're doing so, indicating these with the straight line and then the curve. So sorts shows going down, and it's not going down left. And then we can also add the IRA. Touring forest ease is going to be pretty clear for designers and developer their experienced. Obviously they know going to think that from the payments Korean, you can actually go from the payment confirmation screen to the edit confirmation screen. But let's just be super clear and specified these anyway, another way. We can also do this is to make sure that they understand that they can't go down from the home screen. So, as you see now on this good sort of represented from home screen order than the three different navigation notes that were on the right, it looks like they can go down this well. So let's make sure the desire oh, is actually rotating and pointing up, showing them that they cannot go down that way. But that is only a direction that is coming back to the home screen. This is pretty clear, and they will easily understand what we're trying to represent so that self analyze things . Let's give yourself a bit more space, move the key down a bit. So now we have our full user flow completed with all the informations that we need. So let's have a look. Our user flow. Now let's see if we actually completed everything it's we needed. So let's try and focus step by step, would use that we do and what can and cannot do something else we notice is actually there . From the access screen, we realized that the user can not go back on that step either because the user will be able to, from the on screen to go back and the access screen that would be stuck there, the only way they can access that access screen again. It's only by lugging out in going back in. So let's put an arrow in our ski boxes flow as well, just to make it clear to the developers and designers what's happening here. So it looks like everything else is in place as well, and so we're now ready to go ahead and actually add some interactivity toe our float. 23. Create Interactions - Link the Key: Let's not go ahead and create some interactivity for our key to this end, we can simply in certain I couldn't let the other designers know by clicking on these area they can get more information about it. So let's just create ourself a little, very quickly, an easy Michael for getting more information, sort of like to deep. Let's create the outlines so that when the when we recites the icon, it doesn't change too much in sizes, and we do the same for the little fertile it right. So now we make sure that they are Since relying, um, we marginal together. So now we go our when you conceded symbol. There we go, our icon here So this we're making a bit smaller. We can clearly see that is getting waiter than so to change you just something to it. So, like the group selected inner circle, the seniors are good at six Outer circle. So is it noticeable? You just might get bigger. Another I inside can go big, bigger himself. If it's too small to entity from a screen, you can actually just go ahead and entity in the something's up here. That would do we can move our Aiken for the key after title. There, on Perfect, I would tell the wire frame designers and the developers, when they look, are you the float that they can click on the key anger, more information? There's no group these two together, and let's create little tip. So to do so, What we're gonna do is we're just gonna create the same page with little Top on the play and link these area to the next page and when the close and expected this page. So what we need to do next is let's just change the name of this page. So disease already maker flow home. Yes, we're creating things. Another thing that today's really have full I number pages in this way this way. You know that if you change the number for another version of the spirits, you can change the 3rd 1 If you create another pitched, it relates to this one. You can change the second number. That's what we're gonna do. Or, for example, let's say we have another flow, which in our cases we saw in our example, could be for the for the user, the ones to least the when this property that could become number two. So it's really easy to keep track of where your pages are. So let's go ahead and create this page for the to tip, and this is still wholly the maker flow through teeth for keep. It's just a specific sizes of 200 files on becomes 2000.1. So for a little tape, let's just created as it was a website. So you have a black feel that is a bit transparent so you can see what's in the background . But it doesn't instructive from the content. Or were you going to go to this page and then not Let's build a tip in the middle? That's the beauty Did not. Let's send three in the page. I can't little bit bigger. That's throwing a corner. Is every disk went wrong in our son and we can. But the board is most of our design board. Let's try to keep it not white sweats, usually too bright for the eye to look at, especially freeze in black for the front, and we can also grouped is too. Call it background and lucky you can do so by pressing commando or you can also right click and lock and unlock your layer from here. So first thing first to do. Let's let's create a close Nikon. It can simply be he plus that we can convert into a not land, and then we're likely to be to make the next. Does it have to be any more than these? Put in the top right? Make it easy for the user to close what I usually do. In this case, it becomes sweet. There for the user is I just linked the whole page anywhere the user clicks goes back to the previous page because if they miss clicking there, it's fine. And from this pathetic and taking your directions leader instant click. Close the page, go back toe wherever you need to go, right. So let's go ahead and create some information for a key. So let's just go be a key on. We can go above the background and put it there. Put it up here. If you are working without real client and you wanted the things properly, make sure that you make on the margins correctly and everything is properly aligned. For the purpose of this presentation, we could just quickly have a look and move things around that things. But obviously the purpose of the designer is to deliver pics of perfect designs and make sure that the high gets his part. So make sure that everything you do look so nice before you delivery to the client. Okay, so let's go ahead and explain some of this point to the person that is going to use. Your is afloat. We can simply complete a czar. It's a table. Nothing too fancy, not into complicated. Just easy to understand. Okay, so you can give a quick description of what? The Pagenaud. These so bit nodes are essentially the pages did needs to be designed. So each page off the website, I'm navigation. Not actually. We're working on our absolute say it's clean off the up, the only navigation. This is where we actually need to explain, create clearly, what is that we're doing and why we divided it. So what is the black section? Black section are the main pages off the up usually what you get into your bottom er or both of navigation menu, the things that you can stop and switch between the screens we highlighted in differently because they want to make sure that even if we got three pages aligned, the designer knows the three pages must include those. So the homepage So it's going before purchasing total. Then we go the one direction flow. So the one direction flow is are are the pages for the user. Can I go back? I won't accept directional flow. This is a normal natural user can move back and pull it free the skip flow with skip feel we mean that the user could automatically be I directed to day linked scream Let's put examples, but this doesn't hurt doesn't make you look unprofessional. And if anything is gonna help, the person is gonna pick up your use of flow to understand what you're actually doing. So these are recognized automatically be directed to the link screen. Example. If the user is already locked in, then they won't need to looking again. But Daisy cool directly through their home page on. Okay, so let's create our link. If you're familiar with sketch, you will know the toward links simply, you need to quicken prototyping your real so go craft that is produced by InVision and by linking with Kraft, you can upload to your InVision account. It's up to you use. I prefer using this one. It's already nothing. One of my favorite reason for using the prototyping with Sketch is a sketch let ceiling symbols. So, for example, if I have a menu that I put into a symbol that I can link on my pitches from there, and they will work automatically in every screen in visually, let it they don't let you do that. So that's something to think about when you create your prototype. Anyway, let's go ahead and start building a prototype, so we want to link the key. Is it a little Arra appears you can have really move, which in your pages and I want to link it to the screen. So it up here, learning system, you see the links from here do here. And then, as I said, I want to link this whole page to close that when he stepped on. So let's go ahead and let's select all the groups in there. So that's is into the key is part of the king. Let's do using a swell. We won't unlock that grounded it was able to select them. Let's put these into the key again, just to be clean the turned It is the main floor. So let's do something that's gonna help us to link without creating too many links. Let's group of the pages and let's just call it a continent. So then we can link this group without having to link every single separate colder. So that's think this one back to their homepage. No. When we're done, we can simply preview a prototype by selecting the screen that we want to start with up here so we could preview in ammunition there. There you go. Here we go. Are up a free click anywhere on the page, It will. I light where your links are. So I know that can take you, they figure appears. If I click on the key, then you can see my if I pick anywhere because so here's a description of the key now, but you can do from here is we go ahead and create the other link. But you can just simply share this prototype, which you can applaud by going to the cloud symbol. You clicky, it will ask you to log in. Shervin locked in yet to register. It takes one minute is very quick and you just simply can't upload your document. That's it. When it's finished, you will. You know it's done. You can open the page and send a link to a client. Your client will be able to see these screens online And there you go. You have a link that your client can use.