User Experience Design college course, intro to UI & UX design taught by a University UX instructor. | Aaron Lawrence | Skillshare

User Experience Design college course, intro to UI & UX design taught by a University UX instructor.

Aaron Lawrence, UX Instructor & Product Designer in SF

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (4h 49m)
    • 1. 1 Class intro with Music new

      21:18
    • 2. Set Goals for your UX Design Decisions

      24:56
    • 3. Create a UX Design Persona

      15:12
    • 4. Create a User Interview Script & Research Best Practices

      23:20
    • 5. How to do UX Research Synthesis and Write a Problem Statement

      16:50
    • 6. Create a Customer Journey Map

      18:19
    • 7. Sketching Concepts and UI Sketching Frameworks

      7:59
    • 8. Create A Wireframe Design with Adobe XD

      38:01
    • 9. Create a Clickable Prototype with Adobe XD

      22:25
    • 10. Create a User Testing Script & User Testing Best Practices

      21:01
    • 11. Learn How to Create a Design Systems

      15:19
    • 12. Apply Visual Design to your Prototype

      37:36
    • 13. Do's and Don't's with Design Resumes

      7:05
    • 14. The UX Design Case Study Outline

      19:15
110 students are watching this class

About This Class

In this Class, you learn all the methods and techniques to create a UX design case study. 
These are the same materials that I teach at the Art University in San Francisco.
Here's what we will cover: 

How to set goals
How to create a persona
How to create a user interview script
Best practices when conducting research 
How to synthesize research findings 
How to write a problem statement 
How to create a customer journey map 
Sketching templates & frameworks 
How to create a wireframe design 
How to create a click-able prototype 
How to do user-testing 
The basis of a design system 
How to apply visual design to your wireframe 
Best practices when it comes to design resumes
The outline of a good UX case study

Transcripts

