UX Design Process and Theory: For Everyone

1. Class Preview: have you ever wanted to know and understand? The U X Our user experience process in this first class in the two part series will talk about the U. X Y basics will walk through a sample project that includes the main U X delivery bols, including user persona, profile, customer journey map and finally, a user flow dying. The second part of the Siri's will dive into wire frames as we develop a low fidelity wire friend and transform it to, ah, High Fidelity polished working prototype to test with users. After watching this first part of the Siri's, you'll have a solid understanding of the U X process as a whole and know where you exit new . I come together and overlap. Everyone needs to understand the foundations of great UX design and the process behind it. After taking this class, you'll be able to incorporate you XY Y ideas into your everyday work projects and even get a glimpse into the U. S. U I designers life. This class is for everyone that includes graphic designers, Web developers and anyone interested in finding out more about the US ey process by walking through a practical, real world project. You will be tasked with three many student projects along the way and provided with templates in the project section of this class to give you a head start to process. Let's learn together. 2. UX/UI Introduction : you x and you deserve What is you excell Ooh, I design And how are they different? You? Why design is what you think of when you think of Web mock ups, designs and wire frames you eyes user interface and its the end result of hours of research and planning by but you as a designer and by the client with their marketing team you I mix up the color theme branded assets and elements icon designs, the menu system symbols, illustrations and basic arrangement layout of the website or mobile app. UX. On the other hand, or user experience design focuses a lot less on the visual side of design and more in the overall experience of viewer goes through when moving through your design. UX design of the subtle things you notice on a website like how easy is the check out process? Cannot find what I'm looking for. Quickly, this website answers the question I did not know I had about this product or service. I enjoy using this mobile app. Both you eggs and you I design are equally important in the design process of any design piece, whether it's digital or print. First of all. How does it look you? I design Second of all, how does it feel when I use that product with serves? You are user interface design comes more natural to those who are graphic Web designers and illustrators. Because it is what we do. We create lively, dynamic images and designs that people want to see and spend time with. We create icons that match the style of the brand as well as illustrations, finding photos, toe also match and finally finding the right Quandt choices and color palettes to get the right mood for the website that matches the company's brand. Who that's a lot. But UX design is what I want to focus on. First as a gorgeous, well laid out website is nothing without a value adding user experience that achieves a user's goals and also provides them with a motivation to participate in your brands, products and services. So in short, it makes the company money. UX design is huge. Now you say this term thrown around without any thought toe y UX design so essential to the overall design process. A lot of people mix up you x and you I design, and there is a reason why these two concepts overlap in both value and goals. The color of a call to Action Button, which would firmly fall into the U I or user interface camp, can also be in a port in part of the user experience design, as that color could make it easier for them to find the button and recognize the next steps in the process, making their experience easier. Hopefully, after we study you X and more detail, you available to know where you axe and you I overlap and how to better use both of these qualities to produce engaging designs and layouts. Let's go deeper with UX design. A great way to learn about UX design is to understand what type of delivery bles are expected out of the UX designer future. Specialize in just UX design. Also, what's the overall process, like when creating a mobile app designed, for example, we're going to do just that by using some common UX design principles and systems to gather and create some UX delivery bols, so we can then focus on the user interface design and layout. So first of all, let's talk about our client brief We have a client who needs and mobile app designed and developed. They have a logo and sobre and colors. They also have a mission statement, business goals and marketing plan in hand, they need someone who can craft a visually interesting design but also meet the users goals and provide a positive user experience. A tall order, to say the least. But let's walk through the general process. First of all, let's understand the company's goal, target audience and mission statement. The company's called local grub. They offer local food and grocery delivery and smaller towns. Most companies in their industry offer fast food delivery but only toe larger metropolitan cities. This APP wants to change that and offer the same fast food delivery service in grocery service, two smaller, medium sized cities and towns. Their target audience is mostly younger folks, ranging in age from 22 to 45. Those who are busy professionals who don't have the time to run to the grocery store are busy. Parents who work and want to have more time with family and don't want to have to worry about fixing food. This company provides not only grocery delivery but also restaurant meal delivery from any restaurant within a 15 mile radius. There's an extra charge for anything outside of that radius. Being able to understand a company's goals, mission statement and target audience is an essential part of the U X process. Being able to know what type of customers your client wants can shape the type of user experience we offer, but also the user interface and visual design components. What is the unique quality? This company has the unique selling proposition over many of its competitors, and it's cos industry is the ability to offer a service that has not currently offered in many smaller towns and cities. This is the one aspect to remember when crafting or user experience and user journeys. The next step in the U X processes defined the type of users we're gonna have and the APS overall goals for those users, the company's or ABS goals would be to provide an ability to connect to both of user and the provider, in this case a restaurant or grocery store with a food delivery service, and also have an easy way to keep track of an order and, of course, pay for that order. So now that we talked about the company's goals, what are gonna be the users? Goals will wait. Who is our user? We have a target audience given to us by a company, but who really is the user? And how do we get to know them to craft that unique user experience for them? This is where user personas come in handy. User personas are crafted to paint the picture of a potential user and walk him or her through a user journey that would be as realistic as possible. Given the data we can gather. User personas could include likes and dislikes and give us more of a realistic picture of her user. In the next lesson, we're going to figure out how to create a user persona and, most importantly, talk about how to gather the data to create one 3. User Personas: So how do we gather information to create a user personas? If the company has prior data, this makes our job a lot easier. This data may include website traffic from a current Web app or a website. This can include customer data from prior customers they may have had. This may include marketing research data that was purchased by the company for Marketing research. This can also include Facebook ad campaign data and go into older Facebook targeted ad campaigns to find essential demographic and user data there. What content did they respond to most videos? Did they have high engagement with a particular ad? Maybe find out why. Lastly, this can include any customer interaction, data from customer surveys and feedback the company's received. What did customers complain about the most? What did they enjoy most about the service of the product? There's a wealth of data out there for companies who have prior customers. But what about a new company like ours? We don't have any customer databases or prior Facebook ads. Air traffic to look at this is our first challenge is a U. X Y designer must faced is finding data from limited sources. One way to gather data to create a user personas is to conduct interviews with potential customers. Being able to locate those users by using our target market information and interviewing um via a phone, Skype or in person interview can be cost prohibitive and take up valuable time. But this could be an essential step and understanding the customer and developing a proper user persona that's based on real people and real answers and data. Some sample questions you can ask during the interview process is, what do you think of the service being offered in your small town? What may prevent you from using this app or use it frequently? What is your main goal by using this app? Is saving time or money more of a priority for you? How frequently would use this app if you had it available? Another way to grab some data to help us craft or user personas and user journeys is to study the competition. What are some of the larger companies doing? How are they crafting their experiences? What did their mobile absolute like? Studying an established competitors has its advantages is that I already have a working system together and it really helps us gather some quality research and grab some great ideas. Our company's unique compared to its competitors and the fact that we offer our services and smaller communities and not just large cities keeping that in mind, we can see how the check out processes for larger companies. I can ask myself, How is my experience and using this app? How can it be better? How can we make ours a unique experience? You could also buy user data based on target demographics that the company provides. The ages were targeting fall mostly in the millennial in the generation X generations. There's a wealth of knowledge out there on millennial behaviors. Likes, dislikes how they respond to certain marketing avenues. We know social media is a huge hit with the Gen X Generation. How can we utilize that by not only promoting or mobile app, but also getting them to be involved customers who share this app with your friends after we gather enough data to work with, it's now time to develop our user persona. We will develop one user persona and craft a user journey map for our persona and some projects there'll be many user personas simply because companies will have a wide variety of users with varying backgrounds, and you could be very challenging to sum up all of their unique characteristics and just one user persona. For the sake of time, we will focus on one aspect of our potential customer base and provide a unique journey for her and your case. You may to develop multiple different personas, So using some of the data we gathered with some of the methods above, we can assess that are user persona would live in a small or medium sized city in the United States, as this won't be the only country where this app will be launched. At first, she'll be a working professional with two kids at home, perhaps two years old and four years old age. She's a married to a spouse who is a also a working professional. They don't have a lot of time to focus on making. Meals at home are going to the grocery store with four family members in the household. There always seems to be something missing from the fridge milk one day and apple sauce the next. They wish they didn't have to spend so much time preparing and cooking meals as they already only have a few hours in the evenings to be with their family. After a long work day, let's assign a name to this family. Jessica and John, who are 34 38 years of age, respectively, eat out a lot. But they also find it challenging to take a two and a four year old out to eat at a restaurant. Their income level is above average for a typical family in their town, as they both worked full time jobs and professional careers. They both work about 40 plus hours a week, with John needing to spend some Saturdays as all at the office as he is in a manager position. Have you noticed when crafting this user persona, how personal and detailed I'm getting at times you may feel like you're writing characters for a movie. This type of detail is essential to establishing and developing at proper persona people that are really authentic people in riel common situation. So back to our family of four. When creating this user persona, a few user goals start to pop in my head for this family as I start to craft their story. First of all, they're limited with time, and they want to reclaim time with family. They enjoy restaurant food but can't seem to take Children out as frequently as they would like. They seem to be missing a type of food item in their house, but sometimes it's only a handful of items not worth the whole trip to the grocery store. Now that we outlined a rough user persona in this case, a family unit week now craft a possible user journey map, and the next lesson we'll learn what a user journey map ISS, and we'll go ahead and create one for our application. 4. Persona Walk-through - Student Project: it is now time for a small student project. I want you to practice putting together a user persona profile you're seeing an example of when I created for the Smith family for a mobile app you can download. This is a pdf resource so you can take a look at the example. Also included a blank template so you can get started adding your own unique persona. You can develop a persona for a client or in made up company were created persona for a well known company where you find it easier to gather data or information. It's really up to you who and what type of project developing persona for. Let's take a quick look at this example so I can walk you through in detail some of these items. First, we have general fact information like age, occupation and income Course. It's nice to add photos to add a realistic view and picture of our persona. Next, we have user calls. These could be things like wanting to lose weight, are spending less time watching TV or even saving more money. Values is the next category. Values will be items like family first, our cares about local charities. Values are different than goals as they seem to change less frequently, and values could be passed down from other family members or be influenced by life choices . We also have problem solving opportunities. These could be pain points this persona may feel in pursuit of their goals or values. These will be important to develop or think about so we can understand ways we could start to help them solve some of these issues or problems in our design. User personas vary wildly, and this is a great starting corner guide. But there are so many different combinations of items and categories you can include that can help and depending on the project you're working on. For instance, for our food ordering app, including popular restaurants. This persona has, which could be found when demographic data and research could be helpful, knowing what types of restaurants may be chosen by the user, but also what example restaurant we may want to use for a user flow that we will work on next. Lastly, a detailed story or bio that outlined some of the details that were not originally included in previous sections. Make sure to download the template to get a quick start honor student project, Feel free to post and share your project with fellow students in the Facebook Group Project section of this class so now to develop. 5. User Journey Map: what is a user journey map? This is a journey we create for a persona toe work through the Web, app or website to accomplish desired medical. For instance, our user journey map can accomplish the users goals and solve pain points. We talked about in our user persona profile in this case, quickly providing restaurant food options and groceries in a convenient, easy to use application. Remember, time is important to our users, so providing the quickest and easiest experience will be essential way we're going to build out a customer journey map. If you research user or customer journeys, you'll quickly notice they come in all shapes and sizes, just like personas do. There's not one way to create one. There are some important qualities of a customer journey map to include and will over those during the creation of ours. When we start a user journey map, we know that our persona and our user is at the heart of this map. Everything revolves around their experience, feelings and desired outcomes for the app. So we want to make sure we define which persona this map is for so obviously Jessica, which is the wife of the family as we may have multiple users in multiple user journeys. We also define their scenario for the journey. In this case, she wants to order at a restaurant dinner for her family of four, but she doesn't know yet where to order from. She saw an ad for this app, downloads it and gives it a try. We will then define our goals for persona for this particular journey. This ordering process that she will go through in this journey map will end up becoming the basis for creating our user flow diagram. It will also help us when we start to develop. Are working wire frames so we can show the client our thought process behind why we made certain decide design decisions later on in the U. I design process. The first thing we focus on and creating your customer journey map is to find out how many and what stage is the user will go through to complete a transaction. In this case, we have a first stage which would be downloading and installing the app. They have to find out about the app somewhere a social media add a friend mentioning the app. This is an important first stage to include because it is part of the overall customer experience, a second stage in our app will be. Once they open it, they will have a discovery stage. This is where they discover and find the type of food they want to order. Ah, third stage could be a check out stage. This is when they selected their food or restaurant or grocery store and they get ready to purchase the items. Lastly, the fourth and final stage will be the delivery stage are which you could call the consumption stage, where the product is delivered and consumed. There are touchpoints and opportunities to create positive experiences as the user percent of moves through the stages. Let's next identify problem areas at each stage so we could provide a counter are a solution to those negative problem areas. These problem areas can be written from the personas perspective, giving another chance to view possible problems through their perspective. Problem areas for a first stage would be a problem in downloading the app or having any issues with opening it are using it on their phone. A possible solution will be providing regular updates to the app to provide a seamless integration and a wide variety of phones. This may be more of a software development solution that we may not have the ability to control ourselves, but bringing us up in a way that you ex you, I designer, can think holistically about the entire customer. Experience is important. It's also nice to assign which company department may be able to help with each stage of the customer journey. For our discovery stage, which they open, the APP is where most of our problems could arise. The user has two main options. Grocery delivery and restaurant delivery. There could be an issue in figuring out which direction to go or how to access each one. There's also the issue of finding the right restaurants to order at. If I've never eaten there before, how do I know if the food is any good? How do we know what they offer and how much the food is? If the price changes frequently for our third check out stage, Ah, problem could be that the user may be distracted and needing to check out very quickly. There may be concerned about how simple and quick this process will be because sometimes check out stages ca NBI overwhelming for first time users Another problem area could be not clearly communicating the total breakdown of the order. How much was the tax? How much does this app cost me to use for this order? Lastly, for our delivery stage, a problem. Mary could be knowing where my order is. How long until my order arrives? What if the food is cold or not? The quality I was expecting? A second issue could be that she placed the order, but she forgot to add one last item. Is it possible to change my order before it goes out for delivery? What if they need to contact the delivery person to tell them that they need to park at the bottom of the driveway as construction trucks are there that day? So really, it's about communicating with the restaurant. Is that possible? Now that we have some problem areas defined, let's now definer user journey through each stage. This will be actionable step. She will go through to get to her end goal of ordering restaurant food from the app quickly . The first step seems obvious. Butts nice to include his part of this journey, she will need to download and install the app, but she'll also need a log in at some point before she could start the process. Next, you'll want to click on the restaurant delivery option in the home screen, sending her to a list of nearby restaurants. She will then look at the list of options and choose ah highly rated one toe look at more details and what they offer. She adds a few items to her cart and perceives the check out stage. She wants to review the details of the cost of the APP and then click on the start delivery button. Lastly, she'll go to a map page where she can then click on a button toe. Add to her order these steps in our journey to be simple and brief. We could save all the detail app interactions for every user flow diagram. We will do together next and save the visual design components from when we put together our first visual wire frame. This just helps us know where she is in the journey. In each stage we have some problem areas and possible solutions. We also have to consider user persona goals for each one of these stages, our main users goals that would be echoed throat all the stages would be saving time. Some opportunities to achieve the Caesar goal in each stage would be in the first log in stage. A possible solution to having a quicker log in process would be to provide a Google and Facebook log in where the easier does not have to set up a user name and password if they have those Loggins already available now for Stage two or problem was being able to send the user to restaurant and grocery and the easy way. A possible solution to this is providing a starting screen that directs the user to select one of two options between restaurant and grocery. Making the screen obvious is possible to reduce any confusion the user may have and to save them time and getting to their end goal of ordering food at a restaurant or grocery store. Another problem in the discovery stage is not being able to find your favorite restaurant very easily, or if she has a restaurant she does not know about. How does she know if that restaurants good a solution could be to provide social proof or user reviews for either other APP users are grabbing reviews from partner restaurant sites like urban spoon dot com. We can also provide up to date menus that also populate from frequently updated menus found on Google our user persona and Stage three. The check out process once is to be very quick. She has a two year old on her lap. How we have a solution toe. Have this be a very quick and easy process? We could make sure check out screen is clean and also has all the details needed to be included, including a tax item and also how much is being charged for our service. Being open and transparent about the cost of our APS is important to both the customer and our company values in the check out stage. Our problem was finding out how much time it will take for food to arrive. Our solution could be to provide an onscreen map upon check out that shows the E. T. A of the food based on the location of the delivery car, similar to what you see in the uber app. A solution to our second problem about needing to change in order after placing it is being able to provide a button on this map screen that gives you the chance to call the restaurant to provide any last additions to order or have the ability to send a text message instead. So we identified our stages, problem areas, solutions and how to incorporate ER users goals into each stage. We have just created a farm first user journey map. Now it's time to get more detailed as we work on user flow. Which brings us one step closer to the U I design side of things. But first, I want to talk about your next many student project in the next lesson. As you work on creating your first customer journey map with the help of the newly developed user persona, I have provided this user journey map for this project as a downloadable. PdF so you can look at the finish map in more detail. Also provided a blank adobe illustrator based template that he can customize to create a journey map for your own persona toe walk through 6. User Flow Chart - Detailed Walkthrough: What What is a user flow chart? Laser flow chart is a map that outlines the exact actions a user needs to take to complete the journey or process. It focuses a little less on the emotional response, like customer journey does, but more on the exact technical steps she needs to take to complete her action. It also shows the different possible pathways, these air contagion, how everything is connected and eventually loops back around to the user. Home screen user flow maps Originally derived from flow charts, you've probably already seen flow charts at some point in your lifetime. Ah, lot of flow charts have funny means that outlined different results by showing the end result of a series of simple decisions you make. Depending on the combination of decisions you make, it will lead you to a different end result Goal. These airflow outlines all the technical steps it takes to complete the process. It's important to sketch out the user flow to know how many screens or steps we need to have to set up for our design developing a user flow chart and help us eliminate any unnecessary steps to simplify a process it could also help us know if we're missing a key step that we need to go back to the drawing board and edit. In our case, they download install the APP and they open it up, and that's the first step in this user flow. In a minute, I'm going to open up a program called Overflow. It is currently in beta. Why filming this portion of the class? But it's a fantastic program to develop a user flow chart. Adobe X'd currently does not support user flow charts, so it's nice to find a program to help you construct one easily, even if you just have Adobe Illustrator even just Power Point, you could put together a nice user flow chart. As long as you have access to rectangles, arrows and lines. You have what you need to create one. The example for this class does include some very basic layouts you'll see, but just enough to show a little visual to know what buttons were referring to in the process. I don't feel like you have to start doing any kind of layout design. I just added it to help explain to use your chart further. We're still in the U X camp. This is not what, quite fully in the U I or user interface camp yet, although this is a step where you X and new, I really start to blend together as we think about button size, quantity of buttons and placement on a screen when we create our low fidelity wire frame. Next is where you wire user interface really starts to take over, and we think about those design details. The look and feel, the colors, the branding in the icon design. Let's see an example of a user flow for our food delivery app. You'll notice as I work through this example flow chart. How design decisions air starting to be made So here I am in the APP called Overflow. It's currently in beta, but they could be out of beta by the time you're watching this video, but I've really enjoyed playing around with it. I'm gonna have a list of some really great programs that you can used in the Resource Guide in a downloadable resource guide at the start of the class. That kind of list some other ideas are other programs you can use to create the same thing . You don't have to use this program. You can use anything as long as you have boxes, rectangles and lines. You can create a use your flow chart. So I'm here and this is kind of the flow chart that I developed for the class. We're gonna kind of work through it and kind of show you how I constructed this and all the different decision trees are splits and decision that our users gonna go through and other ones that we could explore as well. So this is kind of a basic set up. Ah, user floors could explore all the different possibilities a user has. I'm just gonna go into a lot of detail. So in the end, if I were to map every single decision out that someone could make this tree would be a lot bigger. So right now, I'm just kind of focusing on the one decision tree that are user is going to make our user persona. We're gonna do that just for the sake of time and having a really simple user flow to kind of teach you the basics of putting ah user flow chart together. So here's kind of the log in screen. And what's great is when I was kind of thinking through the U X side of things and thinking about my personas journey. I wasn't necessarily thinking of that log in screen. And so this is kind of one of those moments we start to put in the user chart. You go, they need to log in and they need to have several different versions ways to log in and we need to make this process really quick and simple and easy. We don't want them to have to have this long sign up process. So here's kind of the home screen or obviously need to log in. But I thought, you know, kind of doing our user journey, Matt, before we discovered wouldn't it be nice as a solution to have the ability to log in with your Facebook? Let's say Jessica Reserve persona as a Facebook. It would be nice if she could just cut the whole log in process and log on through Facebook . So that's kind of one of the things that we developed in our UX process. It's nice to start to incorporate that into the actual design, so we have the two different options, and this is where we have our first decision tree or kind of split on decision. They can sign it for a new account, and they go up here to this screen where they can sign a sign up for an account. Or they can go down here and you can just click in and allow acts Facebook toe access or allow this app to access the Facebook data until log in. So there's two different ways that they can log in. But it's all gonna get back to this home long and screen right here. So now that everybody's got eventually, all users are gonna get back to this home screen and what we discover during are you X processes that wouldn't it be nice to be able to easily direct people to grocery or to restaurant delivery? So it's kind of a very archaic design. It's not really meant to be a wire friend quite yet, just kind of basic blocks. We're presenting grocery and restaurants. Eventually, those will become nice photos or icons, whatever we want to do. So here we go. We have another decision tree. The user is either gonna select grocery and go up to the grocery list options, or they're gonna click out restaurants and go town to the restaurant. So you'll notice some kind of labeling these different decisions. So this will be the log in Facebook. This will be the sign up and finish. So each bubble will kind of just tell where where it's gonna go next or what decision they made that's going to make that decision. So here we are at our second decision Tree. So according to our aux discovery phase, she's gonna go through restaurants, is gonna select restaurants, and she goes down here through the restaurant selection and comes down here. And she's offered kind of a list of restaurants. And also we do need to explore in or usually chart the possibility of what happens when they click on grocery and they are gonna go to grocery and they're gonna get the same list . And what's great about having this is grocery and restaurants or both get a display, a very similar flow. So the same options you have on restaurant are gonna be the same options you have on grocery the same basic options. So what's great is we can explore this one extensively and just assume that will have the same options on grocery, so I don't have to necessarily repeat that as well. Keep the flow chart a little more simple. It's okay. So we have the list of restaurants down here. We have restaurant, one restaurant to let's say she really likes. There's something compelling, Maybe about the review about restaurant to it seemed to have a high review. She selects restaurant, too, and then now we're everybody goes to this map screen that will have, you know, kind of a map with this is this is what's great about use your flows and sometimes in terms of the design, you know, how do we know what we need to include? And this is really kind of the start of that process and thinking about what do we need to include on the screen? We want to be able to go back. We never want to have a closed loop. We always want to have a loop that always goes back to the home screen at all times. We never want to trap people in a certain decision tree, and they have no way to go back so we always want have a back button. So this is why I have the back button going back to the home screen. They always have an option to get back into those air. Really important things that you think about when you put this together. We also want to think about all the elements to do. We wanna have a map. Do we not want to have a map? What kind of details? We want a list. Do we want a list menu options that go down here and how Maney menu options are gonna be on the first screen. When did they need to scroll? These are decisions are going to be made next when we do the wire frame. But for right now, we're thinking about very basic decisions. So they're going to see a map. They're gonna be able to go back there, will be able to access your cart. You gotta have a button to access the card at this point in the check out process. So let's say these air menu items, so it probably just re title those menu. So this will be menu options, and so she's gonna add to the menu option two. Just get a click and then what happens? And this is where we have to kind of flesh that out a little bit. It's kind of were really have to brainstorm and figure out what we want this process to be like. And so you'll notice kind of how I have blue kind of blue is kind of a forward. We're moving forward into the process, and red indicates moving back in the process. And you could make it any color you want as long as they're differentiated. So when I zoom, attic and see okay, Red is going back to the home screen and blue is moving forward into the check out process . And so that kind of helps keep my user float clean. And I know a lot of people do this all gray, but I like to have color coded. It kind of helps when clients view it. They don't get confused about what's happening cause you could see all these lines and it gets really confusing and even up here with grocery. I made it orange, and I thought I would make if I continue to move that onward in the process, I will make all those orange eso You kind of have these different colors to kind of show different decisions and paths. So anyway, we're gonna go back here, and so they're gonna click on. They're gonna add a menu item so they'll add on a menu item and that won't take him to another screen. It will just add to the cart so I don't have to take him off the screen, and then they can go up to order now or but a cart. So let's say they click on finish your order. We haven't thought of the exact wording yet for this yet. That will come later. So let's say they click on the cart. It's gonna go down here to order now, and they'll be in order now screen. So this will have the total have taxes. It will have all the menu items that they're gonna have. You could see my very basic archaic designed. This is not you I design yet We're still just kind of blocking things out, and we're gonna have an order now button. So they're getting closer and closer to the finish of this order, so they're gonna go order now and So this is a decision tree. Let's go ahead and go back. They could also click on the map if they wanted to see where the restaurant was located and we'll click on the map. Go up to this map. Screen was great about this map Screen Nails was shown nearby restaurants as well, and it'll show on E. T. A. Of what they put in their card and how long it will take for that restaurant to deliver it to him. So it's go show their red restaurant that they selected. That's Oaks gonna show nearby restaurants. Second, also deliver in a timely manner. So it's kind of a chance for them to continue to check out other restaurants. Whether finishing the order here to see it would be quicker they want explore another restaurant. Thank you. Click on continue order and it's gonna go right back to the map. Or this is where another decision trees gonna happen. They can click on this other restaurant that might have a better arrival time, and it's gonna click on restaurant number one. So this is gonna go back to restaurant number one listing, so it's kind of kind of move them toward that direction. So there's all these little decisions that we need to make. So let's go back down. So let's go through. So Jessica, or whoever or user's gonna be for this user flow chart has gone to the home screen. Earthy order. Now page, basically the shopping cart page. If you want to say the check out page and she's ready, she wants to order. So she places her order so she clicks on order now, and it goes to the map with the E t A. And it has a button because remember, we discussed how a possible solution. She wanted to know if she could change your order after she places it. She made a mistake. She was rushed. She didn't have time to properly place the order. She wanted to call in at a drink or add an extra order. We wanted to have this button where they could call or change the order. So you press that button, it's gonna call the restaurant. It's also gonna give you the text option is gonna be whatever is gonna be on the phone's gonna pop up with a text or a message or a phone to be able to contact the restaurant to change the order. And we'll go down to this where they could change her at order and they can change order. And then it will go back to the review screen where this is upon successful delivery. So it's going to go back. So this seems complicated. I want to kind of go through all the details. We can take a look and feel free to download this as a J peg. I have this as a downloadable resource so you can look at this in detail and take your time to see kind of a thought process I went through with his project also give you some other ones to take a look at. So you can kind of see how did kind of construct your own flow chart is going to depend on what your product is gonna be. Your your your app or website will have so going back to this process. So here's kind of a loop, so we have the decision to change the order, so they're gonna change the order and go to this screen, and then it's always gonna go back to this review screen So once they change the order, they're going to get ah, successful delivery kind of pop up screen, so it's gonna pop up with their e t A. But it's also going after delivery. They're gonna get a chance to review the restaurant because I was really important to the client to make sure we get a lot of reviews so we could get authentic reviews for our different restaurants so we could have really good reviews. Um, because we don't want to depend on Urban Spoon forever to grab a reviews. We want to get our own reviews. So this is gonna capture that either review the APA review the restaurant. We need to kind of figure that out as we move to the next stage. But see, everything will end up popping to this screens is kind of the final, successful delivery screen. We've gone through the entire process of checking out. Now they're gonna be able Teoh review, and then that's it. And then we're done, and so they always have the chance to go back. Maybe have a new order so you could see this red button is going all the way back to the home. screen. We always want to give him a chance to go back to this choosing between grocery and restaurant back to the user home screen. You could see how things are a looped and how we have different decision trees and different branches and how they may be. Come back to the same screen, you know, kind of concede the complex nature off the different decisions that they could make in this app and being able to outline all this is so essential, because when we get to the design phase, we're going to know exactly what buttons we're gonna need toe have on there. A lot of those will be planned out for us. So when we get into the U I desired things or even pass it along to a U I designer, they'll get have a better idea of the required kind of steps and thought process. And you do the same thing when you do navigation on websites. When you plan a navigation, you find out what's on this menu. What's on this sub menu? How are things linked? It's the similar process. Ah, but this in this case with the mobile app. So if you're doing a desktop website, which you could totally do that and still follow along with this class, you're going to make those same kind of decisions. What's the navigation gonna be like? What buttons. They're gonna go where you're gonna be able to map all that out. And in my case, I put a little visual with it where you have different buttons and I think that really helps. But you don't have to. You could make a very simple archaic just, you know, user flow. Where you have tried are you have kind of these diamonds that that indicate decisions and you have the rectangles that indicate a step or baby action a user takes. You could do it very simple, but as a visual design or someone who definitely is gonna take part of the u I process, I wanted to start to block things out in a basic way, to know kind of how many how the buttons were looking and kind of. And we're gonna be able to fit all these different options on one screen. Or is it too much so anyway, that's kind of the basic. I just want to kind of do a basic explanation of user flow chart in a program kind of show you what that looks like. So hopefully he's enjoyed kind of this dive into the user flow kind of charter developed for this class, and now we're gonna be ready to move on to the next step. 7. Wireframe Introduction : So the outline Our process. So far we've gathered user data created a detailed, authentic user persona. We created a customer or user journey map that outlined the different stages. The user goes through problems and possible solutions. Lastly, we created the user flow chart to outline a journey to a process in detail as well explore other possible decisions and splits and direction. So we know what buttons we need to think about it need to include. And so we're ready for low fidelity wire frame. A wire frame can be hand drawn, are created in the software program like Adobe X'd. It takes our user flow and creates a more detailed version by adding areas where photos may go button locations and how things will be laid out and presented. Wire framing can take a lot of the guesswork out of the U. I process Later down the road, when this app starts to enter the development encoding stage lo fidelity wire frames differ from high fidelity wire frames and that they don't always contain colors, photos or final icon designs. They usually consist of rough, blocked out layouts using a different variety of white, gray and black boxes, and this gives us a good sketch and gives us an idea of size, Ah, location of certain elements and gives us a sense of the overall basic design elements and user flow. We will use our user flow to give us a great starting point and give us time to focus more on the details of the layout. How many photos will be on a screen where the text might be placed? Maybe the size of the text? Or maybe does the screen scroll a high fidelity wire frame has all the bells and whistles with color branded elements and photos incorporated into the design. These air very polished final designs High fidelity wire frames can eventually be linked up to create working wire frames that allow us to use and test our design and application in real time without having to develop the app with developers. Wire framing Conceive a tremendous amount of time, especially developmental time, as problems could really start to be worked out in this prototype wire frame environment, where it's much easier to change and switch out layouts and flow, as opposed to having to change coding after it's been coated and developed first will be developing our low fidelity, simple wire frame and Adobe X'd. You can use the traditional pen and paper for the step is, well, as we're just getting a general idea and of layout and position of elements based on the research and data we have so far, I prefer to use the wire frame and prototyping program like Adobe X'd or sketch first for the low fidelity wire frame, simply because it's so much easier to turn it into a high fidelity wire friend later. Once you have everything set up, if you hand sketch or draw your low fidelity wire frame, you have to eventually get into the digital space to create a working prototype. So sketching it out on the software program instead of hand drawing it can save a step in the process. Although I never want to discourage anyone from sketching with traditional pen and paper. If that's something that helps your creative process, we're now gonna happen to Adobe X'd and get started with our first greed. The log in screen. I hope you enjoyed part one of this you XY Weichel series. Part two will be released in less than seven days and an email notification will go out when Part two is available and Part two will start off an Adobe X'd. Creating are low fidelity, wire frame and basic layout for each green. Then we'll create a polished high fidelity wire frame that'll match our brand colors. Look and feel. Finally, will link are high Fidelity wire frame to create a polished final working prototype. We can then test with users to gain critical feedback. If you've not been in Adobe X T before, I teach in Adobe X'd masterclass here and skill share that can give you a great start on learning that program before we dive into creating are Working Ryan frames in Part two of the Siri's. You could check out that class by heading to my skill share profile. I look forward to seeing you in Part two of the series. Also make sure to check out the project section of its class, where there's three. Many projects where we get to work through the three different projects in the class would love to see your projects. Please post them. I'd love to give feedback as well, but also love reviews. I'd love for you to give me feedback and how you work through this class and what you think of this class. And I can't wait to see you in part two of the series.