1. 1 Class intro with Music new: Hey, welcome. Thanks for checking out my class. My name is Aaron Lawrence, and I'm a principal UX designer for a company called Pivotal in San Francisco, California. I'm actually out the office. This is my desk where I work most of time. I've been doing designed professionally for 13 years, and I also teach advance UX design at the Academy of Art University in San Francisco, about three blocks away from the office that I'm at right now, very passionate about design. And I want to share my passion with you in the next series of videos. What makes these videos unique is this is the same curriculum class of material that I teach at the university level, but in a digital format and now available for everyone. I'm really excited to do that. And I hope you're excited to learn it. Let's go take an overview of the class. The materials that I'm gonna share with you. Come on, check it out. All right. So what is you, X? What's the origins of it? And if you look at it, what I'm presenting right here is the U and the X comes from user experience and user experience. is exactly what it says. You're designing things for people to use. So it's really important to know in a lot of cases that you're not the user of the products that you're designing for. So you have to go out and learn around these people. You have to validate that. The solution you're designing actually works for these people. A swell. So what's the difference between the common you X and term and you? I terminology. So I like the analogy, which is a cookie. So user interface designed in the analogy of a cookie is the actual cookie itself. It's how it looks. It looks chewy. It looks chocolatey. It's not neon green, and it doesn't look like it's going to get you sick. The first thing you're going to do is you're gonna eat with your eyes so the cookie must be appealing to me visually first, So I see the cookie. It's nice and warm as chocolate goodness in it, and then I eat it. And when somebody asked me, how was that cookie? And I tell them it was really good, but I wish it had more raisins in it. The active learning how it Waas. That's you X. So asking somebody the why and how was that experience? Is the user experience craft, while the user interface craft is learning around how to create things visually, so I hope that's helpful. But just in case, let's go deep dive into this topic of you x and you I. So what is successful? You x successful user experience design is connecting business goals to customer motivations and create in salute, creating solutions that achieve good outcomes for businesses while solving the needs of the customer. So it's important that you understand the goals of the business, also the motivations of the customer, and you're going to solve things that benefit the business and also solve the needs of the customer. I like to think of user experience, design and very two big giant buckets. So first you have the strategic at the top left. That's really focusing on the business, the purpose and the human. And as you move forward in time to the right, you'll get more tangible. That's dealing with the design that systems. That's medium, and that's a motion. So the start you usually start with the problem. What's the problem that you're solving. And as you move forward, you get into the solution. Another way to frame that is the current state. The current state is the problem, and the future state is the solution. So in UX design, you have three big buckets of design. You have research here. You have interaction design here and you have visual design over here. And this makes up most of what we call you x and you I you can see in most of the industry . U ex is within research and interaction design this half here. And you I is interaction, design and visual design. Here at the company I work for re practice. All of those when we call ourselves UX designers were actually referring to being you x and you I designers the complete full stack UX is, as we call it. So let's go ahead and start with research. Research is over here on the left. What you're doing is you're understanding the human and the needs and the goals. Ask yourself these questions. What does the person I'm targeting the human need and why do they need it? And the next series of questions you can ask is what is the content and the context in which they need to solve the problem that day? Within research, we have goal setting. We have marketing, market and competitive analysis. We have unbalance dated personas, validated personas. We have empathy, maps, assumption, setting problem statements, scenario writing buildings, user interview scripts and actually doing the interviews. Generative research, user testing, synthesis, clustering in an effeminate affinity, mapping information, contextual enquiries. And you haven't evaluative approach as well. I'll be teaching you some of these methods in the next series of videos. So if you don't know what one of these some of these things are, that's OK. We're gonna learn these as we continue going forward. Okay, The next big bucket that makes up user experience Design is what's called interaction design. This is starting to think about why airframes and prototypes and design systems and after you've learned a whole bunch of round research and you've learned around what content people need to solve the problems that they have, you can go through and ask yourself Now what is the best interaction model and you? Why user interface real estate for the content and the content order hierarchy so I'll get more into this in the class, but what this makes up is information, architecture, information, modelling, interaction, models, service design concepts and sketching you. Why assumptions and validations? Layout and compositions, design patterns, device paradigms, design tools, transitions, prototypes, a component or atomic design. Okay, the next thing you do in this big, large approach of work that we do is what's called visual design. And this is the emotions and aesthetic piece of the pie. Once you have validate an interaction system that your wire frames your design, solves the intended problems and achieve the outcomes of the business, you can go now what we call make it pretty. So this point, you're asking yourself what is the best positioning of graphic elements and how do they serve? Serve the visual and emotional intentions and this bucket. Here we do mood boards. We have a use of delight. We do visual storytelling. We do lay out in positioning color theory. Typography U Y trends were doing icons and illustrations were doing style guides and systems, and we're also exporting assets for developers to use. And during this big process, if you look here on the bottom, how it works is your usually uncertain. So you do a lot of research to get gain your certainty and gain your understanding around the domain that you're in. And that's why you start low fidelity because you're not sure. And as you move into design in the interaction design, you're still uncertain. But you do usability testing and usability testing on the application that you're working for your or the solution that you're trying to figure out more about allows you to get more certain in this process. And so once you're certain you can really go in and apply high fidelity and make great looking applications and you I during this stage. But you don't start there when you're doing research because you're uncertain. So the balance between uncertainty and being certain is the name of the game. All right, so let's move on. Next thing we're gonna cover here real quickly is the do's and don't of UX designers. Some con's say this is the difference between what user experience designers do versus being more of a graphic designer. Nothing wrong with being a graphic designer. I used to be 12 as well, but let's go over to the Do column here, and we're going to go line by line. So what a good UX designers do they designed like scientists and they decide, like lawyers. A lot of their approach is to design is an experiment, and the way they design is not with opinions. They use logic and reason things they don't do, they don't be decisive and they do not have evidence of decisions. They just make opinionated decisions, Right? So all the decisions want to be coming from research or interaction, design and usability testing. And we don't want to be opinionated here. This is around using logical user research user centered design methodologies to help you make a decision. Next thing they do is they lead discussions and extract information from others because they don't usually know a lot around the domain of their targeting. So they have to ask people to help them fill that void. The one thing they don't do is stay silent and not participate. This person over here sets and thinks about goals and risk and impacts and outcomes and priorities. This one over here now they just do things and they don't know why this person over here to the left solves problems with design and sets opportunities for new learning. This one just wants to make it look cool. One on the left here is always thinking about the users and their needs and their goals. The one on the right here. I just want to design at my away. The one on the left here collaborates with the business product managers and engineering One over here is no empathy for others and never giving involved. It's one of the left has designed reviews means they share their designs with other people . They have critiques with other designers, and they share their design with everyone. We went over here not sharing. Just want to do it my way. The one on the left thinks about design as a system, and they re use the user interface components, the one on the right here. No design patterns, inconsistencies and everything they do is a one off. They don't reuse it. They re create one of the left here, is aware of time, feature complexities, business goals and costs. One of the right strategy. Well, what's that question? What is that? What is I don't know, strategy one of the left here does just amount of design to achieve the learning goal. That's called lean user experience. Whatever here does it all up front. Big design up front. What they call that the one on the left here is always testing their design and their assumptions. The one the right never leaves the office just stays in the cubicle. Doesn't learn around the people they're targeting. All right, so let's keep going. We're going to start now into the introduction to the class. So we're gonna do is ready to user experience design 101 And overall, this is the same curriculum and class that I teach at the university level. And the outcome of it is a case study. So what, you're gonna learn all the methods and the tools needed to make a solid UX case study and let me go through all of the things that we're going to go through in this class. So in this class you will learn how to set goals, how to create a persona, how to create a user interview script best practices when conducting research had a synthesized research findings, how to write a problem statement how to create a customer journey map sketching templates and frameworks. How to create a wire frame design, how to create a clickable prototype. How to do user testing, the basis of design systems, how to apply visual designed to your wire frame and best practices when it comes to design resumes. All right, so let's go take a look at all the class material that we're gonna cover in the next round of videos. So I'm gonna close out my preview, and I'm gonna come to the case study, so I'll give you the case, Study example, the end. And I'm gonna quickly run through all of the material that we're gonna share on all the topics that we're going to cover. But you can see here's all of the topics laid out in one website and again, this is what I teach over at the Academy of Art. And the first thing we're gonna cover over here is we're gonna come to the kickoff meeting . This is where you go through All of the goals and the goals that will cover will be the business goals. I'll talk about that. The product ghouls, the users and their goals the stakeholders. These are people that have a stake in your project thes air. The clients you should know about them is the people you do design reviews with and the risk that you may face and how to mitigate those risks. Okay, the next thing will cover is we're gonna go look at the framework to create a persona and persona. Looks like this, and we'll learn. Rye personas are important across the process of creating a persona. And then we'll look at how to build an interview script. And I have templates to give you a swell. So you get to download some of these templates and you get to fill them out for yourself. So I'll teach you how to build a script. And when you get down to building one, well, actually give you a template to go use, and you can fill out this temple questions and you can go run out and you can interview people that you're interested in. And I will also give you the interviews, best practices. So how to go out and interview people and take notes and record these interviews. So that way you could come back and you can do the synthesis and the clustering. So this is where you take all the information that you found during research, and you make sense of it. You look for patterns, and these patterns helped direct your solutions or the problems and validate the problems that you're trying to face. After that, I'll teach you how to do a problem statement. So after you've learned around the people in the problems, you can restate the problem. So that way you can go and design solutions around these validated problems. After that, we're gonna learn the customer journey, man. So you can come here and you can map out the journey you're gonna put your customer on. So that way you can start to sketch for this journey, and I'll give you examples of this during each video. This will be the longest video of the class. Most. The videos you will have will be pretty short sessions. So should be easy for you to pick up, learn and do for yourself. After you've done the customer journey, map will move over to concepts we learn here is called the Value Propped. Kind of looks like this. We'll learn more concept frameworks like a four up learn, another technique called the picture frame. I'll also point you to other websites. We confined more cool examples of how toe do drawling and do concepts as a team, as a group or by yourself. After that, I'll teach you all how to make a wire frame. So I'm gonna come over here. I'm using Adobe X D right now, and I've created a wire frame workflow on how to deliver Boba tea to your house on demand. So the gold. This application is to get Boba tea delivered to your house whenever you want it within San Francisco. So let's go ahead and play this prototype. I'm gonna click around on it. So loaded I'm gonna do my first name and last name. I E moments signed up for the application. I see the sign up. I could see all of the Boba tea application of drinks that I have. I can add one. I want this one to be not regular sweet, but just semi sweet. And I want large tapioca. I'm gonna press ad. I'm gonna go check out. I'm gonna see how Maney Boba tea drinks. I would like to order. Just one is fine. But a press. Next, I'm gonna put my street and my address in. I'm gonna pay for this Boba tea. And now I see it on a map, and it's gonna come deliver to my house. Sweet. Okay, So what you'll learn next is to take that wire frame that you designed for your case. Study doesn't have to be Boba tea. Whatever design you come up with and you'll go out and you'll do usability testing. But before you do that, you're gonna have to do a user testing script. So I have a template for you to fill out on how to do that correctly, and I'll give you best practices of user testing. After that, we'll learn designed systems. So I'll give you the whole thing around. What a design system is out of approach one. What a style guide is And there's a lot to dive into here is well, and once you understand that we can take the Boba tea application, I'll do another round of video to show you how to take this design here and make it visual . So you can see now we've added the visual design to it. So I'll go through this again and more of a visual way. I signed up. I could see all the boba tea. They're sweet. I want a regular milk tea. I want it with regular Set our semisweet about large tapioca. I want to add it to the cart. You can see it's been added here, but I come over here having a quantity I can edit. I can remove things. I learned from Reese Usability testing. I pressed. Next I put my address down. We also learned people wanted to be text. When they're Boba, Tea was was gonna be delivered. So we added the phone number here. Based off the usability testing that we did, we pressed. Next I put my credit card information in and watch this. The ball was going to come to my house on delivery. We got five minutes, two minutes, and it's almost there. Yea, I have Boba tea and I get the tax that it's delivered at my front door. Not can go meet the person, have both Okay. And what you could do at the very end of the classes, you can create a case study so I'll do a class on the case study and what the framework of a proper case study is. So you have the wow image, the final design that you did. You could do a little bit about yourself. You can show your goals, the product goals, that business goals. You can talk about the problem that you go out and face. You can do your personas and a very cool looking way like I did here. You can talk around your assumptions or you're learning goals. These are the questions that you want to go and learn about for the people that you targeted. You'll go do research. You go talk to people. I want you to take photos of those people that you're talking to. You can make user quotes about what you heard. I'll teach you how to do this synthesis like you're seeing pictures here. You're gonna do the learnings and findings, which are the patterns that you found. Your gonna make decisions of those patterns. You're gonna come back and re create restate the problem statement you're gonna do sketching and concepts to take pictures of those are going to sketch out ideas. You're gonna do customer service customer journey maps. You're gonna create the wire frames like I showed you in the Boba tea application. You're gonna go do usability, testing and user testing like we got here. Show pictures of that. You're gonna outline your learnings that you learn during user testing. You're gonna dial up the fidelity, make it pretty, put all the nice designs into it and icons and illustrations. And then I can click on it. And I could go see the final one here that you've created pretty great. So I'm excited. I hope you are. Go ahead and check out all the other videos and we'll do a deep dive into each topic that I over viewed with you and I'll end on my website here. Aaron Lawrence design dot com Case. You want to see more of my work, And I thank you for spending the last 20 minutes with me and hopefully you'll enjoy the class by 2. Set Goals for your UX Design Decisions: All right. Welcome to video. One of the how to build a UX Design case study and UX design one on one. One of the first things we do before we go through all of the processes of making designs and research is we don't understand our goals. It's the first thing we do in UX design and what types of goals should you know And who has this Thies this information and how do you extract this information or things I'm going to show you in this next video. And remember that what is successful you x you X is all around connecting business goals to customer motivations and creating solutions that achieve good outcomes for the business while solving the needs of the customer. So it's important that you understand the customer needs, but you're also working on software for business. So you have to know what are good benefits and good outcomes for the business when they plan to build and create and launch software to the market and what makes up a market. A market is a bunch of people that you're targeting to solve their problems and you solve it with content within software, so Why is it important that you understand your goals? It's important because it helps us understand the reasons and the intentions of why we're doing the work that we're going to do. It helps us evaluate what is value in our designs in our solutions. And if you remember, art is an expression where design has intentions and motives behind it. So all the UX design decision should be mapped to reason and logic and understanding. Different goals are important aspects that regard to the reason why you're solving a certain problem and how this solution intends to benefit the business, an overtime product managers and UX designers will have to track and measure these solutions and see how they're helping the business achieve these goals that we're gonna learn and lay out today. So in this video, I'll show you what's called a kick off meeting. This is where we meet the people that have these goals that have this information, and I'm going to show you the framework in which you extract that information from these people. All right, now that you're you have access to all the videos, I want to show you where you can access all this information that I'm gonna show you throughout this class. It's a website, and this website is called ux honey dot com. You can see the logo right in the center. I will also have documentation attached to each video that you can download and use for each topic. So let's go find where you can learn around the kickoff meeting and the goals in ux honey dot com. So if you come to you x two here, you click on this and you scroll down and you see where it says the kickoff meeting. That's the number one thing we do first before we go into the case. Study example. But let me open up the case study. Let me show you how the outcome of learning these goals will look on your case study so you'll have a kick off meeting these air. What these meetings look like. There's lots of people in it. We have an agenda. The agenda does that get through the goals and look the beginning of this case study where I have goals laid out, and this is right before I start talking around the users and the personas. So let's go back. I'm gonna go click on this kickoff meeting and talk a little bit around the kickoff meeting . So imagine this you've been contacted by a start up or a company in a specific market, and they've hired you to do research and to develop a UX design solution that solves the needs and the goals of the business and the people they're targeting. You're gonna have this meeting on Monday and you need to get and they want you to run this meeting and get the information you need to get started. Sound like you know what to do. If not, that's OK, because I'm going to show you what to do. Okay, so what you're gonna do is you're gonna have a kick off meeting. It's a full day meeting. It's usually about 10 a.m. to 5 p.m. And you haven't agenda to go through. And the agenda is you want to talk around the business goals, The product goals, the users in their goals, the stakeholders thes air, the clients and the risk and the medications that you'll do. So they usually look like this. There's the meetings. He could have an office. That's great. you can also do it over. A phone call is fine. You're gonna write agendas down. I've given you the general ready, but make sure you do introductions. You gotta introduce yourself kind of dry run how this meeting will go. And some given you examples of what we've done over the years here and now, let me talk a little bit about what a kick off meeting is. It's Anyone who's involved in your project should meet in a meeting before everyone starts to do the work. The kickoff meeting is made up of business people, product people and anyone else that has accountability for the project. Remember, we're building software here, and software is expensive in the cost of change on software is even more expensive. So it's very important as you as a UX designer know how to get your decisions, their problems and your solutions validated. So you know that they will achieve the goals that we're gonna lay out in this next session or in this session right here. So the meeting helps us externalize information that's important for everyone to know and understand. Once everyone in this meeting has an understanding we can use this time to prioritize ah, line and agree on certain priorities. And remember, you're going to take this information is gonna help you make UX design decisions as you go through the process. So let's go through the agenda here, which is the business goals, the product goals, the users and their goals, the stakeholders, the risk and the mitigations. So let's start with business goals, not blow this up a little bigger. Okay, so the business schools and the why behind it, you want to know key performance indicators. These air called KP eyes that informed business analytics. Here's an example. People want to build some software, say it's a solar company and they want to lower the amount of support phone calls they have by giving information around what to do if something goes wrong or a heads up on what to expect when you purchase solar. That's a number that's an indicator, and these air key performance indicators that we want oh, use. We want a lower this number by building software so you could say right now, without software in the market to these customers, here's a certain number, say 500 phone calls come in a day. Once we launch software, we want to know, Did that number go down? And that's a important part of a business goal. So you want to understand the business going, how they map to milestones that your design will need to achieve. This also helps in connecting user needs and goals to the business. You want to know how well your design decisions in form, the business goals and small and large stages stages. That's very important there. You're not designing solutions using software because it's cool. It's fun. You're designing them because they achieve business goals. And it's really important that you know this and that. You understand what the business intentions behind building software is and what kind of outcomes they would like after we launched software. So let's talk around business people. What are they? Who are they like? They usually have questions on what we're doing in research. You'll need to inform business folks that by developing customer empathy, this is user empathy and experimenting with solutions. We will de risk business unknowns and help to ensure product success. The more you can align on their goals, understand their initiatives and talk their lingo the more valuable you will be at the business level of any company. Hence the longer you'll be at a company. Hence, the more they will pay you as a employees as well. Okay, so in this meeting, you can write a framework on a wall, or you can go through a document that I'm gonna give you right now, and we'll come back to the website here in a second. I have this document that outlines the buckets of information that you're going to go through, and so we have the business goals, the product goals that users and their goals, the stakeholders and the risk. And I have actually went through and filled it out for you so you can see some examples so you can download this document in the video. And you can use this whenever you go into a U. S. U x project or you start your project. So let's go back over here and let's talk about that. You let's say that you had the business goals on a white board or you're having a call with business people in the beginning of your meeting. Here's some questions you can ask them to get them going so you can ask them. What do you intend to achieve by building software? How is the business going to benefit from this software experience? Once they start talking right that information down, that's their goals. You can also just explicitly asked them What is the business goals? You can also say, Let's say the project is over and the application is out and it's wildly successful. What does the success look like for the software business? They give you the success. You map that as a goal. That's one thing you can you can talk to. So there's air two questions you can use when you're going through business goals. And if you you ask these three thes two questions here, the business people were really like you Trust me. Okay, let's go talk around the product goals here in the reasons why. So it's important to understand what the business thinks of it's possible product goals. These were not fine details, but overall, like what we need to achieve business goals. So if your goal is to make money, then you're probably gonna need away in the software to charge people using their credit cards so the business can make money. That's an easy connection there. And imagine this. You can't have a photo taking AP if you don't have a camera. So these so that one of the product goals there will be we have to use your phone's camera . So that way we can take photos up with it so these goals can be changed depending on the research and a solution. Testing outcomes. Remember that. Let's talk around product people. What did they look like? These people are usually subject matter experts. That means they know a lot around a certain area in the market. Say it's Boba Tea. Then these people will know a lot about Boba Tea. They're also product managers, product managers or specialists and strategy, and they could also be engineers as well. And these people won't understand design way more than the business people do. And they will have questions around specific user interface components at Interaction Design Details. PM Sorry are here to help you remember that they're not here to squash your design. They're here to help connect to your design to the business goals and the product goals that we set out to achieve remember your design serves as a communication tool. That's it, right? It's what the engineers build is the final thing that user see, So your designs help everybody understand what we're building. Why were your building in the value that we intend to go out and learn? So end users do not see the final designs. They see what the engineers built. So it's going to questions that you can have. So you can say, What does your product need to do to achieve business goals? It's an easy question. I can also say, if your product was a human, what would it spend? Motives most. It's time doing, and you want to write down and capture that information. And again I will go show you examples of what this looks like after a meeting. So this is your domain because you're usually the user centered design expert, which is called U. C D. Two major part of the philosophy of doing User center. Are you X research and UX Design? Work is we're trying to understand the users were being centered around the users. The design is four users, so remember that term U C D user centered design So why is it important to understand users ? All of the aspects I just laid out you can also in this meeting, use this time to prioritize users. If the application has many, many users in it, this will give you the focus and starting point of who you should go talk to and research with first. Remember, this is your area. Usually you could be called on to handle this part of the meeting. If you're with the team, you need to capture just high level information about the users you call a user profile. We want to know the target market, say people that love Boba. We want toe talk around the target user. We can call him Boba lovers, and we want to know around the goals and the problems within that user demographic or persona. You want to ask questions to get to the basic user profile level information so you can see below. You can ask for a user name about them. You want to know a little bit of their goals, some of their pains and problems and then know how. How did you get ahold of these people for research and testing, usually the business has a good idea and then start you off with some connections on Who are these people that you're targeting and how to find them? And then you have to find them in the wild. You have to recruit people to go look for them. So questions to get kind of a juices flowing and to get people talking around users is who are the people that we are targeting to achieve the product goals? What do you know about these people? What problems are most important for you to solve for them? What are these people's most important goals and what's motivating them? Are they close by? Where can I find them? Can anyone connect me to them? All questions I've used in the past clients. This is tried and true and tested, and you should have really good success. But just these four questions here. Okay, so these air stakeholders, these air your clients. These are people that are accountable If the solution you're designing and the engineers build this solution and it goes wrong, they're usually the ones that are accountable for it. So remember these people can lose their jobs if things don't go right business. People need to make decisions on budget and business results that meat company strategies and initiatives. They have a stake in this but can't be with you all the time. That's why we call them stakeholders because they have a large stake in this process. So why is it important that you identify them? You'll have to do design reviews To show results from research and solution about every two weeks is best. And these are the people that can pop into your project and disrupt your user centered design logic with their opinions because they may not trust what's happening on the project due to a lack of involvement. Early on, we call that stakeholder anxiety so involving these people in the process, like doing design sprints, which I'll do. Another video on that you should see will help everyone online and share ownership on information, decisions and ideas. The more you can involve these people into the user logic early in the process and not just throw them into the designs, the less they will tell you how to design, and they will build trust with you the more they trust you. Trust me, the happier designer. You will be so it when working on a team. Usually a PM can take this area product manager for you. If not, then you'll have to take this so usually you could be called on the handle it. If not, um, go rely on a product manager, but you'll want to know the following Who makes decisions on product and design? Find out those people. Those are the people you want to do design reviews with. You can ask who has technical knowledge, and we can use them. A subject matter experts who knows a lot around the people that I'm targeting. You want to involve those folks who can help us find users. Identify those folks. Remember to get what their schedules are and what time is. Good toe. Have design reviews with these people, and you may want to interview them on company goals and success of your project. This is called a stakeholder interview, and you do this early on in the project. This is a tool that is just like research, just like a user interview. But you do it with stakeholders and you have questions around like what keeps you up at night What are your goals and initiatives? What does success look like to you in this project? And if you do that, that's already a tool that you can do use to build trust with them. Okay, let's go talk about risk and how we mitigate risk. So risk is anything that can blocked, disrupt or fella project or software that we build a risk and me turn into a question and that can give you work. By entering that question, you'll want to know what makes a project successful. But just as important, you want to know what will make a project unsuccessful After you learned about the project context, everyone should have time to call out in prioritize risk so that the team can start focusing activities that will intend to mitigate or solve the most risky assumptions. So usually the business people have this, and they love talking about this. Trust me. They always understand the problems more than you, and you're way more valuable when you can help them. So get the answers to the questions by talking to their customers. A lot of times they have questions around how people think about their business and how they're gonna use their product, and you can work with them by including the user centered design process and go talk to their customers and help get answers to the questions that they have. So when the business is software, remember, this is you X, and this is where you are one of the most valuable weapons the business can have. Remember that and make sure you get paid very well here because this is not cheap work. You were solving business problems for businesses that build software, so questions you can talk around on and ask business people around. Risk is what are the things that can happen that will make this unsuccessful and not achieve our goals? Let's say we felt What are the things that you think caused us to fail So we can understand that before we do any work and we could avoid failure? What's the first thing we can do to start mitigating these unsuccessful events? Mitigation? Meaning What can we How can we avoid these events? What do we need to do to make sure that they don't happen? Okay. And that concludes most of the business goals. The wrist that users all of the goals. So if you have all of this information, remember, you could go over eventually in your case study. And you can include this at the beginning of your case. Study thes videos. I'll show you the information and the tools and techniques that I'm teaching you on. How to put that information into your case studies so you can see I have it here. Okay. Last thing remember, show you is the application I'm working on, which is a Boba tea application. So I'm gonna walk you through this Boba tea experience, and then I'll go back and I'll show you the goals and the product goals, business goals, the users and all that information that helps us build this application right here. So what happens here is you have Boba. We go. We sign in normal sign in process. Repressed. Sign up. We see a list of Boba drinks and applications and I can show you this page here. No, it's pretty small, but scrolling down. I could see all the boba teas. Once I select a boba tea, I can select the regular sweetness or semi sweet. I can also tell it to have large tapioca here, I can add it to the cart. I see here. The cart now has an icon on it. Now I can start to check out. I can order a quantity of boba tea. I can come to this address into my address, my phone number. I can put my credit card details in. I can pay, and then I'll see. But a map of San Francisco and I'll see Boba tea coming to me on delivery. And then boom, my boba tea will arrive. So let's say that was a business. And just like the document that's in the video that you can download, you can use this here. I also have examples based off the Boba TV business. And so let's go talk a little bit about that business and what the goals are. So first thing is, I'm the business owner, and I want to sell more than 100 boba teas a day with our new on demand software. That's the goal, that software. We want a partner with an existing delivery service and use them to deliver Boba tea. We want to make additional revenue by charging and delivery fee for every Boba tea that is still that is delivered. Okay, well, how are our products goals gonna help us achieve the business goals. While we need users to sign up, we're gonna allow four different flavors a boba tea to be selected. We're gonna allow users to select milk, sweetness and ice preferences and topping preferences. We're gonna allow for users to enter address phone numbers and payment details. And we're gonna show real time update of Boba tea being delivered from Boba creation stations to user locations. We'll talk a little bit about users and their goals were talking about Boba tea lovers in San Francisco. And these are people who wanna have Boba tea delivered to their home or office. The stakeholders here is myself. Aaron Lawrence, Um available 10 a.m. to 5 p.m. So if you wanna have design reviews with me, make sure you do it within Monday to Friday in that time zone. And some of the risk that will face by building this application is that the Boba tea melts and doesn't stay fresh upon delivery due to not being delivered fast enough. This causes a couple things. This Boba tea can get someone sick and now we've got somebody sick. How are we going to Everest? The risk that also we may have too many refunds because of that. And we start losing money due to the cost of delivery. Okay, so you can see have examples of all of this information on goals. All right. So that covers how to set goals for our first video and first step of the process in UX design. Join us in the next video as we learned how to create a persona. See you. 3. Create a UX Design Persona: All right. Welcome to the next video on how to create aux case study and user experience. Design one on one. In the last video, I showed you how to set goals. Next thing we're gonna do in the process is gonna learn how to create a persona and what a persona is. Without further ado, let's go looking dive into a persona. So I'm gonna come over here to the u x honey dot com website. I'm gonna click on you ex too. Get this is the website that I use with all the material to teach the students at the Academy of Art University in San Francisco. And over here I see that I have the unbalance dated persona, user interviews, scripts. I'm going to click on this button, and I have this section of the website that describes the persona. So the first thing I'm gonna do is talk a little bit about a persona that I'll show you the framework of a persona. And I also have a documentation attached to the video that you can download that you can use to create your personas. So let's talk a little bit about what a persona is a persona is a design artifact that represents a large market of people, regardless of age and gender gender. In most cases, these people have the same problems, goals, motivations and behaviors. It is first constructed from our unbalance dated assumptions. Before we do research. When we do research, we talk to these people. We learned a whole bunch around them, and then we come back after research and we revisit the persona artifact and we update it with our validated learnings. So the goal of this persona is to capture the validated real world context, problems, behaviors and activities, needs and goals and motivations that reflect the person were targeting and put it all into one design artifact called the Persona. It's over here and you can see I have some examples ah personas. And some of these examples are sketches that we use. I have the example of the framework, which I'll get into a little bit later, and I have one filled out here, and I have another one that sketched out so you can see you can sketch thes personas by using the framework. Once you feel more certain about the people that you've learned, you can create him here and let me dive a little more into why they're important. So put a persona is important because automatically introduces user centered design into our process. And again, the U X study is user experience design where we're gonna build things and design things for people to use. So it's really important that we understand who these people are and before we designed something for them. We want to use this persona toe, help create conversations and keep conversations that air user focused and not solution and opinion focused. The persona also reminds us daily that we are not the users of our products so we can make assumptions about users first. So if I am designing something for, let's say, Korean pop music and I'm not a 16 year old Korean pop star or ah pop fit fan, then it's important for me to know that I'm not the user of my product, so I use the persona to represent these users. It also helps me identify them when I'm out in the wild. When I'm out on my day to day routines in wherever I live, I may meet somebody, and as I'm talking to them. I may realize that they're actually a persona that I'm targeting for my product, and I may want to use them for research or testing of my product. It makes it easy to understand the user during meetings, demos and when stakeholder stakeholders I talked about last video. These were the business people or clients that pop into my meetings so I can easily pull this design artifact. UNP put it onto a wall and we can point at it and use it for reference. Because, remember, we're not the users of our products. It also acts as a medium to resolve questions and opinions that are in conflict and keeps us user focused. So a lot of times when we have opinions together as a team and these opinions become in conflict, we can always ask, Why don't we go talk to users around these opinions on? Let's go see what their opinion is because the users always have the opinions that we're going to use during the process, and it helps us solve and resolve questions that we have. So let's talk a little bit about the process of going from a unbalance dated persona and moving it to a validated persona. So the first thing we do, which you'll learn in the next uh, step after I talk about this, is how to create a un validated persona. So we make assumptions about the people that were targeting in the next video. I'll talk around learning goals and questions, but the thing you want to do next is to create learning goals. Create questions to achieve learning goals, and you'll do research. You'll go out and you'll talk to people. Then you'll sent the size and you'll cluster these themes into patterns. After that, you'll go invalidate or unbalance, ate the problems or assumptions that you had your validator unbalance ate the goals, needs and behaviors of these people that we talked to. And then you'll revisit an update. The persona with the validations. That's pretty much the process here. So let's go learn how to create a persona, and I'll talk a little bit about the framework we use for personas. So here's the document that is attached to the video that you can download and you can use , and the persona framework is broken up into four quadrants. Here you see the 1st 1 The 2nd 1 the 3rd 1/4 1 The 1st 1 I'll talk about here is the top left quadrant. Is the person in the world will context. This is a photograph of them, and you can see I'll show you. I also have an example here of the persona when it's filled out. But before I review that one, let's go. Just talk around the quadrants in the framework here of a persona, so you can also use this to sketch. You can make a sheet of paper drawn into four squares, draw the person into the real world context and write out the behaviors about them and needs and goals. But before I show you anything before you do that, it's best to just first learn around what all these quadrants are for. So the one on the top left is a person in the real world context, and it's always good to draw a quote around them. And you can draw a little quote talk bubble here, and you wanna have the problem that you intend to solve and the goal written from the user's perspective in context. Okay, so after you have the person in the real world context. You have the talk bubble here with the problem you intend to solve and the goal written from the user's perspective. You all you can have the little circle area here be the area where you put their name. This could be their first name, which could be any name that you like. But the theme last name has to represent this user. So let me show you the example I have here. So this is our Boba tea persona and we have Frannie and Freddie. Identifies is a foodie. So this person's first and last name is Franny. Foodie. What I like to do is I like toe have the first name and the last name have the same letter starting out. So in this example, we have f and why that's important is that helps me talk around the persona. What I'm having conversations around design. So in this case, I can talk around Franny foodie, and it's also helpful when I have multiple personas. So let's say I have another persona of a person who really likes bikes. I can name that persona, Billy bikes. So now when I'm using both personas in a conversation. I can say Franny, foodie and I can say Billy Bike, and it makes it really easy to create user centered design philosophies within my conversation. Okay, the next quadrant that I'll talk about is about them, so you can ask yourself, What information do you think is important to capture about them? And I don't have demographics here because it doesn't matter the age or the gender in 90% of the cases of persona work that we do, as long as the person has the same problem and goals, I could be a 21 year old. I could be a 31 year old. I could be a melon or female, and if I have the same problems and goals that doesn't matter. I'm solving pro problems and goals for people. So in my situation, I'm looking to build an application that delivers Boba tea on demand to people. So do you think it's important for me to know if a person is male or female? In this case, if I'm delivering Boba tea for them, my opinion is probably not so. Some of the things you can ask yourself when you're filling out about them in the persona quadrant is the examples that I have here. So what education levels do they have? Where do you think? Where do they live? Do they work full time? Do they have a family? What is their age range and doesn't matter if they're male or female? In some cases, it may matter. Let's say I'm building a makeup application that allows you to have makeup delivered to you on demand. Then it might be important to call out that mostly females are gonna be using our application on the top right quadrant. I have behaviors and activities. So these air questions you can ask yourself when you're filling this out is what are these people's day to day activities? What behaviours do they have that relate to the space you are working in? So you, in this case, you can say food, beverages or Boba. Who do they share these activities with and where they at when doing these activities? The one on the bottom right here. This is needs and goals. What problems do they have and why do they have these problems? Do they work around their problems? Are they solving their problems currently what are their goals? What do they need to achieve their goals? What is their motivations and what triggers them toe have these needs. So let's go look at the filled out persona so you can use that framework I gave you earlier , and you can fill it out. So here we have Franny. Foodie Freni is at work right now. She's working on something in her laptop. She's very busy, and you can see the problem here and the gold framed in her world world context and user perspective. So right now she's saying, I'm so busy and I want to leave and get a Boba tea. But I should stay here and get my work done. So whore Goal as she wants to get her work done. She also would like to have a Boba tea. But the problem is as you can because she asked to get her work done. So let's learn a little bit about Frannie foodie she identifies as a foodie. Her age is 21 to 35. She's college educated. She lives in San Francisco. She works at a tech company in San Francisco. She may have a family out, doesn't really matter. In this case, I have Freddy represented as a woman, but in our case it doesn't really matter. I'm not calling out anywhere that there are female or male. The reason why is it doesn't matter with these needs and goals and behaviors and activities . They're not really representational of a specific gender. So let me go read out the behaviors and activities of Franny. So she's on their phone a lot. She has a busy schedule, loves to go eat out with friends in the weekends. He's always looking for new restaurants to go eat out at. She follows foodies and food blog's On Instagram. She takes pictures of food and shares with friends and social media. She goes to coffee and beverages shops and she uses on demand services once a week. On the bottom rate is needs and goals, so she would like more time in her day or their day. More opportunities for better food beverages to be delivered at home or work doesn't want to wait too long for things they need in the moment. Wants to show off good food, beverages to friends likes to be in the know with new food opportunities so they can share these experiences with friends. Okay. And there you have it. We just learned a little bit of what a persona is, why they're important, when to build them, when to use them. You've learned about the framework, and I've given you an example. You can also download this file that I've shown you here along with this video. And you can use this for your project. Okay, so that wraps up how to create a persona. Let's go ahead and move along. You can open up the next video on how to create a user interview script and that will set you up to go do research. Okay, Hopefully, I'll see you over in the next video. Thanks again by 4. Create a User Interview Script & Research Best Practices: All right, welcome to the next series of videos on the hot Acree aux design case study and user experience. Design 101 So in the last two videos we covered how to set goals and how to create a persona and this video. You'll learn how to create a user interview script, and the best practice has been conducting research. So let's start with how to create a user interview script. So what is a user interview script? It's a guideline of questions that you will take with you as you go. Do research and you interview people. This is usually about 3 to 4 sheets of paper. You'll print it out and you'll leave your office or your home and you'll go talk to people . You may even bring people into your office in home, but you'll use the same script every time you go out and you talk to somebody. So what is the goal of research and most of research? Is us going out and learning around the people that we targeted? So the goals are we want to capture an explorer. Other people's reactions. We want to identify and explore their behaviors. We want to shine light on the unknown. So really meaning we will have answers to a lot of the questions that we were unsure about in the beginning when we end research, So what do you do? You go out, you gather insights and you learn about the people that we have set out to target. And while we're doing that, we're looking for patterns of information that help us validate or invalidate our problems and solution assumptions. So when you're developing the script, it's a good idea to have the persona next to you. This is the one that we covered in the last video, because this has a lot of the information that you want to see is actually true or not true or in another way to put that is, you want to either validate the information we have on this persona or invalidate this information so you can print this out when you're developing questions for your user interview script. So here I have a file and this file you can download along with the video, and it has the guidelines for a proper user interview script. Okay, so the first thing you want to do is you want to put your name and the date and then you want to define your recruiting questions, these questions will help you identify if someone is your persona, they'll help you indicate if you should interview someone or not. So it all depends on the way that these people respond to these questions that will help you identify if the person you're targeting is actually this person here that we've tart we've set out to target. So in the Boba Tea example, I have a series of questions here that would help me identify if this person is my persona or not. So three questions here. First question is, Do you often get food delivered to you? Do you drink mobility frequently? And do you consider yourself a foodie or love good food and beverages? If they respond to yes toe all three of those questions, I may want to pull them in and actually interviewed them. Okay, so the next thing that we have is we want to identify our learning goals. What are learning goals? Learning goals were high level areas that we want to learn more about, and this whole section right years just for your reference. So it's good to have this on your script, but you don't share the learning goal section with your people that you plan to interview. That's the next series of pages that I have here set out to the right. So what are our learning goals in the Boba Tea example? 1st 1 is what's there delivering on demand behavior? Because, remember, we're building a Boba tea application that will allow someone to order Boba tea wherever they're at, and within 10 or 15 minutes they'll have boba tea delivered to them. So this isn't going to be anywhere in the world. It will only be for people in San Francisco. So again, the idea is that they pull out their mobile phone. They live in San Francisco. They're currently at San Francisco. San Francisco is seven miles by seven miles. So were a lot we can actually deliver within 15 minutes anywhere in the city. And they order some Boba tea and we deliver it to them at their location within 10 or 15 minutes. So you want to learn around people's current delivery and on delivery behavior. We want to know, uh, what do they like? And find painful about current delivery and on demand services and why. And the next thing we want to learn is what's their Boba tea behavior. So I'll show you how you use these learning goals to develop a whole series of questions that relate and pertained to each learning goal. Before I do that, I'll show you the introduction that will you you use during an interview. So every time you interview before you ask people these questions you want to share with them? This introduction, the 1st 9 things On this introduction, you will ask and say to your your interviewee. Number 10 is to take pictures of them for your case study. Don't take pictures of them in the 1st 5 minutes of meeting them. Do you want to wait till the end? Asked him if you can take a photo of them. So number one the first thing you want to do is introduce yourself, and if you have a note taker with you, introduce your note taker and you can say things like I'm a designer and researcher working in the food and beverage space. So introduced the space that you're working in in our case, I'm giving you the Boba Tea Delivery example, So we're going to call it the food and beverage Space number two. Ask if it's OK to record the session just for note taking purposes. What you're gonna do is pull out your phone and you record it with the audio app on your phone stay. How long the interview will take it will be about one hour. Sometimes I say. Is it still a good time? The interview will take about a one hour number four. State. The goal of the interview. This is things I say. You can say it as well. Just say I want to just have a discussion regarding your experiences with delivery and on demand services. Also, I'm working on a bubble tea application, and I would like to learn about your Boba tea experiences so you can keep where it says I just want to have a discussion regarding your experiences with and then pop in whatever learning goals that you have here for your space and the same thing, you can give them the same context. Tell them what you're working in and you want to learn a little bit around that space as well and how their behaviors relate to that space. Number five a hammer on her. No, there's nothing that they say that they will that will offend you. Say there's no right or wrong answers to the questions I have for you. The only right answer is your number six. Let them know they can ask questions to you any time. Number seven. Let him know that they also have five minutes of the end for any questions as well. Memory asked them, Do you have any questions before we begin? And the number nine let him know you're going to start recording and press the record button on your audio application on your phone. Okay. And what we're gonna do is gonna get into the questions. So the first question we ask is called. The ice breaker question has really nothing to do with what you're trying toe learn is just to get to know them. So I usually ask, What do you do for fun when you're not working and this just breaks the ice, it gets them talking. It gets me talking after that will do the about them section so you can ask questions that sound like the four that we have here. You can say Tell me a little bit about yourself. How old are you? What do you do for work? Where do you live and what is your home life look like? Then after those questions or ask, you can move to the learning goals so you can see here I have the learning gold topic here and the time spent per section here, and I'll give you an example of what that looks like in the next screen to the right here and will use the Boba tea example. So the questions that you have under each learning goal should relate to that learning goal and help you learn, um, or around it. So, based off the learning goals that we talked about earlier in the Learning goal section, I have a learning goal, which is delivery an on demand behavior. So I'm gonna spend about 10 minutes talking with this person about their behavior on delivering on demand services. So the first question I have is, how often do you use delivery services? Next question. Why and when do you use them? What do you use them for? How do you hear about these services? Have you ever had a bad experience when using them? If so, please describe in detail what was painful about it. Have you ever had a really great experiences, but these services? If so, please describe in detail what was great about it. Do you have a favorite service? If so, please describe why it's your favorite service. When was the last time you ordered something on delivery? Okay, so now I'll move to the Boba Tea Behavior Learning Goal section of the script and spend 10 minutes with questions that pertain to the Boba tea. The 1st 1 is, How often do you drink Boba tea? When do you drink it? Where do you go to get probity? Have you ever had a bad experience with probity? If so, please describe in detail what was bad about it. Have you ever had MAWR? Have you ever had a more than great experience with a Boba tea company? If so, please describe in detail what was great about it. So you may have 3 to 5 sections of these areas that we would call our learning goal areas with questions underneath it. And that's the meat of the interview. Most of your time should be spent asking questions and hearing these people tell you stories about their opinions or their experiences to these questions. When you've learned enough before the end of your interview, go move to the outro and we have the last question. This is my favorite question. You'll learn so much from just this one last question that we have and you can ask something that sounds like this. You can say, based on everything that I asked you, Let's say I'm going to give you a solution to solve any problems you have and you have a magic wand. You can get anything. What is your wish? And you'll learn a lot. It's a fun question to ask one of my favorites. After that, you can come up. You can finally proceed with the outro, so first thing you want to do is think them for your time. Let them know that all the notes and recordings air confidential and will be on Lee used for note taking, and also the only people that will see and hear this recording is yourself and the team. If payment is involved, you make the transaction. Sometimes we pay people for their time with us. Tell them that you may contact them again when you come up with solutions so you can test it with them and then just say thank you and goodbye. Okay, so you have this file, it's attached to the video. You can download it and you can use it to feel it out. You can create your own user interview script. So now let's go learn around best practices when you actually go out and interview people some back over at you x honey dot com The first thing I'll talk a brown is the questions, like the best way to frame your questions, so we will usually want to start with high level and open ended questions. Let's say I want to learn about how somebody uses an iPad. If I just start with, what do you use your iPad for? I'm actually getting too specific. In the very beginning, I'd rather start more high level. More opened ended so it would be better toe have a series of questions that sound like this . How do you engage with technology and somebody may answer back say, Well, I use my iPhone. I use a laptop. Um, I use an alarm clock that's futuristic. I also use an iPad. And then you can ask them What do you use most? And maybe they will say, Well, I use my iPad that most and then you can say why and let them tell you description, a paragraph or story of why they use their I find iPad. But see how much more information I got when I asked a high level, open ended question their areas I may want to come back to, Which is why do they have a advanced alarm clock or, Ah, futuristic alarm clock. What did they use? There are iPhone for us. Well, do their iPhones connect to their iPads? Is there a relationship there? So start very high level, very open ended. Next, you can spark conversations around signet scenarios and activities. This relates to the learning goals around learning people's behaviors. You want to know about their world real context. If they're doing an activity where they doing it at, you want to learn around their pains and their joys. You want to know about the first time they've done something in the last time they did something just like before and the script. We had that question that was sounded something like, When was the last time that you used a delivery or a on demand service? You want to know about the best time in the worst time. So those those bad experiences and good experiences and you want to give him that wish list question that we talked about in that last one? Okay, these air conversation prompts. So sometimes, if you don't know what to ask, you could just give him conversation prompts and sound like this. You can say, Have you ever had an experience where and just describe the scenario that you think you want to learn more around and it's OK if they have it. If they have, you can say, Can you tell me the story from beginning to end? And then within the story, you can ask questions that sound like the next one, which is, and then what happened? They tell you some more information, you go. Why did you do that? Or how did you do that? What did you love or hate about that? And if you could have a magic wand. What would you What would it be like? What would your wish be next one? During the interview, it's best to just smile. Ask open ended questions, get their stories, be quiet and listen. You shouldn't be doing the talking most the time. They should ask how. Why, what when? During the interview. What you don't want to do is talk about your product. You're learning about the human, not the product. Talk the entire time. It's their time to talk, not yours. Ask leading questions. Remember, just ask very open ended questions. Don't lead them into a topic around an iPad. Let them get into it. Ask about future behaviors. You can ask me, Do I like horses? And I'll tell you, yes, but, um, I actually going out ever in the future or in my past to find horses or ride horses. No, I don't. But I'll tell you that I like horses. So future behavior isn't something you should focus on because people don't know what they'll do in the future. They know what they've done in the past. So focus on current behavior in past behavior. Don't ask. Do you like it? Would you use my product that's not up for them. They'll tell you again. I like horses. Yeah, but it's in their behavior. What you'll find in their behaviour should elude to these questions around. Do you like it? And would you use it? So if they're not doing anything around horses, then they might not use your product. But I'll tell you, I like your horse product and maybe I'll use it. Um, but nothing in my behavior is telling you that I'm going out looking to ride horses or be interested in horses. Don't sell. This isn't your time to sell. This is your time to learn from these people. And you don't want lots of yes and no questions. You want lots of story driven questions. So let me show you how to frame your questions so you don't end up with yes and no answers . So if you frame your questions, starting with the beginning of how and why, that will equal stories. If you frame your questions would do and is, then you'll end up with yes and no questions. Okay, Just like I wanted to know around the iPad and I asked somebody, How do you engage with technology. You can get the story first and you can dive deep. So let's say I ask somebody how they engage with technology like I did before, and I got their story. They told me, Remember? They said, Oh, I use my phone. I have this futuristic alarm clock. I have a laptop. I use an iPad, yada, yada, yada. Let them keep going. Don't dive into the iPad yet. Get their story, and then do the deep ties go all you use your like Which one do you use the most, my iPad. Why? And then get into the DYP, the iPad and have a whole bunch of questions of why and their behaviors around the iPad. But I didn't start with just how do you use your iPad for, um or what do you use it for? I started with the story driven question that was very open ended, got their complete story, and Aiken deep dive into each section of their story and have a little bit more learning there. Okay, so those are some of the best practices when framing questions, interviewing. Let me show you what an interview will look like. And the best practices there. So we're back at you x honey dot com These are your best practices based off interviewing dynamics. So if you have a two person dynamic meaning there's an interviewer and there's you, there's only two people. Make sure you record with audio. You don't You can't take notes and ask questions to the interviewee at the same time. So what, you're gonna do it? Just ask questions. You're gonna listen. You're gonna learn you're gonna record the session, and then after the interview, you're gonna come back and you're gonna listen to these recordings you're gonna does rewind , go forward, rewind. Listen to the audio. And here's the rial trick to doing research. You're gonna write down your insights, your quotes and your learnings or anything helpful on sticky notes. Yes, sticky notes. Go get a whole bunch of sticky notes with different color sticky notes. You're going to need him. I'll show you a little bit. Why here? And we'll also learn way more what to do with these sticky notes in the next video. So you want to do one insider, one learning per sticky note written with a black Sharpie, so it's really easy to read from a distance, Make sure you write the name of the interviewee on the sticky notes, so you know what color this pertains to. So if I interviewed this individual here, I wanna write their name on yellow. So later, when I interview more people, I'll know who said what on the yellow sticky notes and you'll see you'll end up with what we call it User bucket. Ah, whole bunch of information that pertains toe one interview after many interviews, What you'll have is something like this. That's a interview. Tom and Joe and Jane. Then I'll have three colors, and on each section we'll have the representation of insights, quotes and learnings for each person. And I'll show you what you're gonna do with this in the next video. Okay, let's say that you do have a note taker with you when you do researchers so that the dynamic is three people. It's just like the two person dynamic. You still wanna have audio recording going. But this time you're gonna have a note taker. The note taker is just gonna take notes. They're just gonna write down information that they hear from the interviewee. There no takers. Job is not to talk. That's your job as the interviewer. They just take notes with pen on paper. After the interview, you both will sit down together and you will read through the notes together, and you will listen to the audio. Together, you will write down the insights, the quotes and learnings or anything helpful on sticky notes together. And you'll write one insight per sticky note written with the black Sharpie, and you'll end up with the interviewer captured just like this. So here's Tom represented in Orange. After many interviews, you see, we have the same thing I just talked about. Okay, let me give you an example before we wrap up the video of what this looks like. Here's a tool that I'm using its called real time board. It just mimics a actual white board and allows you to create sticky notes. See, I have sticky notes here. I can write anything that I want here, and I can copy sticky notes, create them so mimics of physical world. But it's best just to do this first on riel, actual physical sticky notes put them up on the wall. So you're Walsh and look like this and you can see here. I've interviewed three people, and I have all of their information captured on sticky notes, one insight per note. And that's where you'll end up with research. And if you want to learn what to do next, we can go to the next video in the Siri's. Let me open that up, which is how to synthesise research findings and how to write a problem statement. Okay, so there you have it. That's how you create a user interview script and the best practices when conducting research. Hopefully, I'll see you in the next video and again, as always, thank you and goodbye. 5. How to do UX Research Synthesis and Write a Problem Statement: All right. Welcome to the next set of videos on how to build a U X case study and user experience. Design 101 It's in the last set of videos we've covered so far how to set goals, how to create a persona, how to create a user interview, script and best practices. Been conducting research. So hopefully you've had the opportunity to go out and do some research and talk to some people. Do some user interviewing. If not, it's okay. You can learn this process and always go back and do that type of work. I'm so in this series of videos. What we're gonna look at is how to synthesize your research findings and how to write a problem. Statement. So what is synthesizing or synthesis? It's really just organizing your information and a systematic approach. So what I'll do is go over to the EU's ux dot com or sorry, you x honey dot com website. This is the website I teach at the university, and if you click on the u X two here will go to home will find the synthesis and clustering . You click on this button and it will take you to the synthesis side and again, like I talked about before. This is the definition of synthesis. It's organizing and preparing information. And so, in the last video, I taught you how to conduct research. And what you're gonna do is you've taken the information you found during each research our user session user interview session, and you've taken those insights and you've written them on sticky notes, one insight per sticky note you've created here on the right what we call it user bucket of information. And in this example, we have Tom and Tom is represented by orange, and we have all the information that we found insightful, captured on sticky notes. And that's the process we call synthesis. So once you've interviewed, say, 5 to 7 people, it's usually best time to stop and do the clustering work. The clustering is when you're finding patterns and themes to the information that we have, and these patterns help us identify points of interest, points of priority and a help system validate the learning goals and the assumptions that we made in the persona the beginning. So you see an example that I have here we can assume that We've interviewed three people so far. We have Tom represented in orange. We have Joe, representative Pink, and we have Jane represented in yellow. So the first thing you do when you cluster is start with a very broad category. And in this category we have is technology. And remember when I talked around in the last video about how we frame our questions, So we usually start not detailed, very large open ended. Ah, high level questions. So in the last example, I had a question around. I wanted to learn around somebody's iPad behavior. But I didn't start with a question that sounded like this. How do you use your iPad? I actually started with a much broader question. Which is How do you engage with technology? And the answers I've got from people were all over the place. You know, some people said they talked around how they used their They used their mobile device. They use a laptop that use an iPad that use a like, really futuristic alarm clock. Some used really interesting technologies in the kitchen, but I got a broad statement of of information around technology. So what I do first is I create a broad theme, so we'll call this technology and I'll make a sticky note or sheet of paper or category. Imagine this is a physical space that says technology. Usually I use a sticky note that's a different color from all the sticky notes that I've used that represent users. So in this case, you can see this is a larger sticky note called Technology. And now I'm going to stop and I'm gonna read every inside I have based off the research I've done and all the users I've done here. And I'm gonna pull each insight underneath this topic that relates to technology. So you can see I'm pulling from each three interviews I've done Tom, Joe and Jane. And I'm pulling their sticky notes into this topic, uh, called Technology and putting their sticky notes underneath the sticky note that says technology. Okay, the second thing I do is once I have this broad category full of insights, then I can go on get granular with it. So see, now I've heard from that question around, How did you engage with technology? People told me about information around how they use their iPhone there. Ipad and in this case, how they use the Web as well. So I pulled sticky notes that relate to each topic out of the technology topic. And I've created topics that are more granular, say iPad, iPhone and Web. And this act of doing all of this work is clustering. This is how I find patterns and how I find themes that helped me go along with the work that I'm going to do. So pretty much what you want to do is you want to go through all of your interviewing and you want to come up and start putting all of your themes together, and I'm gonna stroll back up and show you what that looks like. So you can see here. I have a whole bunch of people I have interviewed, represented in what we have four different colors on that one. We have blue, green, grey and yellow, and I have the pink sticky note which represents the actual topic here. So the pink one there and all the people that they've said that relate to that topic underneath it. So I'll show you. Here's another example. Here's a whole wall, so this is what it should look like in your physical space. You should have a bunch of sticky notes written with Sharpie, and you have a whole wall of information that you can pull two and map to to help you make decisions on your UX work going forward. Here's another photo of that and look at all that work we've done in all the interviews we've done there. You can see our personas here that we created on the wall as well. And here's the process of us doing it. Here's a bunch of us in a room. Getting together and reach have topics on these boards here, and we're pulling together relevant information that we heard from our users into these topics here. So it looks like that Here's me there with a client. They're having fun. We're reading. I'm What I'm doing right now is I'm reading out a topic on insight. Sorry from all of the people that we've talked to. Here's a specific inside. I'm reading it out loud, and I'm asking the team, Where does this fit? What theme category or topic does this insight fit into, and then I'll go place it to that topic alone. So that whole act that I just showed you was what we called the synthesis and the clustering of insights. So let me show you this. Just show you in real time how this actually works. So I have my real time board open that I showed you in the last video. This is like a digital whiteboard. And here's my three people I've interviewed. And here's all the insights that I have. So I've interviewed Naomi, Joe Hahn and Anna here and now I'm ready to start pulling some topics here so much start pretty broad. And I'm gonna use the example that we talked about in the last video, which was a boba tea and a Boba tea on demand. So I was curious to hear when I went out and interviewed, Um, how often do people order Boba tea? And when do they get Boba tea? So right now I'm gonna select, Let's say yellow for my category. And I'm gonna call this sticky like when do people get Boba tea? Okay, There you have it. So we'll call this one. When do people drink Boba tea? We get boba tea and I'm gonna comb through each one of my categories. Here are my users here and see where they said around When did they get probity? So I have a person here who says I get Boba tea. Mostly on, uh, the week ends some place that here. And I have another insight here that says, sometimes I get Boba tea twice a week, so I'm gonna put that over here as well. Cats got moved over to John. Um, I also have a sticky note here that says, on average week, I'd said Drink Boba tea three times a week. So I'm gonna go place that over here and on this sticky note here, I get Boba tea almost every other day. I love that stuff. That's interesting. What? I'm gonna pull that over here. And this one says I usually do more walking around San Francisco on the weekend. And if I see a Boba Tea place, I usually stop and get one. No interesting interesting behavior there. So let's go pull these over to that category. Pretty nice. Let's go over to Anna here. Santa has one that says I get Boba tea only on the weekends, and I'm trying to be healthy during the week and she said, I'd say I'd probably drink nobody t twice a month. So those air interesting insights that we should go pull over to our topic here. So now I have this topic, which is winding. People drink probity, but now I'm getting some insights about how often they drink it. So let's go make another one here, pull some from this category on. Make this one. How often do people drink? Oh, pity. So, this person said, Here I get Boba tea, mostly on weekends. This one says, Sometimes I get Boba tea twice a week. Okay, let's pull that over there on the Southern one here, it says, Uh, I usually do more walking around San Francisco on the weekend, and I if I see a Boba Tea place, I usually stop and get one. Let's leave that there. On an average week, I'd say Drink Boba tea three times a week. Let's move that over that to this topic, and I get Boba tea almost every other day. I love that stuff. Let's go put that over here. Okay? I get Boba tea only on the weekends, and I'm trying to be healthy during the week. I think that pops over there. And look, we're starting to see a pattern here. People getting Boba tea on the weekends. Very interesting. I said probably drink Boba tea twice a month. Okay, Very interesting. Wait a topic. Your information that you have and that act of putting themes and putting sticky notes underneath the themes That's called clustering, affinity mapping. But we're really looking for the patterns here. And so now I can come back an interview. A whole bunch of more people have also learned during this interviewing that people want mobility not only on weekends, but they also wanted at work. Um, they leave during the week, day at work sometimes and get it, Um, and you'll eventually should have something where you have a lot more people on one of these topics with different colors that you've interviewed more people say I will make one . Orange will make one green like that light green will do another one. It's purple, and eventually, hopefully, you'll have a lot more of these. So you have a topic here were called this like topic one and lots more insights around that topic. And then we'll have another topic here. Call this topic, too, and that's hopefully what you'll end up with something like this with a lot more topics you can go through and read out all the information that you learned about. So at that point, if we went back and learned around what the goal was of research was, it was to explore and capture reactions, exploring capture behavior and get a lot of answers to the questions that you had. So this point, you can stop doing research when you feel that you've understood invalidated people's behaviors. You've got their reactions, and you have a lot of answers to the questions that you set out to learn about when you first did research. So before you go run out and you start designing and making solutions, it's best to start framing your problems. So and the next thing that we're gonna do right now is we're gonna go learn how to write a problem state. So I have this document here that's attached to the video that you can download, and this is what we call a problem statement. Um, framework and the framework here outlines a couple things and what it does is it helps us understand and articulate the problem that we're facing and that we're going to solve and within a problem. It's important to understand who the person is that has that problem, what their goal is and what they the solution that they would like toa have that will help them solve that problem. So the framework is just as you see here is you start with I m you put the persona down and then you put I'm trying to which is the goal for that person. But I can't because and you lay out the problem and on Lee, if I had, which is the salute, the intended solution that they would like. Okay, so let's go use the Boba tea problem statement example. So we've been running with this Boba tea theme, uh, this whole time as examples for you. And so here's the problem statement from the Boba Tea point of view. So after our research, we learned a lot of people did want to order Boba tea from work, but they weren't able to leave work because they had a lot of work to get done. So their problem was, um there are this person that we were targeting Her name was Franny foodie. That was the persona again. Their goal was they were trying to get Boba tea at their workplace. But they can't because they have too much work to get done and they can't leave the office . So that's their problem. If Onley they had a way to order Boba tea and have it delivered to them in the next 15 minutes. So see how you use this problem statement to properly frame the context of the problem, and that's pretty much it. It's pretty simple. It takes a lot of work and a lot of time to get here. But once you're at this point, you can now start to move into the solution side, which is the drawling, the sketching, the designing, making the design wire frames, the prototypes and going out and doing user testing. So in the next series of videos, I'll cover that I'll cover how to create a customer journey map. What will help you tell the story in which you're going to design for you're gonna use some sketching templates and frameworks gonna create those wire frame designs. I'll teach you how to create a clickable prototype how to do the user testing. And then, once all that's done, you'll do the basis of a design system, which is creating all the design elements. How to apply the visual designed to your wire frame best practices when it comes to design resumes and the case study outline. Cool. So there we have it. I'll see you on the next series of videos and have always thank you and goodbye. 6. Create a Customer Journey Map: All right. Welcome back to how to design aux case study and user experience. Design model one class. We've just finished a whole series of videos we've learned already how to create create in cycles how to create a design persona. How to create a user interview script best practices when conducting research, how to take all your research insights and synthesise the findings, how to write a problem statement. And now today we're gonna focus on how to create a customer journey. So I'm gonna head on over to the website. This is the curriculum, a website that I use for my university teaching. I have two classes. I teach Sarah, teach the u X two and I teach advance you user experience design, which we call you x three. The customer journey map is something I teach to the advanced students. Someone to click on you x three. And here's all the methods that I teach for that class. And we're gonna scroll on down here to find the customer journey maps right here. So where it says maps. I'm gonna click on that. And this is where we start our customer journeyman information. Okay, So what is a customer journey map. It's a framework that helps us understand the current or the future journey that our customer goes on. So usually, when you're modeling the current state, you're modeling the current problem and your it's usually a scenario that the persona or the targeted user is facing. And when you're modeling the future state, you're usually using the customer journey to model the future solution in which you're going to design. So when do you use it in the current state? In the beginning, if you have a domain expert or you know a lot about your user, you could do it. You could do it towards the end of your research. Once you have enough information about the user and their problem, can your usually modeling the problem scenario went to use it in the future. Journey is after your research, you've learned a whole bunch about the person that you targeted their behaviors. Andi can use this model, the customer journey map to model a concept or a validated solution. So again you're usually modeling the solution scenario. So I have the examples here, so I have an example in the website and one that's filled out as well. So I'm gonna head over to Illustrator and I have a document already attached to this video that outlines this framework that you can download and use and let me walk through this document. So here at the top, we have the customer journey. Usually you can write your current or future state here. I'll show you the example we have over here to the right here in a second. And what we call these, um Rose here we call these swimming lanes and so the first top one we have is a physical environment. So ask yourself where is the user at during each action that they take during their journey ? So this is the physical environment. It could be like they're on the bus. It could be at home, could be at the office. The next swimming lane below physical environments is the user action. This is the key one. This is the actions that the users go through, and the one below that is called the front of stage. These air the interactions that the user can see. So think about when you're watching a theatrical performance. There's a lot of stuff you see on stage that's happening. But you can see the next one that back of states just is behind the curtain. So when you're watching a theatrical performance, there's a lot of work going on behind the stage to ensure the front of stage is actually going to according the plan. So this back of stage swimming lane here is called The inner is called the back of Stage. And it's the interactions that you cannot see. The user cannot see these interactions. And the last one here, the support one on the bottom is called the support swimming lane. And these air support interactions could be emails, text messages, notifications. Okay, So if with all this series of videos we've done, we've looked at the example being the order Boba Tea online delivery service. This is a application that we're gonna build out here in a couple more videos. I've used this customer journey framework to model out that whole journey that the customer is gonna do go on during ordering a boba tea online. And this is the journey that we're gonna design for in the future videos as well. Okay, so I'm gonna zoom in pretty tight and scroll around, so you can see. So what I've done here is I've started with the current state goal, which is order Boba tea online to be delivered to the office. So, actually, that's not the current state. Hopefully you caught. That was change it. This is the future state gold here because we're designing the solution, right? So the future state goal is we want to order Bebo Bitty online to be delivered to the office. Okay, so we have our user them. Our user was Franny foodie. She wants to order Boba tea at the office andan the current state. She can't because she has too much work to do and she can't leave the office. So she was looking for a way to order Boba tea and have it delivered to her office. So that's the application we're gonna build. And here's the customer journey. That food, Franny, foodie is gonna go on model right here, so you can see. Okay, So, Franny Foodie is at the office. She's on a computer. She goes to the website here. Whenever the website is name is, we can say its sweet little. She sees a marketing page with promotional messages. There's locations of deliveries views as a map so that she can see the service times and where they will deliver Boba tea. This is only in San Francisco. Service times are 8 to 9, and she sees a button that says, See Menu. The back of stage. Here we have a back end database. This will give the service times and the delivery areas that are up to date to the most recent service hours and areas of locations I there. So the next thing that she's going to do here on this user action as she looks at the Boba Tea menu, she's on a website on a computer right now on her desk at the office she can select from different types of Boba teas. She sees pictures of drinks, pictures of toppings, prices and add to cart button. The back end database behind the siege stage will update out of stock toppings and t type. So if we don't have a certain topping or tea, will will throw out a out of stock symbol on the front of stage. Okay, The next thing that Franny foodie does is she selects Boba tea and her toppings. So again she's at the website. At her desk, she selects N adds to car milty with large boba, medium sweet and adds name to the cup label so this you can order the amount of sweetness that you would like on your boba tea. And so when we do multiple orders, it's important that you put the name on the cup. So if we have four orders a Boba tea, it will name the people that you can put the people's names for each flavor and order. Specify ality. She sees the add to cart button and continues to the at the card. At this point, we have the Back End database, which stores the drink information and stores the name of the Cup labels. Okay, the next step. That off Franny foodie does. She reviews the order. She sees the milk tea selections, the total price, the taxes in the delivery fee. And she sees a button that says, Check out. At this point, the back end were behind the stage, calculates the sales tax and calculates to delivery fee is an estimate. I think we have anything in the support laying here yet. Okay, now she's Franny has toe log in, so she sees that email form a password form. She can log in through Facebook. She can log in through Google. She sees a button that says, Log in. At this point, that Back End database will confirm the log in information is correct, and they'll pull customer info like name and delivery address that was entered in the last screen and save it to that person's profile. Friday's profile. Okay, next thing that we're going to do here for Franny's, she's gonna confirmed her delivery dress and inter payment details. So in the physical environment, she still at her desk at a computer. But now she pulls out a credit card. When she sees the delivery address, she sees the credit card forms. She sees an estimated delivery time. She sees a total cost attacks, breakdown and delivery fee. She sees a button that says, Place, order, and I get on the back end. We're gonna calculate cells tack tax. We're gonna calculate the actual delivery fee because now we know the property address that we're going to deliver it to. Okay, Then we're gonna have the payment. Confirmed is the next step that friend is gonna go on. So she's entered all the information. She places the order. She sees that the payment was successful. She sees the delivery time it's gonna take to get the Boba tea to her office. She sees the delivery address. The back end database here confirms the payment information orders for the business stores , the user order in a user profile section. So those frantic and go back and see a historical log of her orders and it sends a receipt to the user email. So remember this last track here was a support track. So Franny's gonna get an email of the receipt of her purchase, and this also will create the orders and details for the business. So the Boba tea business can start working on her mobility. Okay, so the next step is is that friend is waiting at her office for Boba tea to be delivered to her office location. So the front of stage nothing's really happening. She's just waiting. But behind the stage, there's a lot of work happening. Billy the bike messenger. He has the package up the boba tea. He informs the system that the tea is being delivered any prints out a receipt. He also has the system. Sent a text in an email notification of the e t a. The estimated time of arrival so that e t a. Shows up as a text and email to Franny that we're on our way and gives her an estimated time of when her boba tea will be delivered to her. Billy rides off into the sunset, and it goes, deliver this Boba tea on his bike. Okay, so now we'll go to the next action here is that the Boba tea is being delivered. So the physical environment is You can see the office, um, frantic and see Billy. She can see the Boba tea shock in Syria recede as well. And behind the stage, the bike messenger Billy informs the system that the transaction was completed. So now frantic its attacks in the email, thanking her for her service. Um, and this would be a good place. Also, to give her a coupon for five, maybe a $5 off the next order. Okay, so there you have it. There is a customer journey map. I'm gonna show you another version of a customer journey map. You can actually use when you do user testing or when you're with your targeted persona or your customer. So I'm gonna head on back here to the u X honey, and we're gonna talk a little bit about the emotional journey map. Okay, So what is an emotional customer? Journeyman? This is a framework that helps you understand the current journey that your customer goes through from an emotional point of view. We usually do this more often, not towards the future state. You can also do it during a current state. But I tend to do this once we have designs already built out in a workflow of our designs built out. So here's the example here on the website that you confined. But I've also given you this example in the same file that you can download with the video as well. It is pretty similar to the customer journey map. We have the same swimming lanes. We have the physical environment here at the top have the user actions here. But this point Delange, that we have below are described by emotions. So you can see this lane here is described by excitement. We have a normal state. We have a little bit of a hesitant state. We have a confused state. We have a board state and we have one that's open. So what you can do is you can print this document out. You can go test your application and you can have the person filling whatever information they felt here at this point that can draw it in with a pencil, a pan, a Sharpie. So let me give you the example of what this looks like in the Boba tea, Um, on demand service that we have. So remember, at this point, I've already designed something. I've went to my customer. I'm user testing this design with them or this designs already live in the wild. And I found somebody who used it, and I've went and talked to them, and I wanted to know what their emotional states were at during this whole user experience . And really, what I'm trying to know is what are the joy? Full parts of the application and what are the parts of pain? So I can focus on working on improving not only things that are painful in the app, but the joyful things and continually ensure delight for our customer. So it's the same journey pretty much that we described before. No, Uh, Franny goes on to the website for the application. She looks at the menu a boba. She selects Boba tea, etcetera, etcetera. But this point, you could just have the user actually draw all in a line how they were feeling during this whole experience after they went through it. So we can see that Franny here. She started out pretty normal jumping on the website. She looked at the menu, she got real excited and we asked why she got excited and she really liked seeing all of the options of Boba tea. She got to select some Boba tea options and topping. Still pretty excited over there to review the or order said it was pretty normal. Boom. Got to log in. She was an existing customer. She's got really frustrated here because she got her password. So she had to go through a forgot password flow eventually becoming normal when she got her information there. Okay, She confirmed her delivery dress and entered the payment detail, said it was pretty normal once she went to payment confirmed, she said she got real excited because it was gonna happen. And then she said over here she got pretty bored because she had to wait longer than what was expected Application. Told her to be at her office in 10 minutes, actually end up taking about 15 minutes. So she said she was pretty bored there, But then again, what? She got her Boba tea. She really likes the mobility is really good. She got really excited here. So that's how you can use this, um, method during a, um, user test session or after an applications in the wild, I'm gonna go and show you another thing. You can see this used someone to go to my website here, and I'll show you a case study that I've built out or reviews this. So I'm gonna enter the website. I'm gonna go to my work page, click on the Unova case study, and I won't get too much into what the nova application is. Um, but you can scroll down here and you can see when we went out testing or testing out a workflow in the application that hooked up to a su V cooker. This is a device that cooks in your kitchen that cooks. They're using water like you can see here. And this is the journey People go through, they go on the home screen, they do a bunch of activity. They go off of the device and actually start to prep food and cook their food on. We just wanted to know how they felt during this journey. So you can see how I've used it in the case studies as well. Okay, so you have this file here attached to the video and you can feel free to download it. Use it for your own benefit. And there you have it. That's how to create a customer journey map. Cool as always. Thanks for watching and stick around for the next video, which is sketching templates and frameworks. Thanks again. Bye. 7. Sketching Concepts and UI Sketching Frameworks: All right. Welcome to the next video in how to design a U X case study and user experience design one on one. So we've covered a lot of ground. So far, we've learned how to set goals. How to create a persona, how to create a user interviewed script, best practices when conducting research had a synthesized research findings how to write a problem statement In the last video, we covered how to create a customer journey map. And now we're gonna look at sketching templates and frameworks. So at this point stage, we've done research. We validated a problem. We understood a little bit of how that solution intends to solve the problem. And now we're going to sketch out ideas and concepts around how to solve that problem. So I'm gonna go over to the u x honey dot com. I'm gonna go to you x three. This is the advanced class that I teach at the university and scroll down. Here's all the content that we have for the class, and I'm gonna go into here in yellow, the sketching concepts and frameworks. I'm gonna press this sketching button and you can see I have a little bit of a some helpful information when you sketch as a group. Just remember that this is about having fun. It's around encouraging wild ideas. We're not judging each other. We're deferring from judgment. We like to build upon each other's ideas. We're going to stay focused on the topic. We want to be visual and conceptual when we're talking about each other's work or were doing a critique or sharing work. One conversation at a time is best and go for quantity. This is about going very broad and trying to get us much ideas as we can. Okay, so let me talk about the first concept we have, um, or the sketching framework and template we have, which is called the value problem. And what you have here is you drawl a person in the problem space here and next to it. You have a person in the solution space here, so it kind of looks like something like this. I also have this, um, in a document attached to the file here that I'll go through and review with you here in a second. I'm going to give you the reasons why to use these templates and what they're good for eso the value prop is a quick way to place your persona here on the left in the problem space and then do the proposed conceptual solution here on the right. Um, the proposed solution should be conceptual, and it doesn't include au I work flows, So this is around generating as many concepts as you can. So if we go over to the document that's in the file here, you can see that I'm gonna use the same Boba tea scenario and application that we've been carrying throughout all the videos. And I have the template here for the value problem here. So again, we have the person in the problem space on the left, and we have the solution space here on the right, and I'll give you the example that pertains to the Boba tea experience that we laid out earlier. Okay, so here we have for any foodie, this is the person we're targeting, um, there in their problems space right now. If you remember, the problem for any was at work. I wanted to get a Boba tea, but had too much work toe leave the office and go grab a Boba tea. So she's here. She's on her computer and her cubicle just got work. And you wanna use a thought bubble or a speaker bubble here to frame out the problem. So here's the problem is she wished she had a mobility, but she can't leave the office. So when you do the persona are the solution here on the right, it's best to start it. And right with the concept name, you can see here with Boba now and then, Right? What? The user conduce you with this concept so you can see here on the bonnet on the bottom is that Franny can order Boba tea on demand. So you can see here. Now she has a phone in her hand and she can see a map, and she can see the Boba tea coming to her location. So the concept name here that we wrote out was called Boba Now, and what confer any do with But we're now she can order Boba tea on demand. Pretty simple stuff. So what you can do is you can print this document like I have here. You can do it is a group session and you can give it to you other teammates. Or you can just use this. Just sketches many concepts as you can come up with, and then pick your favorite one. If you do. This is a group setting. What you can do is you can have everybody sketches. Many concepts is they can put them on the wall and then review the concepts together. And everybody can take three votes and they can vote on their favorite concepts. And then hopefully you'll have a clear winner that you can move forward with. Okay, let's go look at another sketching framework in template when that involves a little bit more user interface design. So this one's called a four up, and this is a quick way to sketch out four different screen designs or scenarios without getting caught into the weeds or the details about the the solution or Hollis lotion will work. You can talk through the details here if you can't fit them. So what we have is we have the A sketch here where there's four quadrants and each quadrant here. The top left is the start, so you put the user in the context with the goal in mind. you have the user action here on the right, You have another user action here on the bottom left, and then you have the result when the goal is achieved. So let's go look at this in the same context of the Boba tea on demand application. So here I have the document. This is called the four up. It's attached to the video that you have. You can download it, you can print this out and you can do the same sort of sketching that we did for the value prop. I'll show you the example of how to use this, um, in the Boba tea scenario. So you can see here we have Freni foodie, She's again at the office and her goal in mind here is that she wishes she had a Boba tea right now, but she's at work. Can't leave the office. So user action one is you can see a little bit of user interface. Now she's selecting mobility that she would like and then user action to here, you can see is she can see in real time win. Bobo will arrive upon deliveries that she has a little map. You could see the pope of time here, and then you can see the goal achieved The result. She's actually in the same area of work that she started in. She's still working, But look what's in her hand. Yeah, it is. She's got Boba tea and she's happy now. So pretty simple stuff for the sketching here. Um, and again, you can find these two files attached to the video. Let's say go ahead and use them. Use them in groups. If you do the four up in the group setting do the same thing we talked about earlier. Have everybody print this out sketch from out. Put them on the wall. Vote on the best one. Hopefully, there's a winner and you can move forward in the direction. Okay, Pretty simple. There you have it. There's sketching templates and frameworks toe help You sketch out the solution, and then up next, we're gonna learn how to create a wire frame design at how to create a clickable prototype from that wire frame so you can go out and do user testing. Okay, as always, Thanks for watching. And I'll see you on the next stuff video by 8. Create A Wireframe Design with Adobe XD: All right. Welcome back to the next series of videos on how to create a UX design case study and user experience. Design one on one so so far recovered a whole bunch of videos. We've learned how to set goals, create personas, created easier interview script Best practices when conducting research, have a synthesize research findings. How to write a problem statement. How to create a customer journey map. We looked at the last video we did sketching and templates on frameworks for concepts. And then now we're gonna take those concepts and we're gonna create a wire frame design course. Let's get into what a wire frame is. So a wire frame is a low fidelity design that aims to validate the content, usability and workflow of a piece of software. It's usually gray scale and color, and the reason why is is you want users to react to the content and the workflow, not colors and illustrations and bells and whistles. Plus, it makes it easy for users to give you honest feedback because it doesn't look like you've invested a lot of time into it. It doesn't have too much time, and all the bells and whistles invested into it because you may be wrong. So why invest a lot of polish and illustrations and good work? If you know that you're gonna be wrong in something, so really, it's not validated yet. Once it's validated, you can add all the bells and whistles. It also makes it really easy to generate when the design is low. Fidelity. Okay, let's go look at some examples here of what makes a good wire frame and not a good wire frame. And I'll talk a little bit about the column on the left in the column on the right, and then I'll also show you examples of what makes a good one and not so good. One. Okay, so a good wire frame has just the right amount of fidelity and on the side. Next way, it doesn't look like a final product. It's not the final product. A good wire frame does not have fake. Copy what we call Lauren Ipsum. Not so good. Uses fake Copy a good wire frame. Use Israel photos and quick icons when needed. Not good. One. Just uses gray squares that indicate photos. Good wire frame highlights the content. Not so good wire frame looks sloppy and not structured. A good wire frame validates the workflow and the interaction model. A not so good wire frame is everything's on one off, and they don't reuse components, uh, of the model, and the material has good placement for user location. This is pagination, we call it. The user has no idea where they're at. They have no idea of location that's on the column of the right uses good design patterns and device paradigms. Device paradigms are different interactions that are created for different devices, so the waste piece of software may act on Web. It may act differently on mobile due to the smaller screen, so those air will be called device paradigms. Not so good. One has interaction details that are not mapped with logic. A good wire frame gets into the details and validates the micro interactions. I'm not so good. One just does high level and doesn't account for the details like error states. Okay, let's go look at some examples now of what makes a good example visually and not a good one visually. So here on the left, we have a good example, has a clear workflow of location and content, and it highlights the content so you can see where the user is here on this active button here can see the journey that I'm gonna go on over here has good highlights, Shin highlighting of content. And look at that one to the right. I don't know what the hell I'm looking at. Look at all the boxes. The square bars air confusing. Like, what are these squares with lines through it, usually as designers. We draw this as a quick sketch to show that this is a photo. But that doesn't convey content to me. You can see these little gray squares thes little lines here. Uh, that is a representation of copy, but it doesn't look, I don't know if in my user what I'm looking at, it may not look like copy to me. It looks like gray boxes. Okay, let's go to the next one. Next one. It does a good, uh, example of mixing the repetitive while giving photo contexts so they have a lot of photos to show. So they show you. Hey, here's a couple of real photos we're gonna use, and then they reuse the same photo going forward. So it's showing repetition. But it's not just all blank photos actually show you some real photos here, which I think is nice. The next one. The content is unclear. See all the repetition here? I don't know what I'm looking at were on the left. I know. I'm looking at photos here. It looks like boxes again with lines so they're not distinct enough. Another one. It gets into the details of the micro interactions you can see. I've checked a what we call an accordion. And there's lots of information in just one of these little Accordions here that check boxes and strike and interact with the one on the right is not showing enough details again . I don't know what really I'm looking at here, okay? And the last one is it's a good use of alignment, grid and negative space. You can see here lots of alignment happening. The other one. There's no good use of negative space. Everything is filled, and there's not a lot of cemetery to it. It's all over the place there. It looks like a line here and two column grids, and it's just not really put together nice. Okay, So before we jump into the wire frame, I'm going to show you the sketch that we did in the last video. So if you remember, here's the Boba Tea app, and it's a on demand service that allows this person Franny, foodie, whose air persona to get a boba tea through a mobile application. She can open up the app. She can see Boba Tea flavor. She can select one. She can make the purchase and see it in real time being delivered to her on. Now she's back at work, and she has Boba tea in her hands, so she is pretty excited. So the piece of software we're gonna use to build this is what's called Adobe X'd. So it looks like this. You can go download it. They have free trials on it. It's a really simple and easy tool to use to build out screens, and it also built out prototypes which will get into the next video here. But first I'm going to show you how to build out a couple screens here how to use some symbols, how to make a button and just kind of give you an overview of the product. The first thing you can do is you can create a new, uh, file by just doing command. Knew. If you're on a keyboard, it's our PC. It's control new for Max. It's command on P. Seizes control in. I have different devices I can use. I can use an iPhone 678 I have an iPad here. I can do Web and I can also do a custom size. If you don't know how to use this, they have tutorials already for you. So I suggest if you haven't used this tool to go look at some tutorials already, it's really easy to use. So you can see here. I've already built out the wire frame for this Boba tea applications and let me show it to you real quick in a video format. Okay, so my talk as we go through the workflow here and I'll teach you how to build a couple screens. So pretty much we log in. We see, we see the first green, the app I log in, put my email my password press done. Well, do you sign up? That could see all the Boba tea selections here. I can scroll notice to the bottom tab. Bar stays fixed. Means it doesn't move on the bottom. I press ad now. I can get into a little bit more complexity. I can open up a drop down select semisweet boba. I'm gonna click on the large tapioca button I want. That is a topping. I go toe ad notice in the tap bar in the bottom of my shopping cart. I see one. I can add quantity here if I like to. I could go next, can have the address. So next I could put my card, my details in Go to pay. And there you have. I'm now seeing my Boba tea on delivery in San Francisco. That's going to be to me in 10 minutes. Okay, so I'm gonna close that down, and so we'll get into the prototype in the next video. But you can see here. Here's all the screens that made that prototype. Um, really? So I can go out and test it. Okay, so I'm gonna do a command minus two soon out and a command plus to zoom in. I had a moment. I'm on a Mac. I can also use the zoom icon here to zoom in. And if I hold option or control, if you're on a PC, I can zoom out as well the next basic functionalities. If I hold space bar, you can see I get the hand. So what I can do is I can easily navigate navigate around my doing command plus command minus and the hand That's basic navigation tools that you use here. Okay, so let's go ahead and start by making a new screen. So I'm gonna press this button over here. It says Art board, and I'm gonna make an art board here and watch. When I press this button, it already knows that I want an iPhone six size, so it mimics the same size is I've already had. Sounds good. I can copy these are boards by clicking and holding option and I click and drag and I can see here I've copied and art board there. Let's start, which is building out a pretty simple page here. This is that loading screen that we talked about. Someone put this side by side here so you can see what we're doing here on the art board. I have the ability to feel it with a different color. I can pick any color I want. We can do pink here, but as you see in this example, we have black. So let's go put black Pretty easy peasy. Okay? Next thing is, I wanna have some type. Years. I'm gonna copy of this type command, See? And I'm gonna grab the type tool what you see here. Okay, so we have the type tool here. I'm gonna make a type box. I'm gonna pace the type that I just had. You can see here, didn't paste like it did over here, but that's fine. So I'm going to do as I'm gonna scan over to the right here. You can see, and what you'll find here is I have the tools that I need for the object that I'm on. So I've selected the type at the type, loaded up a minute click and grab all that type, and you can see here I have the size. So let's bump it up a little bit. Let's see how it's hard to read. That's what we call letting its the space in between the type. So here we have the leading If I hover over it. Maybe you'll get me. We have line spacing. So letting is a term we use in print line. Spacing is a term that we use in web. It's the same exact thing. It just means the space in between these lines. You can see this example. Here we have a little bit smaller text, so I'm gonna pop this down a little bit. Let's give it was in the wrong form there. Let's give this about. There you go. 22 pixel height here, if you see this. Okay, so here we have the paragraph where my mouse is so I can do center paragraph. I can do what we call flush, Right, Centered and flush. Left. Let's go. Flush. Washed Left There. I want to change the color of this text. You can see I can pop back over to the direct selection tool. This little V here I can also press escaped to get that tool. And I can change the text color. The Phil here, to any color I want could make it purple if I want to. But let's make it white for now. Since we're doing in the water for me, Okay? Pretty easy. So there's your text tool. We learned a little bit of how to create different sizes. What the letting and line spacing Waas How to access that and a little bit of how toe do paragraph setting. So middle Paragraph, center left and right. Okay, lets copy this paragraph. What do the loading, Boba typing in the loading go by here and that's a little smaller. So let's downsize that over here. So I will say, Let's make that 18 pixels and we want it bold. So see where it says, regular here, I'm gonna click, Go bold. It's good. And let's do a couple more shots there. All right? Looks good. Okay, Someone a pan over to illustrator. Right now, this is another adobe to this down and you can see I have all my assets already here in what we call vector format Vector format means I come zoom in on these and see how it never becomes picked pixelated for I have this map image on the left. See, when I zoom in on the map, it becomes pixelated. So that's what we call Vector. It's actual artwork, and if I click on it, you can see those little lines. I can make this artwork. And so what I have here is I have a Boba tea illustration. I'm going to copy it from Illustrator. We'll go right to Exit E and I'm gonna place it, and you can't see it now because it's black. Select it here, find it. See it over here. But I can change the color. Aiken, blow this up and down. I can make it a different size. And right now it's represented is white. So I go over here to the Phil and I can make white here. I'm gonna go place it on my screen. Let's make it a little bit bigger. Just for fun sees. Cool. So that's how that works. Um, I can make this again. I can add other colors into this. If I wanted to make it pink right now, let's keep it white. Just have it simple, Okay? I want to see about a little bit. Okay? So next thing I'm gonna show you is how to create this sign up page. And when I make this button, I'm gonna show you how to create a symbol which is really, really important toe learn Onda symbol is a you I element that you can reuse over a series of screens So you can see here that I have the sign up button on this sign up screen and it's a symbol. What that means is I also have a sign up button the same button on this screen as well. But watch when it's a symbol. I can change the color of this background. Let's say to Let's go pink here like a and see how it changed For all of the sign of buttons right here, that's what a symbol is. It means that this component can live on many areas of your what of your wire frame design , and you can change it with just one area, and it will change throughout all the other areas as well of the design. So let me show that to you again One more time we're gonna make this screen, so I'm gonna copy the screen over again. I hold option and I clicked in drag, just so I have the same screen size. I can also come over to the art board tool, press the art board once and have a new screen there So let's go grab this screen. Okay? What's built? This button, The sign up button and let's make it into a symbol. So make a square here. I don't want a border. I want a shoe. You can follow along if you need to. Sometimes you may have to pause this video. Go make the button, come back, press play on the video. That's fine too. That's how I learned as well. I'm gonna grab the tax tool. I'm gonna make some text here, but I call it sign up. See, it came in this paint. Let's bring it over here to the tool. I'm gonna press the selection tool here. And let's say that I want to bring this sign up button to the top of this text to the top of the button like it is now. I can arrange this in different ways. So if you go to right click and you see the bring Ford, bring front center here, bring the front, bring before let's send it back. That's how you can organize these objects in different ordering some to take the button here and send it back. And I have the text back up front Okay, so there is the sign up button that we have. So it's made up of a rectangle that I've selected. We can also make circles, if you'd like to is well, I'm sure you have to do a circle here to have the sign up. I'm gonna go ahead and make sure this Texas saying with as the rectangle, that's a good practice and everything looks pretty good. So now I'm going to click the text of the sign of a button and the rectangle behind it. I'm gonna come over here to the symbol area and I'm gonna press the little plus here and boom, I get a new symbol. So it's called this the new sign up, but name. It's good to name these the names. And here's what I mean by being able to change this in one area, and it changes throughout all the instances that you'll see. Let's say I copied this button. A bunch over here have it over here as well. Could make these changes here, and I can change the tax on these, which is really great. Let's say I can say this is the back button. This is a cancelled but and the text won't change the master symbol so I can have different instances here. Let's say this was like log in. Uh, let's say this one is pay. Let's say this one is have fun. Let's say this one here is uh let's say you rock for watching my video, Okay, so now I got to do here is like change the feel of this background rectangle to any color. I watch I want and watch what happens to all of the rest buttons. They change really sweet home. That saves you a lot of time when you have to make changes on your application. So make symbols. It's really, really important. It's part of our workflow. So with that being said, I already have some forms form symbols that I've created here, So let's pull a form out. Let's just get some of this Lee outgoings. I have the form active black. Pull this at what you do is you click and drag the form here the form default black symbol onto the campus, the workspace, and now I can see I have a form. Now let's go ahead and copy this symbol. Some of the hold option shift and I click and drag. Let's do last name. Cool. We also had email and password, so I'm gonna copy both of these. Now, make sure the same spacing. I'm gonna say, you know? You know, I'm safe. Password. Pretty simple, huh? Okay, So I'm gonna go back to my illustrator file and I have this logo. Someone grabbed the logo here. Go back toe X'd. Don't be X'd. I'm gonna pace this illustration in here. Hopefully it should pace. There you go, poppet. Here was making a little bit bigger for fun. Great. So that's pretty Looked looking pretty good. We have some copy here. Some log in button here, but you already know how to do text so you can create those if you like to. Let's learn how to bring a photo. This is just a photo of a keyboard into this page here. So what I'm gonna do here is my copy. This page and I also have the form active, which is when I'm clicking into this form as a symbol. A swell. So I'm gonna do is I'm gonna delete these three. I'm gonna drag in the form active when you actually click or tap on this form here. I'm gonna make sure it's lined up a copy. It taste it and actually go back. I want to make sure all my forms lineups. I'm gonna keep these here. So now I'm going to drag the form active onto the campus. I'm a lineup. The lines here. I'm gonna copy it. Command C. I'm gonna delete this first name for press command V as in Victor and that paste right in place. So I'm gonna copy the same one. Here. Let's make this safe. First name was on the first name. I'm a copy of this form over to the last name form in a command. See? Delete the last name Command V. I'm gonna do last here, Tool and same thing. I'm gonna go over to the email, a copy of the email. Delete this command V pace in place. Let's make this email. Say it's Aaron at gmail dot com, and I'm gonna do the same thing with the password. Make sure these lines lineup It's about good taste that delete it. Great. So now we have the email. I'm gonna change this to the password subset. You can see how I'm doing. And I'm just gonna do a commit a option eight as the number and that does bullets for you that you can see the password here. Okay, so there you have the active versions of these forms. What? We need the keyboard here. So if you go over to my folder, I have all of the images I need here. I have the bow bt images see here. But I also have a keyboard image. Looks like this. So I can do is just drag this any image you want. Just drag it onto the art board, and I'm gonna downsize it right now. Button. There you go. So now I can prototype, which will do in the next video these screens together. And it will feel like I'm actually tapping into this form filled writing information. Let's put my last name here. It allows me to test how the forms will work most of time and wire framing. You don't have to test out like people typing in the form. That's a general usability, um, by default that we all do. You're just testing out. This is the right content. Like somebody may say. Here I'm used to putting a other form field. Let's let's say like, reenter your password. You can have to have one reenter. You need to swell, but we don't need to do that right now. Okay, So the next thing I want to show you is a little more complexity. This is that selectable butty page here. So me show you what this looks like. So I think I want to point out Here is I just pressed. The plus are the the play button here, the top, right. And when I pressed the play button, I can view this and I can view it how I would view it on my phone. So when I scroll, you can see I can see the rest of these over t selections. But look, this tab Mar here is staying fixed to the bottom, meaning it's not moving anywhere to see how that works. So I'm gonna show you how to create this tab are and how to fix it to the bottom and continue your design. So that way, when you play and you view it, you can scroll through different options options like this. So normal, uh, mobile functionality here only closed this. And let's just go ahead and start with a new art board here. So I'm gonna copy this one. I'm going to select all of it, and I'm gonna delete it. Okay, So first things first, let's go and create the tab. Are so it's just a rectangle. Usually they're about 100 to 150 in height. So we have 72. I don't say this is about 100. I'm gonna cheat a little bit. I'm gonna say it 75 just for for the sake. I'll see when I tested. If it's too small, click on it. Let's make it black. All right, let's go over to illustrator. Let's grab my icons here. You can see I have the three icons that make up that tab bar already here. And what's I want to show you a website really quick where you confined really great icons . So when they go to a website that's called the Noun Project and check this out, you can have any icon you want. Let's say you want, like a doughnut. Look at these getting hungry. I am. Okay, let's click on this doughnut. I can get this icon Right now it's free. I can say basic download can download it here Wana spg and it's downloading. Now let's go ahead and drag this into my illustrator. Go to my download area. Uh, I can see the SPG here dragging into illustrator and check it out. There's my donut. Full vector. I can grab it. And again, I can go close this out and I can go into my other ex defile. That's the visual design. One close. And I can pace this right into my heart board. Pretty sweet, huh? So the noun project is what it's called. Go ahead and make an account. You can use all the icons you want. Let's go back to Illustrator. I'm gonna go grab these three icons here and have to go back to X'd place them in their black. So let me go ahead and change these up to be white, so I'm gonna put them on right click. Bring to front. I'm gonna make these all white. For now, we have the shopping cart over here. We have a little profile icon over here. Keep this in the center. Let's make this just a little bit smaller. Here's my boba tea. That's the the screens that I'm on right now. All right, so we have three icons. They're all the same color. But we have what we refer to as a default state and an active state. So the active state is a representation of where I'm currently at its my location. So right now, I'm not on profile and I'm not on the cart. So what I want to do is I want to go sties and bring them back. So I have the capacity here. The right that I'm bringing down say, like, 60% should be fine. Click into it, to be exact. Let's go ahead and say 60 for the icon as well for the shopping cart. And we'll keep this at Boba. Tea Icon is 100%. Okay, so there we have a nice, uh, tab are the bottom. Let's go ahead and grab a photo of the boba tea that I have here. So my desktop good skill. Share my Wyler wire frame here and let's go grab this boat. T here places into this file coming up a little bit. Looks good. So far. All right. So I can also make another rectangle, make a with no border. Make this black, and I can pull the capacity down on it and put text on top of that like you see here. So I'm going to just copy this text here, since I've already thought you had to create text and copy this button. Since you've already learned how to create a button as well, Any time you make a new button, let's just go ahead and say I'm gonna make this new ad button here. It's best practice. Once I reuse it to go ahead and make a component out of it so that I'm gonna grab the type tool. I put the word ad. It's make that black so you can see it. There's ad. I'm gonna grab both of these by holding shift. The shift allows me to select both of these images. I'm gonna do a command G, which is a group can also right click here group make it a symbol, keeping little plus mark here at the top Left. Boom. Now I got my ad, but in symbol right now it's called Symbol 17. What saves? Add button for now. Looking good. Okay, so let's go ahead and copy this section a couple times here, I'll show you what's gonna happen here. Don't bring it down before I go and bring it down to the next layer. Here. You can see what's happening here. I'm gonna extend this art board. I'm gonna pull this art board all the way down. And here's a key thing to see this little dotted line here. That's a representation of what we would call hidden or below the fold of your of your iPhone. So anything below this dotted line the user will not see, They'll have to stroll down to see that information so you can see we've lost our tab bars . Well, someone right click on this send to back. And now we have our tab bar here. So all I had one more section for this image. Grab it one more time. Copy it. You see? Have a little bit of leftover our board self. I just grabbed the art board here at the top by clicking words as iPhone 678 22 and I move it just that were so slightly. Here. I can crop. It looks good. Okay, let's take a look at this and take a look at what happens to the tab are right now. So when I scroll down or I swiped down, see how the tab bar moves with me? We don't want that. We want that to stay in what we call fixed position right here. Bang. Cool. So I show you how to do that. So what we wanted to right now is you want to select this tab bar, make sure you have all the elements within it. Sometimes I just delete it. And I do a command z to go back just to make sure I have it. And see this little check box over here says fixed position when scrolling in the top. Right? I check that. It's going to stay fixed in position. So now let's go watch and press the little plate button here at the top. And now watch what happens in my scroll. The tap, our stays there. Nice looking good. Okay, you can see the bottom image. I can't get all the way to the bottom of that. Uh, but with tea selection to press the add button. So what we want to do here is we do want to go back and extend that art board a little bit longer the size of the tab bar that we have now. Let's go look at this again. No, I can get to that ad button here. It's a lot of times you're designing and you're coming in and seeing how this preview works , you're going back. You're making adjustments this pretty much most of the gist of this tool. There's lots more you can get into here, but I would. I really want to show you the symbols how to use the type, tool, make type, make buttons. Pull photos into it cause most of our U I is a combination of either a square rectangle with a rounded edge. You can see here from one around this agile I pull these little insides. See how rounding out just there and photos and typography So most wire frames are built up like that. You can also go to the noun project to find icons. So if you wanted Teoh say, like cupcake hopeful, I'm getting hungry. Find more icons there so you can bring them into your design and you can start building out the workflow. Here. It's on the next video. I'll show you back to this video here that I'm gonna pull up. I'll show you how to create a prototype. So this is something that stitches all these screens together to make it feel like a real application. So you can go out and you can test this prototype. What we call it usability testing. And I'll show you that in the next video here. So go ahead and go create all your screens, All your designs. Make sure they look good in the preview section. And then I'll get into the prototype being in the transitions that you're seeing right here in the next video. Okay, So again, as always, thank you for watching. And hopefully I see you on the next video. Goodbye. 9. Create a Clickable Prototype with Adobe XD: Welcome to the next video on how to create a UX design case study and user experience design one on one. Right. So we covered a lot of ground here. We've started with how to set goals, and we've gone all the way to how to create a wire frame design. And we covered that in the last video. So in this video, I'm gonna teach you how to take that wire frame design and make a clickable prototype with the designs that you have so you can go out and do user testing. So in the last video I showed you, we were using Adobe X D, and that's where we made all of the screen designs. Now I'm gonna use Adobe X'd, and we're going to create a clickable prototype with those screens that we made. So here's what we're gonna make. I have the video here may start it from the beginning, we have a loading screen that times out we have a sign up screen. You can see the keyboard because the email password got it done. Sign up, scroll down. When we learned how to keep that tab are in the last video fixed meeting stay on them. On the bottom I click. There's a slide up. We'll show you how to do that. We have a drop down here. Select semisweet. I'm gonna press the large tapioca, but in add this to the cart, Go back to the normal page. Click on the cart. We have a slide up. Go put my address. Intuit gonna press next. Gonna go put my card information in press Done. Press pay and wallah. I got Boba tea being delivered to me in 10 minutes. Okay, cool. So I'm gonna go open up X d and I'll show you some prototyping tricks here on how to create a Perseid. It's pretty simple here the next day. So first thing you need another's two modes here, this design mode and a prototype mode and see the information here on the right. This bar here, I lose that bar when I goto prototyping. That's how I know I'm in prototype mode. So you've toggle between the two here, look at the top left design prototype design prototypes. Okay, cool. Let's go back in design mode. I'm gonna grab a new art board and my place this art board underneath to sign up our board . I'm gonna grab this sign up button here. I've made a symbol of it. Drag it into this art board. Boom. Grab this logo. Place it here. We're going to start here because I want to show you all the functionality that you can do within Adobe X'd when it comes to prototyping. So I'm gonna copy of this screen over here. I'm gonna delete these elements, and I'm gonna grab a rectangle and would make a black screen. So you see here. So it makes it easy, so we know what screen we're working. I'm also gonna put it X here at the top and my copy of the screen as well. And I'm gonna do a back arrow here, and I'm gonna copy this button over to this art board. Call this next. Here. Okay, so now we have enough to go ahead and start prototyping. I want to start showing you before we get into prototyping the whole application of the Boba tea experience. I want to just go into prototype being and show you the capabilities of the prototype feature. So first things first I went from design here and now I'm over in prototype. So when I click on the button second, see here I can click on the button and see this little blue circle with the arrow on it. I can drag that to any screen that I'd like, and it's gonna connect this button to that screen. So it's pretty simple stuff. So I wanted to go to the screen to the right, and then white Knight, click and undo my click. Um, you'll see a little pop up appear, and this is the trigger. So this allows somebody to tap, drag or do voice commands in the prototype. So for our most of our cases, we're going to do tap. So I'll go through tap and I'll show you some different. I'm transition states that you can use right now. So right now I can set the transition. Um, I can also do an auto animate, and I can do the overlay. Mostly, you only really need to know transition and overlay 99% of time. That's what I'm using transition and overlay, and for animations, you have dissolve and you have a swipe. A slide left slide right, slide up, slide down. So what's to start first with none. So, um, what I have here is have the sign up button going to the next dartboard when I tap it. There's a transition here, and we have no animation. So what's going to see what that looks like? So when I press play here at the top right, I get my little play dialogue. And now if I press sign up, you'll see it just takes me to the next screen. But let's go put some transitions into this and we can explore. Some didn't different transitions here. This is where it gets really fun. So let's go ahead and say we do it. Dissolve. So I have the duration of how it's gonna dissolve here at 0.1 seconds. I don't know. Let's go ahead and say five seconds. Okay, so I press play, see how that now dissolved into it to slow it down so you can see a little bit more what's happening here. What's doing like a very long duration? Let's say like three seconds now. Oh, no, let's have fun. Let's go like eight seconds and see that dissolve. Here, someone press play on. See the slow, dissolve kind of too slow. Um, so you can also keep it this little preview window over here. It will stay on your screen, and you can make changes in real time. So I'm gonna go back to, let's say, um, 0.3 seconds here on the dissolve, and you can see now when I click this, it's faster. So it makes real time updates on this little preview. But for all sake, I'll come back and forth and open a preview so you can see what's happening. All right, so the next thing we can do, here's weaken. Do a slide left. This is gonna create a the art border war will slide from the right of the screen and left to viewing position. So let me show you what that looks like. We have the Boba tea here. I press the sign up, see how it moved to the left. Very simple. Okay, let's go to the next one. Let's go. Dues slide, right? Kind of same thing. Just gonna slide right. Local press play and see how it slipped in from the right. Most common were doing slide left and slide down. So let's go look at the next one, which is slide. We're sorry. Slide up and slide left are most common. So we're gonna do this slide up here. And what that looks like is when you press the sign up button, this thing slides up. Now, we're gonna do a slide down now, and we're gonna do it on the X of this one. So this access to close this little slide up and we have the same tap transition, but now we want to slide down. And so now we're building an interaction so you can see this. This is most common in the work that we do in mobile applications is you sign up, you're gonna slide up. I close that you're gonna slide down, see how that works. It's pretty nice. Okay, Another thing that I can get on this screen is See this little home icon here that's in gray. If I click that and I make it blue, I get an additional, um, transition here. So if I connected this to this screen art board to the next art board, I get a time one when its home page. And this allows me to time something out so I can say here in five seconds, it will go to the next screen. So this is common for load screams. And this is how I made this load screen here, um, go straight to the sign up screen. So if you see what happens here when I press the play button, I didn't press anything. I haven't clicked on anything. And it will time right to the next screen. You see that? So it's it's a time feature, but you only get that when it's the home screen. So I'm gonna go back here and I'm gonna make this the home screen again. So that's part of the application. Okay, great. Another thing I want to show you here is let's delete this transition here. Okay, So what we're gonna do here is we're gonna create the sign up button, but we're gonna do an overlay here. So if I click on the pop up here, but I'll get here is the opportunity to do not a transition button overlay. And the overlays are great when you do a mobile drop down menu. So I don't do is I'm gonna go back into my design moment. I'm gonna change this screen a little bit. Some of them make more like a drop down menu here. And what I've done here is on the appearance of this art board. I can have it filled with white. I can also have it not feel with any color. And so what that allows me to do is when I go to my prototype and I view it, I press sign up. Just this little piece will of the next screen will slide up. That's called the Overlay, So it's just overlaying the initial screen that I was on. Well, let's go back. Let's do a couple of ah more three screen, um, prototype here. So as of right now, I have the sign up button that goes to the screen to the right here, and we want to make this slide up. I have the X that takes me back to the original screen, and that's how to slide down here. But I have this next button here that I want to go to the next screen, and what that's going to do is we want a transition. We wanna have this one slide to the left, so let's go Look at that. All right, So I sign up. I pressed the next and you see it slides in. It'll left to make it even easier for you to see. Let's make this a different color was have some fun here. It's make it like pink, like Okay, so to go back, it's pretty. Type this, take a look. So here, slide up and then I have a next and a slight left. The reason why it's a slide left is because I have a back button. I may want to go back to that page. So here we're gonna go ahead and grab this button connected to this art board, and we want to make it slide right, And that will allow me to go back to the middle screen that I'm on. So now we have a full complete prototype, except one more piece I'll show you gonna do with that button there. So here, have the sign up. This slides up. I can close it, go back to sign up. I can go to next, sleight left, and I can do the right button here, or the left button to go back and it goes back to the screen. I'm Matt back to the home. But so a lot of your interaction, design and prototyping shall allow users to go forward on screens and to go back on screens . That's how we've done it here. Okay. And the same thing on the clothes here we want to close. This button should act just like the close button here takes me back to the original screen is that this one is a slight down. So now you can see how I can jump back if I want to. So let's go ahead and say I have many of these pages here. Let's go and copy this one. Let's make this over here. I will say next. Does another slide left here. This, uh, one. This back button here will go to the pink screen here. Slight. Right. The X will go back home. X will go back home. Let's make the, uh, art the art board here on the far right. Let's make it blue. So we know where we're at. Like that blue there. Okay. And let's look at this prototype. Now you can see the X on all three of these screams. All go back to the home screen next goes to the screen to the right, and the next button always goes to the next screen on the right, and the back button will always go back to the screen on the left so you can see a my sign up. Come here next. Here's the pink screen. I do another next. Here is the blue screen. I go back, takes me back to the pink screen. I go back, takes him back to the initial first screen and then I'm back at the home screen. But let's say I'm all the way to the blue screen, and, you know, I'm kind of done with this workflow X go back home. It's a pretty simple. You've just learned a pretty detailed, complex interaction in a very simple way. Um, and the best way to learn this is just go play around, Just get into this, um, play with these interactions. Go press, play, see what they do. Um, have fun with it. Okay, so we delete thes. And as promise I'll show you the prototyping that I have for each screen here that makes this full bullet e application complete. So right now I have this home screen set with the time delay for four seconds, and then you can see here. Anytime I click on any one of these forms, it takes me right to the next screen, which is the keyboard. When I click on the email and password takes me to the next green, where I feel in my email and password, and then you can see the done button here have just a transparent square. There's no color in its invisible takes me to the next screen here. No transitions. So what we can see is this order here. So we have the load times out. In the second. I got to sign up. I click my first name. I clicked the email press done, and that's pretty much it for the beginning of sign up. Once I press sign up, you can see I have a transition that goes to the next screen that's called Dissolved, so it's a really quick dissolve, and you can see it goes right to the main screen where I can order boba tea. The next thing I have here is when you get to the add button. This is a slide up. Remember, because it has the X and the X takes me back to this screen to close it So you can see here a press play I do. They add that the swipe up close goes back to this home screen here, press at again and then once we're on this screen, the thing we want to do here was make the prototype overlay When I order when I want to change the regular sweet to a semisweet. So what we chose here was the overlay and this is a slide up so I can select the different options of sweetness. So I pressed the play button click on the regular sweet look at the overlay. Come in. And then from the overlay here, I've selected semisweet That takes me to the next screen where I've changed the text here from regular sweet to semi sweet. So at this point, I'm here Actually here, press play. I want the semi sweet gonna go to the next page. Okay. At this point, I want to click the tap large tapioca button that's going to go to the next screen where I have the active state selected. So you can see what that looks like because in the next green. And then we have the ad button, which takes me over to this screen here, where I can see there's a notification on the shopping cart that I have one order. Let's look at that. And repress ad. Oh, awesome. The next thing we have here is I have the add button that takes me over to the check out or the check out button Icahn that takes me over to the check out screen with a slide up. Because, remember, we have the X. The axe will take me back here. So what we have here is looks like this. Go ahead and look at that. Slide up. Great looking good. Okay, So the next thing that we do here is we have the next button that goes to the next screen of events, which is the Inter your address. All right. And from there we have the, uh, where I click on the address, takes me to the keyboard, and when I do, the done takes me to the next screen here so they can look at that and then next will take me to the credit card. So let's look at that as one interaction here I got next. Click on the address. Get the keyboard. Looks good. Close keyboard back at the payment screen and again I can go back here to be screen up. Go back here to the screen. Should take me back here. And that should be a slide left. Great. So let's look at that really quick. And if I go back, see how it takes me back? That was weird. Let's go see what happened there. So I'm done. Press next. Slide over. Slide left. It looks like it's sliding right? So this year should take me back to the screen on slide slide. Right is what we wanted. That's light left. Excuse me, Right? So let's go ahead and look at that on the address screen oppressed. Next, I go to the inter payment screen and do the back button. Spite right? Goes back to the address screen. I can make edits if I want. Then go back to payment. Good. Okay, click anywhere in the payment screen. It pulls up the keyboard, have my information and put it there. Press down on the keyboard, takes me to this screen and then I pay and pay for takes me to the screen where I will get Boba tea. So there you have it. Let's go ahead and look at the final here. Which is, uh, I've entered my credit card information press. Done. Go ahead and go to pay and boom, I'm here. Okay, Next thing that's important for you to know is we have this complete prototype. Now that I can click in, I want to package up that prototype, and I want to go out hit streets and test it with people. So first thing you need to know is Adobe X'd has an application, and you can download it on your phone when you download that on your phone allows you to save the prototypes that you create so you can leave and go test your prototypes out of the office. So if you go to your phone, you go to the APP store and you do Adobe X'd. You can download this for the iPad this'll application for the iPad or the iPhone. It's free, and it'll connect to your prototype for you on your phone. Okay, If you're doing a website and you need to test this on web, then it's pretty easy here. Um, what you can do is you can go to share link right here. Do publish prototype. And you can see I have has already been published. Copy the link here. And I can also press this share, but and it will take me to the prototype here, they will load it. Here you go. And I can go ahead and go through my web prototype for somebody and user tested can also just send this link via email here. Can, like, put it in somebody's email. They can open it up. Anybody in the world can come to this. Prototype that contest with them. Okay, cool. So there you have it. Um, I'm gonna go and show you a little bit of what I've done with this file that we're gonna cover in the next series of videos. And one of them has had apply. Apply visual design to this fire to this design here. So you can see here that I have some visual design added to this experience here that I'll show you how to take the wire frame to the visual design. But first, in the order of videos, we're gonna learn how to do user testing and a design system. So, as always, think for watchin and hope. You had fun with the clickable prototypes. Join me on the next video, and I'll give you some advice and direction and best practices of how to do user testing so you can go out and test the clickable prototype that we made today. All right, Thank you. Bye. 10. Create a User Testing Script & User Testing Best Practices: Welcome to the next video in the how to design a UX design case study and user experience design one on one class. So far, we covered a lot of grounds. We've done goals personas. We've done interviews, scripts and research problem statements, customer journey maps, sketching templates and wire frame designs. In the last video, I taught you how to do a clickable prototype so you can go out and do user testing. I showed you how to create a link so you can walk out of the wild to go around the streets and user test with people with your mobile device. If it's from a laptop, how to do it from a laptop is well, and in this video, I'm gonna show you how to do user testing so you just can't have a clickable prototype is not enough. You're gonna need a user testing script as well. So I teach you how to do a script and I'll show you best practices when conducting user testing. Okay, so what I'm gonna do here is I have a script pre made in our files that are attached to the class so you can download this file this will go through the user testing script template. But before I get into that, let me just share with you around. Why? To do the script and some learnings on just best practices with user testing and why we do it. So here, I'm gonna go to U ex honey, and that's the website I teach at the university here in San Francisco. If you click on the U X two area, you'll get to the home scroll down to find the user testing, click on the user testing and you'll come to something like this the page that looks like this. So these are testing. It's really all about task tasking. You're gonna task your user to do an action in the application and then you're gonna watch and observe. In most cases, you do not help them unless they are really, really, really stuck. Because if you launch the application to the wild, you're not going to be there to help everybody that uses the application. So you want to task them and observe them as if you weren't even really there like a fly on the wall. But you will have questions along the way that you can use to help you. So why do we do usability testing? It's because user experience, design or lean ux is all about testing all the time at every stage of your design. You don't know the impact of your design decisions unless you test it. Testing is how you will know your design works or not. Remember to think like a scientist. Run experiments and you decide. Like a lawyer. You have facts and logic and reason. If you're not testing your accumulating risk every time you make design changes in design decisions, so make sure to go test these applications that you're designing. When do you do it all the time? As much as possible in the industry is best to set testing once a week or every other week . We call it a B T. Always be testing. Your design does not need to be perfect or complete at all. To test it, don't wait until it's too late. Just go out and test. You can do concept level testing with paper prototypes and your sketches. You could do tons of testing during the wire frame level, and you want to test the visual design stage as Well, if you add a bunch of new screens or you change existing interactions, then you should go out and test the new changes that you've created. All right, So first thing you can ask yourself is the how so you can say What are the scenarios you would like to task people to do in your application and you can come up with scenarios. I'll get a little bit into these with the Boba tea example here in a second. Okay, then you can take a look at each scenario and look at the screens you're gonna show per scenario, then right questions that task and guides the user through that specific workflow or scenario. 3rd 1 right, a testing guide or a user testing script that goes through each scenario of your application and guide the user through the screens of the questions relating to each screen and section that you're showing. That's what we're gonna do right now is we're gonna go over to the file that I've created that you can download, and you can use this as your testing template. So remember, the goal of user testing is we want to validate the design decision or the design solutions that we've done and created. We want to ensure that are content, makes sense to the user. And we want to validate that our workflow is usable, and we're also going to gather insights, confusions, joys, pains and request. Went out there testing with people. And I'll show you how to take all of those insights and put him into a synthesis in a systematic way of putting information that relates to each screen. And it's no different than when I showed you in the research video, where we take insights by people we test, we put them on sticky notes. Only this time what we're gonna do is we're gonna put the sticky notes according to each theme, um, that relate to each scenario or screen, so I'll get into this in a second. But let's go through the usability testing template first and give you an idea what that looks like and how to fill that out. And then I'll show you after you do a whole bunch of user testing how to synthesise those insights into themes and patterns so you can generate okay a lot of times again before we do research or we do usability testing. We have an introduction. So introduce yourself the note taker. Just say, like I'm a designer or a researcher. In this case, we're working on the Boba Tea application. So you say you're working in the food and beverage space, so whatever your domain is in, just introduce yourself in the domain that you're working in. Ask if it's OK to record the session. Let him know it's just for note. Taking purposes. State how long the interview will take place or the session will take place. You can say one hour. This is really important. This section right here, the goal section here, so state the goal when we're prototyping, it's very important that they know this information. So here's what I say. You could say I'm working in the food and beverage space and we have a and see the things in bold. We have a early stage prototype that I would like to share with you to get your feedback on when showing you this prototype. Please know that this is not a test. Please be honest and let me know if there's anything confusing, weird or missing in the prototype than restated Say Overall, I just want to learn what is confusing. And I'm also curious about what are the things that you like? Let them know during the sessions, say, and during the session, please talk out loud again. Number five here, let them know nothing they say will offend you. Say again There is nothing you will say that will offend me. Please be honest. Feel free to have questions any time. They'll be five minutes of the end for any questions too. And then ask them. Is there any questions before we begin? Turn on the recording device. Start going. Remember to take pictures of them Not right now, but towards the end. For your case study, it's always important. I always forget to do that. I'm so involved in the testing. Remember to get a grab a picture of them. Okay, At this point, you want to task them to do something in the application. So what you're gonna do is your task them. Then you're gonna watch them and make them talk out loud. And the questions that we have going forward are Siris of safety net. Prompt questions that you can use to learn more about your designed. But you're hoping if the user talks out loud that you will not need any of these questions that have come up with. The user would just tell you around what things were confusing. What's Nice toe? Have anything missing? Anything they like, and I'll show you a little trick. When I do testing, I actually like. I'm gonna go over to the Adobe X'd prototype that we made earlier. I actually like to put a screen in the beginning that frames out the actual scenario or task that I'm tasking a user here to do before they enter the application. So I start them with reading out loud. I call it their mission. It makes it more fun. So I say, Read your mission out loud. So just like I have in the script here, I have the bow Bt Example Task, which is sign up for the application order one Boba tea with semi sweet sweetness level with large tapioca. Put your address into the application and pay for Boba tea. Great. So I have that as well right here in the application. So I have them read out loud. I mean, update that great So I have them read out loud, the application or the task. And I have a start button that says, start your mission. When they pressed that start button boom, they're off into the application. We begin the interview. Okay, so you're hoping at this point the user starts to talk out loud. I'm gonna go back to our script here, and this is where you should have your questions here. So we've just tasked them to do the Boba Tea task. And so your questions should be this make up the same way that we did the user interview scripts. You should have the screen or scenario. Here is the title and you should have a Siris of questions that relate to the screen or the scenario that you're tasking. So here's our example. We have a sign up page and this is the best question to say Every time a new screen enters the viewable area for the user, just say something like this. Talk out loud. Tell me what everything on the screen means to you that starts the prompt for them to talk out loud. The next questions I have here are the Boba tea selections So this is the area of the design when they get Teoh after log in and signed up everything this screen here were, has Boba tea selections here. Some member. Look at these icons here. The ad buttons, the photos. So this is where I have a SYRIZA questions here, but I'll do the same thing. When that section opens up to the user, I'll say, Talk out loud. Tell me what everything on this screen means to you. And then I'll have some questions along the way. I'll say, Are we missing any Boba tea flavors that you order a lot? And then I'll say, What do you think the little icons in the bottom do, referring to these little icons to see them talk out loud, not to go and interact with the icons. Just go tell me what you think they do. What do you think the add button will do? And is there any information missing? All right, so pretty much you want to have a couple of these sections, each one for a scenario or screen, and then you have the outro. So after year, user testing is over. They've hopefully learned a lot. They went through the application. You can have them go through the application more than once, and once they go through it, from an initial point of view, you can have him go back and point out anything else that was confusing or things they liked. And I get. My favorite question at the end is the wish list. Question. So this is where you can say, based on everything that you've seen, let's say we were to give you a magic wand and you can get anything in the application. What's your wish? And you'll hear a lot of good feedback and cool things there. So then you can hit the outro. You have a time, or you'll have time for questions for them. Anything that they have for you. Um, sometimes they just say, like, hey wins this application coming. I'd like, like to order Boba tea. That's what you hope for. Um, the outro is a thank you for your time, all the notes in the recording or confidential, and only be seen by myself in the team that there's payment involved. Make the transaction. Um, tell them if you'd like to calm that if it's okay to contact them again for further testing on the solution as well. You can even ask if they have any friends that are interested in tasking. That's a good approach there. And then you just say thank you and goodbye. Okay, so now I'm gonna pop over to what? That testing actually should look like and give you some best practices there. So again, you are the conductor. You have the test candidate, you have the note taker. Um, it's best Teoh. Record the audio with your phone here. Test with another person's phone. Remember the note takers Just observing and taking notes. They're not talking. You're doing most of the talking and the observations with this test candidate. If you're on site, you're doing recording. Um, so this means that somebody's on site with you and you say you have a laptop that you're testing. You contest the screen recording with zoom zooms, a tool that allows you to dio screen FaceTime videos, and you can also do sharing. You can also share the the screen recording with quick time. That's what I'm doing right now to record these talks. Um, and you still want to have your audio device for the audio. A swell zoom will do the audio with you. Quick time? Uh, well as well. But I recommend doing it also from your phone. Okay, If you're doing a test on your phone, you can download an application called Look Back, participate, and that will allow you to do screen recording from your phone and audio recording all in one shot. The application works pretty well. It does have a little bugs here and there every time I've used it, But it's overall, really solid application and the capability that it does. So these were for all on site where you can actually see somebody physically There in the room with you for remote remote recording. If you're doing a desktop application, you can do remote recording. You can share a zoom link. This is ah, zoom application. If you're interested in learning more, just go to zoom, uh dot io and you can go find information around. How do you zoom? Um, you can press the record button and zoom. You can share your screen, you can give mouse controls and you can have somebody test the prototype and also press the record button zoom So it's doing all your work for you in one place. If you're doing screen sharing on testing a mobile, don't do that. It's recommended not to. Mobile devices are meant to be used in the wild, not through a screen. So don't test mobile remotely. It's not 100% conclusive. Um, and if you were to do it, you're just testing out content, not the usability of the application. All right, so this is the best practices. When out there doing user testing, I'm gonna come over to the real time board here. This is my digital whiteboard and show you how to synthesize your insights and your findings after you've done user testing so you can see vice keep scrolling here. Well, actually, before I get into that, let me just share with you a couple of interesting things I've learned along the way when doing user testing. So there's some interesting things around Burbage. So if you find after a whole bunch of tests, um, that your users air calling something in the U I a different name, the user interface a different name than what's on the screen. Come back around and change the verb ege in the wire frames or designs and changes their Burbage to the to the words that you hear that users are describing it as look and observe at people's body language, sometimes not all the time. But sometimes when people lean in on something, it means they may like it, since I was. When they lean back, they may not like it, and if they lean back in their arms, were folded to they probably don't like it. Test the room, though. If it's cold, people tend to fold their arms as well. Okay, so remember that question around? Um, this is a good question around the expectation. So if a user goes to click or tap on a button before they interact with it, just say, What is that? What do you think that will do and get their expectation and then let them go ahead for say , OK, great. Go ahead and proceed, and then no tipping a tapper. Click on the button, the walk through again. I've given you this already. This is the best opening line ever. When your user seizing new screen, just say walk, walk me through the screen and tell me what everything means to you one of the best things there. I won't get into the other one little bit more advanced. Here's one that's great. Eso without testing, it's okay to make mistakes. Just don't run off in react immediately after receiving one negative data point. Get validation on that negative data point, too. So if it's really painful or confusing for one person, don't stop and change the whole design. Validate that. That's painful and confusing for more than three people. 3 to 5 people. Then you can change the design. Okay, so that being said, let's go say you ran out Did a bunch of interviewing. In this case you've interviewed three people do the same synthesis that I taught you in the research videos where we use sticky notes. So we have three people. We have no what? Naomi, We have Johanna and we have Anna here. Andi have tested with three people so far, and these air all their insights one per sticky note here and what you want to do is eventually go grab these insights. And you can imagine this is a physical board, but actually looks something like this. Here you have the screens taped up to a board. You have the sticky notes here underneath them. Here's me a designer here doing this together with a client. We have the screens and all the insights below the screens. All the people here that we interviewed on the left. So I'm gonna show you how we do this, but in a digital way with real time board right now. But you can do this in the physical world with real sticky notes as well. Some in real time board. I have Naomi. So what I could do is I can grab the insights that relate to each screen. So let's save my Naomi said we were missing some of her favorite Boba tea, um, flavors here on this screen so we can go grab that insight. Put it here. And let's say, um, she said she liked to have the person's phone number or a way to contact this person on delivery in case she moves a little bit, she might be out front or a block away. She can have contactar text this person that's gonna deliver the Boba tea. And we heard the same thing from Joe Hahn here, so I'm gonna put that next to that screen, and Anna said the same thing around the boba tea flavors that were missing. Ah, couple flavors here, and you can see the gist of this. So eventually you're hoping that you have lots of insights per screen, points of confusion, points of joy. But eventually you have, uh, what we look like here, which is a bunch of insights related to each screen. Okay, cool. So I think that covers most of the user testing. So the best way to do this and get good at this is just go practice this. Get out in the wild. Go do your user testing. I'm in the next video. I'll show you the basis of a design system. Walk you through what a design system is on. Ben, we'll take that knowledge and will apply visual design to the wire frame that we created in the second to last videos before this one. As always. Thanks for watching. And I'll see you hopefully in the next video by 11. Learn How to Create a Design Systems: that of videos that covers how to build a UX design case. Studies and user experience design one on one are the last series of videos we've covered. A lot of ground here continued with the goals personas and research and problem statements . Teoh wire frames. We make clickable prototypes and last video. I talked about how to do user testing and best practices when conducting user testing and how to synthesize your insights and patterns that you learned from user testing us well, so the next video have will be around applying visual designed to your wire frame. But before I get into that one, I want to talk a little bit around a design system and what makes up a design system. And we'll get a little bit into style guides and component libraries as well. Okay, so if you come over to u ex honey dot com, this is the website that I teach at the university, and you click on this ux to link. It will take you to a page like this. I'm stroll down to the bottom and you'll find the link here called the Design system, and go ahead and click on that link, and it will come to a page like this. Okay, cool. So designed systems really were breaking down designs for engineering. And we're also using a design system as a set of design rules, components and styles that could be adopted by other products within organization or other companies in the industry. So that's the definition of a design system. When you're designing, remember, it's good to reuse and not create one off you. I elements. So again, these air set of design rules components that could be adopted by your product or other products could be within the organization or can be within companies within the industry. So examples of that are a good example of that is Google material design. That's a really good design system that other organizations and companies within the industry use and, um, and pick up. Okay, so remember that your design decisions turn into you. I artifacts user interface artifacts that turn into living reusable design components. I'll show you some examples of livable design components, and from there, an inner an iterative design language will develop and will be used to bridge the gap from design and engineering. So you all wanna have the same vocabulary when you're talking about that, the user interface components and elements and think of it. I like to think of these components, um, and you, I elements as if you're making a cake. And let's say a cake is a piece of software. In this analogy, what makes up a cake is a series of ingredients, and you hand over that recipe of ingredients to anybody in the world, and they can make the same exact cake that you can make it your house. So think of that as a cake being a product and what makes up a product. There's a lot of you I elements and all of those you elements have visuals, designs to them and styles to them. And those styles are the recipes that make up that software. So pretty simple analogy there. Okay, so when should you use and start thinking about a design system so you condone have a design from scratch that you're starting to think about, And when you get into a design tool, you can start with designing a couple screens after you have a couple screens, designs Dunn's and you start to reuse an element. You start to copy and paste elements. You should stop at that point, and he should create a global component library that you can pull from as you designed new screens. So remember in the last videos, when in the wire frame videos of how to design a wire frame, I showed you how to create a symbol and how it made it really easy to change that symbol, color on and style on one area. And it would change throughout hundreds of screens that you got. So that's what we're talking about here. You're creating a global symbol library and think about it. This is how engineers built software, so you should mirror their process within your design tools. Well, it's the best practice to do that. Okay, so what makes up a design system? We have pretty much some elements here we can talk around, So the 1st 1 here on the left is we have the voice and the tone. So how do you want to sound? What's the tone of voice? What a success messages. What our error messages. What about marketing pages? It's one area of a design system. The other one is a brand guide. So how is your software connecting to the market? Do you have rules on colored? You have rules on Low Ghost. You have rules on Icahn's and you have rules on type. Next one is a component library is when I speak of a lot. How do you How do we not create one off you? I elements. So we have buttons and form filled Zand drop downs and models. What's your visual language? How does your visual spark emotions? What's your visual tone? What emotions do you come from your visual tone? What is the language? Definitions and whatever your visual rules So language definitions. How do you talk as a team? Talk about things that were designing here. What are your visual rules? So there's a lot to do with your brand guide as well. And then your style guy. This is the made up of you. I elements. So your color swatches, the breakdown of you. I the space consistency, the typography system. And then you have the design language, which is really the rules, um, of interaction designs. And these rules can be adaptable. So you have interaction rules. You have transition consistencies. You have usage patterns and you have designed and you y patterns. So any time you're talking around any one of these elements here, you're talking around a design system, right? So the this is all of the systematic approach of design coming together, these six elements here. So let me show you a pretty good example of, like, a style guide or a component library. So if you click here, here's the company I work for. Pivotal. You can go to, um, the style guy dot pivotal dot io. You can go to the components and you can see all the buttons they have here. Scroll down and see their buttons. Lots of room. And this is a live style guide. So if I want this, I can actually get the code. So you see this show html? I can now copy this HT. Mail it. See this react React is a visual framework as well. I can copy this code into my application. Pretty solid, huh? And we have all in the left here, all the components. So you have alerts here. Here's a bunch of alerts. I can see the code for each one yet forms here, so I could see Here's a user for here and it goes on and on and on. It's pretty good. You I system when you think about a design language like interaction, rules and transition consistencies. The one here material dot io is really solid. So Google made this and it become here. Here's their rules. I like it cause they give you good examples and bad examples, right? So, um, here's how to reveal a card and reveal more information. It just kind of grows here. It flips. So it's to, um, it's too heavy of a transition. The flip on the I Look it, That's a lot. It's cool. It's a lot where this is very gentle and nice and this is very abrupt, This flipping system here so you can go through all of these English gestures here. They tell you they have rules on this and all types of cool stuff that you can go see pretty cool here. Okay, next time I'll cover is the style guide. So this is the made up of color swatches and typography styles, and it will kind of get into some component libraries as well, too, so you can see here. It's best practice when you're studying visual design to an application. And remember this when I get to the next video, because when we apply visual design to our application that we created earlier in the past videos the Boba Tea Application, I'll talk around the action color, right? This is the color that, um, is the most important action for the user to take in each screen or each section, and this should be consistent. So if this one is our action color, it's called Cool Blue. We have what's called the hex color swatch here, and we could hand that to engineering. And they'll know exactly what color this is by this hex, um, code. Here we have the secondary action buttons. This is the secondary action. Say cancel, um, cancel button versus a action color being a like save button. So this is the secondary action we want users to do, and we have all our colors here, all named up. You have an error color. You having a success color over here? They all have names to it. So that way we can Converse is a team around these colors. So when we say arrow uh, error color. We're not just saying red. We can call it coral red. Or we can call it error color. We can also say that green Geo green. They were referring to the success color. The's graze. We can use dolphin gray. We can you stroke gray. We can use hover to weaken. Use hover blue, Hot orange, purple rain Like that one. Bar blue. Right. So these air a language we've created from color. And you can see here we have our primary colors at the top, used for most of the application secondary colors. Here at the bottom we use for other parts of the application. Okay, so now we're going to get into the typography rules. So here we have. Ah, Siris of what we call h one h twos. H threes H fours H five a one a two and so on. And what this is are these air headlines So these air H one is going to be the biggest fought? Not necessarily a headline in near you I. But the H one is the biggest font size used in the application H two s secondary on the largest foreign size used to each one. Sometimes you'll have an H two A, which is we're using regular in this case, we're using a light. In this case, H three is not as big as H two. A little bit smaller and little bit smarter than H three is H four and a little bit smaller than H. Ford's H five. And then we have a one for paragraphs. So, um, and small texts. So you have a one a two a three here should be It's a copy duplicate, so you can see here on the right. We've laid out this system. We're gonna use Roboto, open Sands robot open sands. And we have examples here when we're using them on the right as well. So you can see the examples in the application of where these live. If you want to learn mawr around typography, you can go to moments with typography. This is a website I've created. And this was a talk I did for Adobe that at a conference they put on called Adobe Max. And this goes through a whole bunch of systematic type design what's best used for paragraphs and talks about H ones and how to use an H one h two for desktop, tablet and mobile devices and best practices there sums it up. I broke down medium, the most popular Web log in the world on their type systems, and it covers a lot of ground here. I'll probably do another talk on skill share, breaking this just on typography here. But if you want a chance to go get a sneak peek of all of this, just goto moments with typography dot com. You can see here is the girl and you'll find a whole bunch of information on this. Um, so there you have it. There's this. There's some, uh, colors that reflect the style guide, and we have the typography system here, and then we'll get into more of the component library. So we have buttons. We have hover states for the buttons and we break down the types theme. The color, the clever using the hex color here. And this is a real coat. You can get into this. You can copy this. You can open up the browser here. You can see the code here if you wanted. They have a lot of forms here, so we talk around the hover States and active states of our forms. The error states check boxes and I won't get too much into the component driven design world. You can find a lot of that covered here in the pivotal material design examples. One thing I do want to talk around as you can use space as a component. So here I have these little red squares and when you have to read squares there, 30 pixels. So each one is a incremental 15 pixels and time I use my designs. I like to think through spacing as an attribute as well. So you can see this card here on the right. It has an icon and has texts, but they're all space accordingly. Like the icon from the top of this card is 60 pixels and the text here recipient targeted is 120 pixels from the bottom. And you can see how I'm using this space attributes throughout my design. Okay, so there you have it. That's pretty much the foundation, um, and the example of the design system and what a design system is. So again, thanks again for watching. And hopefully I'll see you on the next video, which will apply visual design to your wire frame. Let me give you a little sneak peek. What? That will look like I'm in Adobe X'd here. I'm gonna go to the Boba tea Design that we've done this whole time and give you a little run down. We'll take a couple of these screens And what's and visual design to them. Here's well, pretty fun stuff. All right, So little preview there. What to expect? And hopefully I'll see you in the next video and on how to apply visual designed to your wire frame, as always. Thanks again and see you soon by 12. Apply Visual Design to your Prototype: All right. Welcome back to the had Acree aux Design Case Study and user experience. Design 101 All right. So we've covered a lot of ground from the beginning of learning how to set goals to creating personas and user interview scripts and going out conducting research to synthesizing your research to how to write a problem statement. We learned some customer journey maps. We did sketching templates and frameworks. The last series of videos covered how to create a wire frame design, how to create a clickable prototype. How to take that clickable prototype and do user testing and best practices When synthesizing your user Testing insight insights. We learned on the last video how to create a design system on the basis of a design system . And now I'm gonna teach you how to take that original wire frame design and apply visual design to it. So let's talk a little bit about what is visual design. So visual design is the study of creating and positioning graphical elements for visual intent. It's a continuous study of layout, compositions, colors, typography and visual mood. It takes lots of practice to get good at that, so remember if you're starting out on learning, it takes time, so don't be too hard on yourself. Just keep practicing and exploring visual moods and treatments. Get inspiration will help you, and I'll give you a little bit of a tip here before we jump into creating visual design to your wire frame and I'll show you some methods that I use. So some tips here before you go out and do visual design is described your visual design with adjectives. It will help you learn a little bit more what the goal is of your visual design. So some adjectives you can think of is you can say I want something visual to be fun and playful but modern. And then you can take those additives and you can go look for mood boards thes air visual examples that apply to those adjectives. It's also best to create a folder to put your visual inspiration. So wherever you find things that are interesting or cool, or when you're out in the wild in your own life and you see something, take a picture of it with your camera on your phone and place it into these folders. It's also good to practice just exploring lots of different visual treatments. So let me show you a little technique of how to come up with adjectives and how to apply a mood board to some of those adjectives here. Okay, so you can think of the visual makeup at the beginning as just words like describe your mood that you want from your visual design. In this example, we have talked a little bit around something that's modern, instructor structured and credible, an aspirational. So we describe these additives we turned them into announce by doing Mood board. So here's an example of some designs that feel modern. Have a modern color palette. They're very clean. The good layout. Look at this little iPhone app over here, and this is real work. This is real work I've done for a client. Here's some examples that made it feel credible, like a bank, but really trustworthy. So there's a lot of blue in here. Blue is a trustworthy color. It's a it's a color that, uh, hospitals use and banks use very calming color. These little examples here visual elements apply to the credible. So the next thing here's some structure you can see, everything is kind of boxed out, Has grids to it. Feels very structured. You can hear cease, um, aspiration. Just the photographs. The treatments of song and sun rays. Um, some evening time shots and some sunsets. Just very inspiring. We were trying to capture that in a visual way. So where do you go to get a lot of these moods? A couple places I like to go first is I like to go to dribble. You can see here Trouble has three, uh, bees and it D r I B b B l e. And it's just a place where designers go to post cool things they've done. You can kind of do a search over here. Let's go look at some screens and you can just see many different ways to have a screen design here. Pretty interesting. You can get inspired by just looking at this type of work. It has animated gifs on it so you can see little interaction details here. Pretty interesting ways to show off and iPhone there. Let's look at this one here. Pretty cool there, and just lots and lots of things to go get inspired and to look at and help own in your visual craft. Okay, another way that I like to find mood board examples. I have an inspiration folder. So again, this is a folder that I've having my desktop on my computer, and I filled this up with any time I've ever seen something that inspiring either. It's coming from dribble me and my in the world. If I see a website anything, I just pop it into this folder and let's go through a couple of them. They're just full of different layouts and moods, even illustration styles, logos. And any time I get stuck on something, I usually tend to open up this folder first, and I just go through it and it just inspires me. And it's full of tons of beautiful examples of design. The other people did that. I wish I could do to, um, and yet it goes on and on and on and on, and, um, I started this folder believe in 2009 and it has lots and lots of information on it. Um, I'm just clicking through some of the areas right now. Uh, let's go through here. Someone's I found 2015 lots of cool, just interesting layouts and ways to do different designs. Keep going. I'll show you maybe a couple more examples here and yet could be iPhone, APS and websites and logos. And I've had applications, animated, GIFS, editorial layouts, all types of good stuff. So just best practice to just put all of your inspirational material in the folder and just develop it over time and come back to it when you get stuck on the visual design will help you just tow, get on stock and get inspired. Okay, so those are some best practices when developing your visual design. What's gonna look at the thing that we're gonna make today? So I have a video here of the final bow bitty app that we've been doing all along and again , this is a, uh, application That's been a theme through all the videos you can see here going to go ahead and order some boba tea like that regular milk tea and have the semi sweets with large tapioca. Press the add button here on the next screen, but in my address Next my credit card information in and boom. Here I am. And there's Bobo coming to me five minutes. Two minutes on. Yeah, I get Boba tea. So really need. So we're gonna learn how to take your wire frame, and we're gonna learn how to apply visual design in a way that would look like this will be even, maybe have some fun and will use a different color besides the pink. Maybe we go use some blue here. So without further ado, let's go ahead and open up Adobe X'd. And you could see this was that wire frame that we built out in the last video. So if you want to learn more around building out this wire frame and how to make the prototype here that you see, you can go back to the video. You can learn how to make this design, learn some of the prototyping techniques here, so you can do what I'm doing right now. I'm gonna have this all wire framed up in prototypes, but let's go look at taking a screen here and applying some visual design to it. So the first thing I'm gonna do here's I'm gonna go ahead and start with a side by side of this intro screen and we're gonna apply some color to it. I'm gonna keep the black background. I'm gonna keep the tax a little bit here. Uh, I'm gonna keep it white, but I'm gonna pull it back a little bit. Little bit transparency on it. That looks nice, but I think that I'm gonna do here, is I'm gonna go ahead and put a line at the top. Just has a visual style. I'll make this line. Why? I don't want to strong, though. So here's a key thing when you're doing some visual design. Work is you usually want your communication to be the strongest point on the page. That's what your design is to do. It's to serve visual intentions and visual communication. So see, right now have the Texas A little gray. And this line here's is white and it's stronger than the text. We don't want that in the hierarchy realm of our visual. So I'm gonna push back capacity of these lines just so you can barely see it nice. Looks good. Okay. So I'm gonna go ahead and push back. Maybe this loading boba as well. I think the text size is fine on it. I'm gonna push this back as well. Cool. And I have this icon of a boba tea, but I have it here in Illustrator. So I'm gonna open up, illustrator and go to my assets. And you can see I have all the assets here to make up this Boba tea design. Even this one here, the Boba tea itself. So what I'm gonna do is I'm gonna place this boba tea over black an illustrator, and I'm going to start making it white first so you can see it white that I'm gonna add the color. And I know in them in the example that I showed you, we used pink Let's let's have some fun, but use balloon and I'm gonna make the straw. Blew a swell. We'll change it up a little bit. Nice. Okay, so now I have that in my illustrator. I'm gonna go ahead and go back to O P a adobe x t Before I do that, I'm gonna copy this probity. I'm gonna go Teoh X'd animal of place This boba tea on the screen. That looks pretty fun. It's downsize it a little bit. Cool. All right. Cool. It looks pretty good. So the next thing I'm gonna do here is we're gonna go to this form page here after the loading screen, and we're gonna come over to this one here that says the Boba a copy of this screen. Me Delete some of this here, keep this in view, and I'm gonna go ahead and make this a dark background first so I can make the Phil here on the right Make this real dark just like that. And I'm gonna grab this text here. The last name. I'm gonna make that text. Let's make that white. And let's make the text that I'm actually adding here to make this the blue text. I like that color. Someone add that color into my this watch palette. I'm gonna just keep going through here making these changes. Let's go ahead and make that blue. Same with the email here. And make this white and, uh, go ahead and grab my email. Make that blue same with password and make this white. Go ahead and make this thing this one Here, make this blue. Okay. And there's a couple lines here, so let me grab all these lines on. Let me make this these lines. White and I have a very light capacity on it so you can see their white like that. But that's too strong. I want to highlight that visual communication here. Okay? And I had an old logo, um, here at the top for I do that. Let me just put the call to action text here. Since the Texas telling me what to do, I have this log in. I'm gonna go ahead and make the log in blue, and I want to make this sign up hair blue as well. We're getting there. Let me go grab the old logo from Illustrator. So I'm gonna go over to illustrator here, and I have this logo gonna copy it over, paste it into the black. Yes, I can reverse some of this. I'm gonna make the text white there, and I'm gonna make talk bubble white, and I'm gonna make the me text black. Copy this over. I'm gonna paste this logo. Yeah, looks good. Looks like, uh, shouldn't be touching the thought bubble and me. And look, I could make changes right into Adobe X'd just nice. Let's go grab this logo. Let's go. Put it back in the loading screen. How about that? And go explore a little bit. We talked about earlier. It's all about exploring things. Yeah, let's go do that. Like that. Looks nice. And let's have some A little bit of fun with logo. Here. Let's make this, uh, let's make this one color here more, uh, kind of a peak. Yeah, that's kinda cool by a little bit more official designed this screen here just for fun. Sees we're gonna grab this pink here. I'm gonna make it a color palette. Add that to my color palette here. So, no, I have pink on the right. The select the loading techs make that passively on it. Yeah. There you go. That looks fun. I'm liking where this is going. What about you? Cool. All right. And let's actually put the let's try something. Let's put the boba tea down here in the cup here. It looks cool. All right. So what we got going on here is, um, have a couple things were using the color blue, and we have blue for the forms. And, uh, we have blue for the buttons, and we have the blue for the sign up, but Let's make one strong action color for things that you can click on. Let's go make these pink. We're gonna keep this thing throughout the designs that we're doing, we want one action color to represent all of the things that you can click on. We're not all of them, but most of things that you can click on the primary actions per screen. Let's go the next screen here, which is the big screen. This is where you have all of the makeup of the home page of the bow Bitsy application. And just like I did with the log in the sign up page, I'm gonna copy it over here, and I'm gonna show you a little bit of how to build this up. Okay, so I'm gonna delete some of these elements here. They were gonna kind of start from scratch. See this little dotted line here? This indicates the below the fold. This is the content you won't be able to see when you load this up on a screen so I can go over here to the top, right where it says play. I can look at this prototype and you can see I can see the tab are here. It's in view. But if I move it below the fold, see how it goes away on the viewer and the left here. So that's what that little dotted line is indicating to me. So let's go ahead and start by building. A little bit of this Boba tea application tab are out here so you can see I'm gonna delete these icons and I'll go get him from illustrator just to rebuild this out. And I have the black bar. Here is just a black rectangle and over here in the top, right, If you see where my mouse is pointing it says fixed position when scrolling watch what happens when I don't have that checked and I go to press play, which I can view the mock and take a look when I scroll, this black bar moves up. I don't want that. I want that fixed. So I'm gonna go ahead and I'm gonna press the check box here. Fixed position when strolling, press play and look, it stays on the bottom when I'm tapping or swiping or scrolling down. Okay, let's go back to Illustrator. I'm gonna grab this little icon here. The Boba Tea icon with some color in it. I'm gonna go back to the X D application when I paste it. Copy the wrong thing. Go back over here. Let me just grab the Boba tea icon and I'm gonna paste it. Here. We get rid of the viewer, paste it right in the center of this bar. Here. You can see it helps sky. The guides help me know if it's centered. All right, It looks good. Let's go over to my illustrator file Is there were all my icons that I need live? Let's go grab this little profile icon. I'm gonna make it white and illustrator. I'm gonna copy it. Come over to X D. I'm gonna placed it. Shrink it down a bit. All right. I'm gonna go ahead and group itself. Makes it easy to select grouped. Downsize it a little bit. Place it over here. Let me go. Grab the other icon and illustrator here. I'm gonna go grab the shopping cart, place it over in the back black Here, make it white. See it Go back to X d. I'm gonna place it here on the tab. Are mixtures kind of in same size position relative to all the other elements. Center it out visually and now what screen were building is the home screen. It's the Boba tea icon screen. So when you're not on that screen, I'm gonna ghost these sections out a little bit. I'm gonna do the opacity at about 50. 45% should be fine, okay? And let's go ahead and make sure these have the fixed element. So I'm gonna grab them and check the box here on fist fixed position. When scrolling I'm in a group, it command G to make sure that it's groups. You can also do it by doing group here. Right clicking and doing group. Let's just preview that really quick. Make sure that it stays on the bottom. It doesn't Let's go see what happened. I think it removed it when I grouped. It's let's do it one more time. Fixed position when scrolling What's preview it and it stays on the bottom. Nice. Okay. For the sake of time, I have these photos and the example that I showed you. I have them in photo so you can see I'm gonna go into the high fidelity. Um prototype I've already built out that's using pink or having a little more phone, the one we're building. We're gonna use blue here, and I'm just gonna grab these photos just so we have him here, place him out to the side. All right, So first thing we want to you, here's what's go grab. Um, the this is going to the other art board here. So we move this over just for now. Here's the photos. Great. Let's go put this regular Boba Tea one here and you can see I have the text here. Let's just go Copy this over on. That looks about right. Looks pretty good. Let's add a little color style to this black. So whenever I use graze, I like to do a little bit more of of Ah, bluish gray wasn't blew into Your grace. Always helps a little bit. All right, That looks nice. Okay, lets go. Apply this ad button over here, and that looks a little good. It's a little strong, so I wonder if we even need this square. Maybe we just do the tax there. It will make this a little bit bigger here, Seiken, go to the text area on Adobe X'd. Let's go. Maybe 25 was 2 27 font size. Okay, what's my so big and nice? Okay, cool. Let's have the next one in. Gonna add the next photo here when you use the same text just for the sake of time. Copy this over. Um, one thing I would do is push this to the top. So see, where says bring to front. I'm gonna bring that to the front, and I'm gonna copy it and move it down here. Just like so. That's good. Move these at buttons a little bit down there. Okay, let's put the next photo in, and we want this below the tab are so when everything scrolling below the tab bar and again , I'm gonna copy the overlay. Here, put it on that one. And now it's got put the try milk tea over here. Hopefully you're getting hungry or you're getting thirsty for some Boba tea. I'm gonna make sure that this elements here is on the top. So bring to front, bring it down, tool. Okay. And now I'm gonna grab this tab are Make sure that it's on the front of everything. I still have a little bit of space here to have some fun. We want to show to the viewer that we're gonna have some more tea is coming in. Were no. Have all the flavors that we could have right now, Someone to do a little black section here. I'm gonna bring it to the back, and it's like a little bit of bluish black here. So kind of going back to our being there some blue. You know, I had an icon over here that I like. Yeah. There you go. Let's go grab this one here. What's paste it right in the center? Here. I see this more flavors. This is Copy that. Let's make this more flavors. Um, let's just make this blue and let's make this one keep this white. So we're using mostly this pink color here for action color. So let's not do anything. Pink ears. Keep this blue. Okay? I'm gonna push everything back here. Control shift, left bracket. Or, um uh, if you're on a PC, that is control shift left bracket. If you're on a Mac, it's command shift left bracket. But I'm also going to do it the other way. send back here and let's go ahead and look at this design now. So I'm gonna go over to the preview section of Ecstasy and see the video and look, it's nice and scroll through my boba tea here. I got some flavors coming. Soon it looks a little too tight to the top bar. Let's go back over here. Close up the preview viewer. Let's move this art board down a bit. Give this some more room and grab. That's more flavors and Boba tea here. Center it in space and go ahead and go back to the preview mode. Next room on the right art board and great previewing. Nice. Looks like a nice visual so far. Cool. Let's go build out the page That shows what happens when I press the add button here. So at this point, let's go look at that page in the wire frame section. So it looks something like this. I'm gonna go ahead and again copy it. So that way we can apply the visual design next to it, so you can see. Okay, So in this new screen, what I'm gonna do is get rid of the old photo that I have here, and I grab this new photo a probity, and I'm gonna make a rectangle over the top. So just make this rectangle here. Just where I could see a little bit of that Boba tea based off this line here on the next art. Bored. I'm going to select the both of these elements. I'm gonna come up to the top right here, and I'm gonna do the Intersect area. It's the little two squares that intersect and boom. I can crop that Boba tea that I can send it down a little bit. Great. Send it to that. Back of the page now. Looks good. Had removed the white, uh um, X mark There, I'll go get a color one that we could use. Okay, so let's go back to our initial thinking here, which was, um, that the areas that are clickable are areas that we will make that that pink color. So let's go to make all these little rectangles pink just to indicate that these air the clickable areas, um, this little white is kind of strong here, So let's go back and make. I'm just the white outline here. The square. Let's make that, um, make that 30%. I'm gonna grab the other one here is Well, make that 30% moving a little bit down. Well, when you can see they're overlapping. So we don't want to do opacity there. We actually want to make it great. Let's go find a a nice grade that we can use that has a little bit of blue in it, A little bit stronger. Here we go. Let's grab that. I'm gonna go ahead and make that a color swatch so I can easily redo that color is Well, this, like the next grade. Make that. And now we're highlighting the country, which is the milk, the regular tea and with ice. All right, that looks good. In the other design that I showed you, we had these buttons here. They were outlines. So let's go ahead and make thes outlines. They look like they're filled right now, like they're active states. So I'm gonna click into this and remove the field, and you can see I have it as a symbol. So they're all going to do the same thing that I want them to do. Just great. I taught you how to do symbols in the wire framing video. So if you're curious around how to make a symbol can go watch that video. But I have a symbol library here on the left of all the buttons and everything that I've created in this design, So I'm gonna make the stroke a little bigger. I'm gonna make it to see what two looks like. Great. And see this Boba Tapioca text. What's make it white? Highlight that content. Great. Okay. And you can see it's changing on the screen next to it. This because I have all of these as a symbol which makes symbols great, is watch all three of these add buttons. They change color as I change them in real time that that's what a symbol does. So it's really, really handy to do symbols here. So let's go ahead and remove some of the add button here that I have. Let's go grab it is sign up. But let's keep it pretty simple here on a pace to sign up. But before I do that, I'm gonna make a symbol. I'll show you really quick how to make a symbol of this sign. Just add the plus button here to symbol. Let me just grab the texts, and I'm gonna call it the primary button here on the left. Whenever I want to use it, I can just drag it out to the screen. So let's go ahead and go back to the screen that were designing here. I'm gonna grab a symbol, place it onto this art board here. I'm gonna put text by this sign up here. Yeah, that looks good. Okay, so we have a close icon here, let me go. Grab the icon that I have an illustrator first, So I have it in black over here. I'm gonna go back to Adobe X'd Gonna place it. Looks kind of big right now. Let's shrink that down. Let's make this a pincus. Well, and now you can see on this page everything that is tap herbal is pink and some using the primary most brightest color to indicate to the user what is tap herbal and what's not capable. That's a key aspect. When doing user interface design, use your primary color, use a bright color, make it strong, and those of the primary actions that you want to do for your user. So I'm gonna go ahead and delete the screen next to it. We forgot this text here. Let's go ahead and make this text black. Cool. It's pretty good. Okay, So I'm gonna delete to this page here, and I'm gonna make another button for the filled state of this tapioca. So let's say the user taps on this tacky tapioca here. What I'm gonna do is first detach it from the symbols because I don't want to change all the symbols and I'm gonna select just the background. I'm gonna feel it, but I'm gonna fill it with the people. Cool. Looks good. So it's almost like the user had tapped this, but all right, so we're getting along here so you can see how we've created a pretty unique, form filled page here with Sign up. Um, we've created the home page here and at styles to our photographs and overlays a tab bar. Um, I showed you an illustrator. It's best toe. Have all of your icons in one area. If I even want to copy all of these icons here, and I can place them in tow, X d over in just a dartboard. Here so I could take him up. They come in Vector. I can change the colors if I want to see change that arrow. Um, and let's keep going along here. I'll do one more for you. Is this map screen? I think this map screen is really cool. Let's go into the screen what's at some love here. So, um, again, the strongest communication at this point is that we have the image of the map, but it's also the estimated time of arrival. Let's go ahead and grab a gray for my name here and cool. I know my name. I don't need to be reminded of my name and we'll keep this text white. Such real strong. I have the map image here. So if I go to, um, my Dobie X'd here or my right my illustrator, I have my map file here. I can copy and paste. It can go right into Adobe X'd paste it into my screen here just like I've done here. And let's go add some cooled color designs to this line here. So I'm gonna bump capacity up and I'm gonna make it blue. Yeah, let's go ahead and bring this uh, but but icon up a little bit, We'll keep it white. Let's go grab our boba tea. I con from the top here, But I'm gonna add a couple things in these boba teas here. These little both sections. I'm gonna make these people to have some fun. It's kind of small. We could probably let's make the strong light blue like that. Have some fun with this one. Okay, I'm gonna grab it. Going to come back, go back over to my mock here, and I'm gonna get rid of the poverty that I have in the center. Here, paste. This one in. This one's a little cooler. All right. Place that there. They want to blow this up a little bit. Yeah. There you go. Cool. And let's go make this icon the little map icon Blue. And the thing that's stoppable on the screen is the cancel case. I need to cancel it. And only the cancel white. Well, it's ghost it back with a little bit of gray here, and Yeah, There you go. That looks good. All right, let's go take a look at the final again on DSO. I have the other final visual design, uh, planned out over here, and you can see I have all the screens design real pretty. I have all of the buttons set as symbols. Let's say I change this next button to another color like the blue look. What happens all of the next buttons changed blue. That's pretty nice to have the ad buttons always symbols to. So if I change one, add button to another color. Let's say yellow. They all go yellow. Same with this tapioca. So if I change one of the borders Teoh say orange, you can see they all change orange. Same with the X. I changed the X Teoh. Let's say blue, see how they all go blue. Any color I really want here they're all symbols. Makes it very easy for me to work. Let's go take a look at the prototype here. So in the last video I covered how to design a prototypes. They can learn a little bit of the things that I'm showing you at this point. And here is the final screen and final design, and I can go ahead and make my first name and last name and password signed up craps in Boba Tea or Regular Sweet Now I want semi sweet. I got semi sweet here we can do the large tapioca press ad and I see the notification on my shopping cart. Go back. Looks like I'm good with my Boba tea press. Next put my address in Go put my credit card details in about being about a boom and I got Boba tea on delivery. No, I want moment. One thing you could place you can go to. I talked about this website on the How to build a wire frame video is you can go to a site called the Noun Project you see here and watch this. I can get any icon I want. Let's just say ice cream type in some ice cream. Our center watch what happens? I get a whole bunch of ice cream icons, so let's go grab one of these icons here. Which one do you want to get? Let's grab this one. This is a nice one. Get this icon basic download. No, I didn't do from my website SVG. That's called scalable vector graphics, and I can take that. Drag it into illustrator. I have this icon and I can change the colors of it a little bit. So let's say I want to make this icon blue. I can make it blue. Copy it and I can paste it into Adobe X'd just like so not guys cream cons as well. Pretty cool stuff, right? So I hope you learn a little bit about visual design again. It takes lots of practice, so just go practice it. It's okay if your designs don't look like mine. It takes a lot of time. Teoh. Get to certain points where you can apply very simple visual design craft, but hopefully this is a good starting guide for you. All right, so let's go ahead and look at the next series of videos here. So join me for the next video, which I'll talk a little bit around what makes a good design resume so you can take some of this visual craft that you're learning. You can go see what are good. Design resumes out in the wild. I'll give you best examples and also give you examples that aren't that good and hopefully give you a little guideline of what to do when you're creating a design resume. As always. Thanks for watching. I hope you learned something and goodbye 13. Do's and Don't's with Design Resumes: all right. Looks like we finished up a lot of the classes again. We've done goals and personas and interview scripts. Research had a synthesizer research writing problem statements, breakdown of a customer journey map sketching, wire frame in clickable prototypes, user testing basis of design system and applying designed to your wire free Cool. So let's go look at best practices when it comes to your design resume and what I have to show you. Here is what I've made for the recruiting team at my company, and I have created this for them so they can see what a good design resume looks like. And when a not so good design resume, it looks like. So let's go over and take a look, so this helps me find a good designer. I have an evaluation system that I use, and if you scroll down a little bit here, really, I have a list of questions that should help me evaluate a resume before I go to the next step, which is look at a designer's portfolio that I look at a case study. Hopefully, they have a couple of case studies, then it leads to a phone call that phone call leads to an all day interview with the team and myself. And then we make a judgment on the all day interview, and hopefully that designer gets to join our team and we get a work together. So let's go through the list of things that your resume should have to ensure that it's a well crafted resume. So, first off, does the text field have alignment? And are they not all over the place? That's a case you can check. This box is the spacing consistent between paragraphs and titles. Check that box. The layout and typography looks custom, and it doesn't look like it was made in Microsoft Word again. You should be using custom design tools here. Black is not the only color being used. There is more than one size of font. There is no misspellings of words, and it reads good. There was talk about user centered design, design, thinking, research and testing. There was talk about collaborations with other team and product managers and clients, and there's a link to a portfolio to go see the rest of the work. Okay, now, let's go look at examples. Okay, here's a good example by Franklin Sham Heart. And here's some examples on the right on DSA call outs of why it's a good resume. So it looks custom and it has nice layouts. Clean has consistent spacing. It's not all over the place. It has a nice typography hierarchy. Spelling looks good, has nice alignment. Uses more than one column grit has linked to portfolio. Could see his portfolio link right there. Let's go take a look at it. Another good example. Here's one from of the Evelyn. It's self branded. It's nice and easy to read layout. There's good use of type. I type type hierarchy has nice alignment. Clean spacing that looks really organized. Okay, let's go look at what a not good design resume looks like. So why is this one not so good? The layout is not clean, and it's hard to read a lot going on. The spacing is inconsistent. They're sloppy typography hierarchy. The alignment could be better. You can see things are often line with the bullets, and it uses a one column. Greatness is one giant grid. Look at another one. That's not so good. Why is this one? It looks like it was made in Microsoft Word. And on a design tool, Black is the only color being used. The type higher hierarchy is not that good a little better than the last one. But still not that good. Spacing is inconsistent. See lots of weird spacing in between here, the layout doesn't seem custom. Let's go look at more good examples here. What's more, good examples. Very clean and see the two column grid here the right column and like they're still using black for all the text. But they're typography. Treatment is really nice here. One of the left, Olivia's same with Bailey over here, using all Black, but it's a lot more cleaner until they took time in their design and typography layout. This one that says How Low has a nice introduction of personality. It's one Jane Doe. It's a template is nice. It's a nice clean layout. Same with this one here. This one's really nice here by Justin. Here's an interesting one. Here's one by Molina. Nice and fun. Good use of colors are like that orangey ran ish color with the teal blue. And here's one by a friend of mine named John John O Bayer and really solid resume here a lot of time crafting this. Okay, let's go look at some more. Not so good examples. See, we just have layout colors or a little bit weird. This red and blue seemed to vibrate a little bit in the color palette. This Mary Cunningham kind of all over not really could use a little bit more hierarchy. It's not that bad, though. This one over here in the teal text spacing is kind of inconsistent all over. Hard to read, alignment, typography, hierarchy. It's this template here, just one giant column right there You have it. So there is the basis of a lot of good examples of really good crafted resumes and not so good crafted resumes. Hopefully, that will give you a little bit of a guideline. Okay, as always, thanks again. And if you want to go check out the last video of the Siri's, which is the case study, I'll give you the outline. I'll show you examples of case studies, and that way you can have a good view of the U X process law. The methods we use, how toe craft a good design resume and what a good case study looks like. All right, Hopefully, I'll see you there by 14. The UX Design Case Study Outline: All right. Welcome to how to build a UX design case. Study and user experience. Design one on one classes. Cool. We're a class 13. This is the case study outline class. Hopefully, you've watched all the videos from the very beginning how to set goals and do personas and then create user interview scripts, conduct research. Synthesize your findings. Right. A problem statement. Create a customer journey map. Do sketches make a wire frame, make a clickable prototype. Do user testing. With that prototype, there has synthesizer insights from testing the basis of a design system how to apply visual design to your wire frame. And last video. Here was best practices when it came to designing your resume. And now we'll go look at the case study outlines. So this outlines what what you need to do to make a really, really good case study and all of the tools and techniques that you learned in the past videos or how to create all the content that you need for that case study. And then what you're gonna do is you're gonna create a visual story. That is what the case study is. It's an outline of a story of doing user experience work. So let's just go right into it. Let me go open up the website. Uh, we're gonna start here with you, ex honey, and it's ux honey dot com. This is the site that I teach at the university. And if you click on the u X two here, it will take you to all of the methods that we teach. I teach over at the university and we'll hit this. The case study outline and will hit the view button over here as come and take us to the outline of a good case study. Then I'm going to show you a whole bunch of examples. As you can see over here, I have one example called Nick Presses the site I did for Barnes and Noble. How to create a book a couple years ago and another case study for a what's called a Sufi cooker for a company called Nova. So I'll show you the examples of what this looks like. But first, let's just go through the outline summer to say that chapters of what makes a good case study and then I'll show you how that looks visually so just like you saw in the last two case study examples. I just showed you the very top. The first thing you want to do is you want to show the wow This is the fight. Like a screen of the final product. The most beautiful screen that you have that can be interactive. It could be a video, but showed the product show the final product here. But what you want to do is not end with the final product. You want to tell a story of how you got to that final product. So then I scroll down. The next thing here is you want to give some context, give the product, name the company mission, show the logo, show your role in this and you can make it visual user design craft to make it visual. Then show the how talk a little bit about your process. Or you can call it the chapters of the user experience work that you did like research. And then you went and did some problem validation and you sketched some ideas. You prototype some ideas user tested. You dialed up the fidelity that designed went visual and you can call the those chapters, you can show it visually, you can show your process. I remember in the beginning of the videos, we talked about business goals and product goals. This is where you show him. Show the business, Cole. Show the product goals, Then talk about the problem that you're solving and why. So you can show a little bit of the problem statement. Sometimes this is the invalidated problem, and then you go learn a bunch of research and do a validated problem. But you can talk it a little bit about the problem in the mission you're on. Okay, next thing you want to do is introduce your users show the personas that we talked about earlier. You can even show pictures of the users if you want to remember the highlight. Their problems highlight their current behaviours. We can show the little quote bubble that I taught you in the Persona video, and we talked about the learning goals in the usability script so you can talk a little bit about what you plan on learning. When you go out and do your research, you can show the script that you made. You can show a couple of questions that you have that pertain to the learning goals and then go kick off your research. So show photos of you conducting research. These are pictures of you talking to people out on the streets or the bus or in your office or wherever you're interviewing people that show you. Show yourself with those people. Show those people with you and take lots of pictures and put lots of pictures during this area. The case study. Remember I showed you how to take the sticky notes and do your research synthesis. And also look for patterns. Distribute pictures of those sticky notes. There should be insights here typed up that I can read. There should be patterns that you're calling out in this section of what you're learning. Show the validations. What kind of problems did you validate? One of the things did you learn from your personas? Then you can go show that customer journey map. You can do the current state of the future state. In this case, you can do the suit, the solution that were modeling in the customer journey. Then you can show your sketches your solution concepts. If you have any storyboards paper prototypes. They show the wire frame designed, show the screens, then show the user testing. So these are the pictures of you going out and there should be users with your designs in their hands and they're using it. You should have pictures of that. You can show quotes along the way and then show the synthesis These air the patterns per screen. What did you learn from user testing? This is the area to call that out. You can still put user quotes. Here is Well, these are your validations. These air your learnings that can map two screens. Show the design system so you can show a little bit about your visual design process. Your mood board. It can show all of your buttons. Show your form, fields, show your fidelity and your final design here. So this is the end part. This is where you show your final prototype All the visual craft that you've done The high fidelity mock ups show the work flows. If you want to give me a link that I can click on to go check out the prototype that you made And this is the final that makes up pretty much most of the different chapters of your case study or the story that you're telling about the user experience work that you did. Let's go look at a couple of examples of this. So if I go back to the user to ux honey dot com a. Have a link here called the case study example. By Click it, it will go over to the new press site. This is a bookmaking application that I did for Barnes and Noble couple years ago, and it goes through most of what that same outline that I spoke up. It starts with a little bit of about the company and the mission and my role. We start with a little kick off meeting here where we define the goals. So we're showing the product goals, the business goals here. I'm highlighting the problem. I'm showing a little bit of the process that we went through. I'm introducing the personas in this case. I've made him more fun and illustrative. I'm calling out their behaviors there, needs their goals, their pains. Here's another persona, and I have my learning goals or my assumptions here that I want to learn about. And here's the learning girls that pertained to each person that I want to learn about and some questions that I have for them. And then I kick off research. Here's me talking to people we did remote interviewing. We did on site interviewing with folks what the people's houses and talk to them. And here's some of the quotes that they have. These are the things we learned about them. Here's our synthesis, all the sticky notes, all the insights coming together. We themed them into topics here, patterns that we found along the way. Here's our learnings and finding. Here's what we were right about. Here is what we were wrong about. Here's some interesting new learnings. We made some decisions from those learnings here of what we're gonna do and what we're going to solve. We decided not to focus on one of the personas because the problem for them wasn't so compelling. So our mission was to go ahead and create a bookmaking experience that makes it easy enough for average crafters to be able to provide to make a book up online and, uh, turn that book into a physical book and have it shipped to them So they start with a digital book, and the platform they're gonna use will allow them to upload their interior, design their interior of their book the front and back cover designs, and then have that digital book made into a physical book, and they can ship it to their house. So we wanted to provide clear steps and helpful support during the error moments of the creation of this solution, and we want to guide the user as well. Hopefully they were airing, so we all got together. We sketch concepts. We made a wire frame design, tested some concepts and some wire frames, remodeled it out. Here's how to preview the wire frame if you want to. We had questions and assumptions per screen that we wanted to learn about that. I'm showing you here. When we did, our user testing were not tested with a bunch of people. We had our learnings based off the testing. We made decisions based off the testing of what we learned about. Then we dialed up the fidelity of the design. You need to see a couple screens here and how we solve this complex process. Some of the error cases that could happen here. And we did some marketing pages and then check it out. Aiken, take a link. I can walk over to the actual website. Are the clickable prototype here? So we have the marketing page here that we made. Let's get right into the product. This is the final visual designs. So first is gonna ask me in my interior book what kind of print? What I like. I want full color printing. Sounds good. I would like to have a paper back cover. I would like to have white pages trim size seven by 10 and it's gonna be about 0 to 50 pages. Here. Go ahead and call this Leslie's book. This is just the project name that I have here. I have ah, calculator calculates is gonna cost about $29 per book. I can make different changes and see the price change on the fly as I make changes. Looks pretty good. Let's go ahead and continue. It's gonna have me create an account, someone to create an account. And here's where it's asking. Toe upload the interior of my book. I can hover over the side here. This is how we covered the air cases and I could see learn about margins and images and embedded fonts and what trim would look like. I can upload my pdf. You can see it's uploading. What say I had an error. When it does, it takes me back in the highlights. The error here Pretty interesting there. So let's go back and upload my book. Let's go the success route. Now I can preview the interior of my book. Everything looks good now. I can go to the cover part of this design and it's the same hovering. I can see where my interior of the cover would look like. The margins, my images would do well, where they're gonna get cropped at. How did in bed? Fonts and I have blowed the cover here number to go to the back cover. I can hover on the left here to get the same information you can see. We put a barcode here, upload the back. Now I can do my spying. This is the midsection. And look, Here's my book with the barcode and everything. Here's my book cover Looks pretty good. And then I could get into payment here, put my shipping details. Put my payment details here, man. I can purchase it and Well, I There it is. There's the final product there. That's one case study example that clicks over to the final product. Let me show you another one that's called a nova. This is a Sufi cooker. Sufi cooker is a device that cooks your meat and vegetables and fish in water. You actually put this stuff into a You put your piece of meat into a ziplock bag and this device will cook will heat the water temperature up just enough to cook the meat over maybe an hour or two, and it makes for some of the best meat that you've ever had. So what we built was a device that cook that connects to this cooker here, and there was assumptions that we learned along the way. But look at the the going back to the outline of the case study. We have our wow shot here. We talk about the role a little bit about the application, but we got the business goals and my role, and we talk about this little scenario around scheduling a cook that we wanted to learn about this was too. Um, place your meat into a bag, put it into this device. You would goto work, and you would schedule this device to turn on maybe about five or six hours after your you went toe work. Um, it will cook your meat for you, and you would come home, and this would be ready cooked for you to eat. Sounds pretty sweet, huh? But we learned a lot during research that invalidated this. We actually didn't go with this solution at the end because we learned a lot. Um, So, overall, here's all of us. The team getting together. Uh, we're gonna introduce the personas now so little bit about each persona. We'll talk about the learning goals that we wanted to learn about. And we went out and looked that doing some research and some testing of the initial assumption that we went out to learn about. We used a customer emotional journey map that I showed a video of in the past Siris of how to do this. The outline. During what process was this weird or confusing for somebody or where they're hesitant. So you can see here there's areas this process where people were confused. Here's what we learned. We learned a lot about this application. We change directions here and based off some of the quotes here is pretty interesting or read one out loud. Um, one person said, I'm gone for 10 hours. And are you sure that ice will keep the meat fresh all day? And I won't get sick if I eat this meat? Um, it's a lot of people were hesitant to do this schedule cook. So we eventually decided to pivot, do a little bit something different, which is just a nice on boarding experience to the application and a way that you could learn about what types of meat that you're cooking and what types of time you can set this device to cook that meat. And a lot of people were asking about that. They're asking us how long it takes to cook a steak versus a piece of chicken versus a piece of salmon. So we decided to pick you back off that So we have a little bit of a customer journey map here or service blueprint map here that outlines the future state of our solution. We did some sketching here. We built a wire frame. You can see some of the wire frame designs. We went out and did some usability testing here with folks. Um, we did some synthesis. Here's what we learned. And then we did more iterations, and we collab more together. And here's the final lap, so I'll sit back and you can take a look. It's gonna connect to Bluetooth to connect your phone to the application with Bluetooth. It's loading to Bluetooth. You'll see here it's gonna be success success, and I go to the home scream of the APP. I can start a cook immediately. Your I can go to the cook guide, so I click on the cook guide. I Let's say here I wanna cook a piece of steak psycho to the steak and let's say here I wanted you rib eye. So I click on a rib eye, and here I have the ability to set the time and temperature based off the doneness. I want this thing well done and look, I pressed the start cook button and boom! It starts that Sufi cooker up in your cooking meat. That's pretty much it. So I showed the while at the beginning of this case study, and I showed the end experience of the end of that case study. Right? So those are all examples of good case studies. If you want to find this one, it's at my website at Aaron Lawrence design dot com. I'll go to the home page here so you can see a little bit of it. Enter the site and here I am. And so you can find these case studies here in this website Aaron Lawrence design dot com. You can also just Google me Lawrence designer and you'll find this website as well. Okay, so that's been quite the journey. Um, we've had 13 classes here, and here's the final case study. Hopefully, this gives you a little bit of an outline of how to take all the work that you've done here and put it into a nice story that outlines your user experience, design, work and again, as always, thank you for watching my classes. I really appreciate you sticking it through. If you watched all 13 videos. That is really great. Really awesome. I applaud you. Thank you so much. I hope you've learned a lot, and hopefully I'll get somewhere. Videos going here soon. And, um, we'll give you some more content again. As always. Thank you so much and goodbye.