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

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Aaron Lawrence, UX Instructor & Product Designer in SF

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (4h 3m)
    • 1. Class Introduction

    • 2. Set Goals for your UX Design Decisions

    • 3. Create a UX Design Persona

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

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

    • 6. Create a Customer Journey Map

    • 7. Sketching Concepts and UI Sketching Frameworks

    • 8. Create A Wireframe Design with Adobe XD

    • 9. Create a Clickable Prototype with Adobe XD

    • 10. Create a User Testing Script & User Testing Best Practices

    • 11. Learn How to Create a Design Systems

    • 12. Do's and Don'ts with Design Resumes

    • 13. The UX Design Case Study Outline

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

Community Generated

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





About This Class

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

Meet Your Teacher

Teacher Profile Image

Aaron Lawrence

UX Instructor & Product Designer in SF


Hello, I'm Aaron. I'm a principle UX designer at a company called Pivotal and UX instructor at the Academy of Art University in San Francisco.

I've been doing design for 13 years and yes, you should take my class, whether you're a beginner or want to pick up some advanced techniques, this class will guide you through the UX design process and we'll stop and deep dive into many tools, best practices & design methods.  I've spent countless hours creating easy to understand content & documents that you can download and use that go along with the video topics. A lot of this content is what I teach at the university level and available to you.

My bliss mode is designing and making things for people to use. I practice lean and agile methodologies, alongside u... See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Class Introduction: Hey, welcome. Thanks for checking out my class. My name is Aaron lords 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. So I work most of the time. I've been doing designed professionally for 13 years. And I also teach advanced UX design at the Academy of Art University in San Francisco, about three blocks away from the office that I'm at right now. I'm very passionate about design, and I want to share my passion with you in the next series of videos. And what makes these videos unique is this is the same curriculum class, the 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 up, check it out. All right, so what is UX? 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 experiences exactly what it says. You're designing things for people to use. Such really important to know. And 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 as well. So what's the difference between the common UX and term and UI terminology? So I like the analogy which is a cookie. So user interface design in the analogy of a cookie is the actual cookie itself. It's how it looks. It looks chewy, looks chocolaty. It's not neon green and it doesn't look like it's going to get you sick. The first thing you're gonna do is you're going to 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 act of learning how it was. That's UX. 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 UX and UI. So what is successful UX? Successful user experience design is connecting business goals to customer motivations and create an solute 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. So what we're gonna do is we're gonna do user experience design 101. And overall, this is the same curriculum and class that I teach at the university level. The outcome of it is a case study. So what you're going to 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 wireframe design, how to create a clickable prototype. Do user testing, the basis of design systems, how to apply visual design to your wireframe and best practices when it comes to design resumes. Alright, so let's go take a look at all the class material that we're going to cover in the next round of videos. So I'm going to close out my preview and I'm going to come to the case study. So I'll give you the case study example, the n. And I'm going to quickly run through all of the material that we're going to share and 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 going to cover over here is we're going to come to the kickoff meeting. This is where you go through all of the goals. And the goals that we'll cover will be the business goals. I'll talk about that. The product goals, the users and their goals, the stake holders. These are people that have a stake in your project. These are the clients you should know about them. He's the people you do design reviews with and the risk that you may face and how to mitigate those risks. Okay, the next thing we will cover is we're going to go look at the framework to create a persona. And the persona looks like this. And we'll learn ri, persona's are important, the crossed 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 as well. So you get to download some of these templates and you get to fill them out for yourself. Saw teach you how to build a scrip. And when you get down to building one, will actually give you a template to go use. And you can fill out this template questions and you can go run out and you can interview people that you're interested in. And I'll 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 can 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 help 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 statements. So after you've learned around the people and the problems, you can restate the problem. So that way you can go and design solutions around these validated problems. After that, we're going to learn the customer journey map. 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 of 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, we'll move over to concepts. And what we'll learn here, it's called the value prompt, kinda looks like this. We'll learn more concept frameworks like a four up. Learn another technique called the picture frame. And I'll also point you to other websites where you can find more cool examples of how to 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 wireframe. So I'm gonna come over here. I'm using Adobe XD right now. And I've created a wireframe workflow on how to deliver mobility to your house on demand. So the goal of this application is to get baba t delivered to your house whenever you want it within San Francisco. So let's go ahead and play this prototype. I'm going to click around on it. So loaded. I'm going to do my first name, my last name I E moment, uh, sign up for the application. I see the sign up. I could see all of the Bobo t application 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 going to press Add. I'm going to go check out. I'm going to see how many bow, but tea drinks I would like to order just one is fine. When a press Next, I'm going to put my street and my address in. I'm going to pay for this baba T. And now I see it on a map and it's going to come deliver to my house suite. Okay, So what you'll learn next is to take that wireframe that you design for your case study doesn't have to be bold, but T, whatever design you come up with. And you'll go out and you'll do usability testing. But before you do that, you're going to 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 design systems. So I'll give you the whole thing around what a design system is, how to approach 1, what a style guide is. And there's lots of dive into here as well. And once you understand that we can take the bow boats he 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 in a more visual way. I signed up. I can see all the bow but t, They're sweet. I want a regular milk tea. I want it with regular set our semi sweet about large tapioca. I want to add it to the cart. I can see it's been added here. I'm gonna come over here. I have the quantity I can edit. I can remove things I learned from research, usability testing. I press Next, I put my address down. We also learned people wanted to be taxed when they're bow, but t was what's going to be delivered. So we added the phone number here based off the usability testing that we did. We press Next. I put my credit card information in and watch this. The bulb is going to come to my house on delivery. And we've got five minutes, two minutes, and it's almost there. Yea, I have omega t. And I get the text that it's delivered at my front door knocking, go meet the person App Bot web. Okay? And what you could do at the very end of the class is 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've did. You can do a little bit about yourself and 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 persona's and a very cool looking way like I did here. You can talk around your assumptions or your 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. And 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 going to do the learnings and findings which are the patterns that you found. You're gonna make decisions of those patterns. You're going to come back and recreate, restate the problem statement. You're gonna do sketching and concepts and take pictures of those are going to sketch out ideas. You're going to do customer service, customer journey maps. You're going to create the wireframes like I showed you in the Beaufort Sea application. You're gonna go out and do usability testing and user testing like we got here. Show pictures of that. You're going to 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 can go see the final one here that you've created. Pretty great. Some 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 overviewed with you. And I'll end on my website here, Aaron Lawrence, case. You want to see more of my work? And I thank you for spending the last 20 minutes with me. And hopefully you enjoyed the class. Bye. 2. Set Goals for your UX Design Decisions: Hi, Welcome to video 1 of the how to build a UX design case study and UX design 1011 of the first things we do before we go through all of the processes of making designs and research. As we understand our goals is the first thing we do in UX design. And what types of goals should you know? And who has this, these, this information? And how do you extract this information are things I'm going to show you in this next video. And remember that what is successful UX. Ux is all around connecting business goals to customer motivations, and creating solutions that achieved 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. 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, R 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 and tends to benefit business. And over time, 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 going to learn in Layout today. So in this video, I'll show you what's called a kickoff 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 have access to all the videos, I want to show you where you can access all this information that I'm going to show you throughout class. It's a website, and this website is called UX 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 and UX So if you come to x2 here, you click on this and you scroll down. And you see where it says the kick-off meeting. That's the number one thing we do first before we go into the case study example. And 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 kickoff meeting. These are what these meetings look like. There's lots of people in it. We have an agenda. The agenda is it gets 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 persona's. So let's go back. I'm going to go click on this kickoff meeting and talk a little bit around the kickoff meeting. So imagine this. You been contacted by a startup 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, goals of the business and the people they are targeting. You are going to 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. Sounds like you know what to do. If not, that's okay because I'm going to show you what to do. Okay, So what you're gonna do is you're going to have a kickoff meeting. It's a full day meeting. It's usually about 10 AM till five PM. And you have an agenda to go through. And the agenda is you want to talk around the business goals and the product goals, the users and their goals, the stake holders, these are the clients and the risk and the mitigations that you'll do. So I usually look like this. There's the meanings. You can have an office that's great. You can also do it over a phone call is fine. You're going to write agendas down. I've given you the gender already, but make sure you do introductions. You've got to introduce yourself. Kinda 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 kickoff 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. And software is expensive and 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. There are problems and your solutions validated. So you know that they will achieve the goals that we're going to lay out in this next session or in this session right here. So the meeting helps us externalized 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 a line and agree on certain priorities. And our memory, you're going to take this information That's going to 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 stake holders, the risk and the mitigations. So let's start with business goals. I'll blow this up a little bigger. Okay? So the business goals and the why behind it, you want to know key performance indicators. These are called KPIs that Inform 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 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 are key performance indicators that we want to use. We want to 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 that that number go down. And that's an important part of a business goal. So you want to understand the business goal and 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 to inform the business goals in small and large stages. Stages that's very important there. You're not designing solutions using software because it's cool and 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 in 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 employee as well. Okay? So in this meeting, you can write a framework on a wall or you can go through a document and I'm going to 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. So we have the business goals, the product goals that users and their goals, the stake holders and the risk. And I've 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 UX, UX project or you start your project. So let's go back over here and let's talk about that. Let's say that you had the business goals on a whiteboard 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 to write 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 success look like for the software business? They give you the success. You map that as a goal. That's one thing you can talk to. So those are two questions you can use when you're going through business goals. And if you ask these two questions here, the business people were really like you, trust me. Okay, let's go talk around the product goals here and the reasons why. So it's important to understand what the business thinks of its possible product goals. These are 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 going to need a way 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 app if you don't have a camera. So these 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? So these people are usually subject matter experts. That means they know a lot around a certain area in the market. Say it's bow but t then these people would know a lot about Baba T. There are also product managers. Product managers are specialists and strategy. And they could also be engineers as well. And these people will understand design way more than the business people do. And they will have questions around specific user interface components and interaction design team details. Pms are, 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. So remember your design serves as a communication tool. That's it, right? It's what the engineers build is the final thing that users see. So your designs help everybody understand what we are building, why we are building, and the value that we intend to go out and learn. So end users do not see the final designs. They see what the engineer's built. So let's go into questions that you can have. So you can say, what does your product needs to do to achieve business goals? Question. Can also say, if your product was a human, what would it spends most of its time doing? And you want to write down and capture that information. And again, I'll 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 UCSD, to major part of the philosophy of doing user-centered or UX research and UX design work is we're trying to understand the users for being centered around the users to design is for users. So remember that term, you see D, user-centered design. So why is it important to understand users all 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 in research with first. So remember this is your area. Usually you can be called on to handle this part of the meeting. If you're with a team, you need to capture just high level information about the users. Didn't call it a user profile. We want to know the target market, say people that love bocce. We want to talk around the target user. We can call them mobile 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 and you can ask for a username 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 a hold of these people for research and testing? Usually, the business has a good idea and can 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 the 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 with clients. This is tried and true and tested and you should have real good success. But just these four questions here. Okay? So these are stake holders, these are your clients, these are people that are accountable if the solution you're designing and the engineers. 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 meet company's 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 see, will help everyone a line and share ownership on information, decisions and ideas. The more you can involve these people into the user logic early in on 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 wouldn't 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 can be called on to handle it. If not, 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 as 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 to 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 the stake holders. And you have questions around 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 use to build trust with them. Okay, let's go talk about risk and how we mitigate risks. So risk is anything that can block, disrupt or fell a project or software that we build. A risk can be turned into a question. And that can give you work. By answering 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've learned about the project contexts, everyone should have time to call out and prioritize risk. So as a team can start focusing on activities that will intend to mitigate or solved 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 going to 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 UX 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 are solving business problems for businesses that build software. So questions you can talk around and ask businesspeople around risk is, what are the things that can happen that will make this unsuccessful and not achieve our goals. Let's say we failed. What are the things that you think caused us to fail? So we can understand that before we do any work and we can 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 risks that users, all of the goals. So if you have all of this information and where you can go over eventually in your case study. And you can include this at the beginning of your case study. These videos, I'll show you the information and the tools and techniques that I'm teaching you and how to put that information into your case study so you can see I have it here. Okay. Last thing I'm going to show you is the application I'm working on, which is a bobo t application. So I'm going to walk you through this bot what T 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 bokeh, we go and we sign in. Normal sign-in process repressed sign-up, we see a list of biloba drinks and applications. And I can show you this page here. Pretty small, but see I'm scrolling down, I can see all the bow, but t's. Once I selectable with T, 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. See here, the cart now has an icon on it. Now I can start to check out. I can order a quantity of bot, but I can come to this address. And you're my address, my phone number. I can put my credit card details in. I can pay. And then I'll see but map of San Francisco. And I'll see Bowtie coming to me on delivery. And then boom, my bobo 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 boat, the team business. And so let's go talk a little bit about that business and what the goals are. So first thing is the business owner and I want to sell more than a 100 bow, but t's a day with our new on-demand software. That's the goal of that software. We want to partner with an existing delivery service and use them to deliver BO. But t, We want to make additional revenue by charging and delivery fee for every Baba t that is done, that is delivered. Okay, well, how are our products goals to help us achieve the business goals? While we need users to sign up. We're going to allow for different flavors of bow, but t to be selected. We're going to allow users to select milk, sweetness and ice preferences and topping preferences. We're going to allow for users to inter address phone numbers and payment details. And we're going to show real-time update of Baba T being delivered from Bobo creation stations to user locations. Let's go talk a little bit about users and their goals were talking about bot, but two lovers in San Francisco. And these are people who want to have Baba t delivered to their home or office. The stakeholders here as myself anymore. So I'm available ten AM to five PM. So if you want to have design reviews with me, make sure you do it within Monday to Friday in that time zone. And some of the risks that we'll face by building this application is that the Bobo team melts and doesn't stay fresh upon delivery due to not being delivered fast enough. This causes a couple of things. This Bobo t can get someone's sick. And now we've got somebody sick. How are we going to risk 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 in first step of the process and UX design. Join us in the next video as we learn how to create a persona. See you. 3. Create a UX Design Persona: All right, Welcome to the next video on how to create a UX case study and user experience design 101. And the last video, I showed you how to set goals. Next thing we're gonna do in the process is we're going to learn how to create a persona and what a persona is. So without further ado, let's go look and dive into a persona. So I'm gonna come over here to the UX website. I'm going to click on UX to goodness is the website that I use with all the material to teach the students at the Academy of Art University. And over here I see that I have the invalidated persona user interview 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. Then I'll show you the framework of a persona. And I also have a documentation attached to the video that you can download, but you can use to create your persona's. 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 age and gender. Gender. In most cases, these people have the same problems, goals, motivations, and behaviors. And his first constructed from our invalidated assumptions. Before we do research. When we do research, we talk to these people, we learn a whole bunch of round them. And then we come back after research and we revisit the persona artifact and we update it with her 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 we're targeting and put it all into one design artifact called the persona. So over here you can see I have some examples, a persona's. 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's sketched out. So you can see, you can sketch these personas by using the framework. Once you feel more certain about the people that you've learned, you can create them here. And let me dive a little more into why they're important. So a persona is important because it automatically introduces it user-centered design into our process. And again, the UX study is user experience design, where we are going to build things and design things for people to use. So it's really important that we understand who these people are. And before we design something for them, we want to use this persona to help create conversations and keep conversations that are 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'm designing something for, let's say, Korean pop music. And I'm not a 16-year-old Korean pop star or pop front pan, 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 there actually are the donor 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 stakeholders, stakeholders I talked about last video. These are the business people or clients that pop into my meetings. So I can easily pull this design artifact and 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, well, why don't we go talk to users around these opinions? And 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 invalidated persona and moving it to a validated persona. So the first thing we do, which you'll learn in the next step, after I talk about this. Is how to create a invalidated persona. So we make assumptions about the people that we're targeting. And the next video I'll talk around learning goals and questions. But the thing you wanna 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 synthesize and your cluster these themes into patterns. After that, you'll go and validate or invalidate the problems are assumptions that you had. You'll validate or invalidate the goals, needs, and behaviors of these people that we talked to. And then you'll revisit and 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 persona's. 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 we see the first one, the second one, the third, 1, fourth 1. So first one I'll talk about here is the top left quadrant, is the person in the real-world contexts. This is a photograph of them and you can see, I'll show you, I also have an example here of the persona open. It's filled out. But before I review that one, Let's go just talk around the quadrants and 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 contexts 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 first learn around what all these quadrants are for. So the one on the top left is a person in the real-world contexts. And it's always good to draw a quote around them. And you can draw a little quote talk bubble here. And you want to have the problem that you intend to solve and the goal written from the user's perspective and 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 can be their first name, which can be any name that you'd like. But the seam lastName has to represent this user. So let me show you the example I have here. So this is our bot but T persona. And we have Franny, and Franny identifies as a foodie. So this person's first and last name is Frannie foodie. What I'd like to do is I like to 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 it helps me talk around the persona when 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 persona's. So let's see, 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 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 problems and goals for people. So in my situation, I'm looking to build an application that delivers Bobo 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 bow but T 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 going to be using our application. On the top right quadrant I have behaviors and activities. So these are questions you can ask yourself when you're filling this out, is what are these people's day-to-day activities? What behaviors do they have that relate to the space you are working in? So in this case, you can say food, beverages, or Bhabha. Who do they share these activities with? And where are 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 did 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 to 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 Frannie foodie. Frannie 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 goal framed in her world. We don't contexts and user perspective. So right now she's saying I'm so busy and I want to leave and get a bokeh t When I should stay here and get my work done. So her goal, as she wants to get her work done, she also would like to have a bulb, a T. But our problem is and she can't because she asked to get our work done. So let's learn a little bit about Franny 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 WHO doesn't really matter. In this case. I have Franny 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 Frannie. So she's on their phone a lot. She has a busy schedule, loves to go eat out with friends on the weekends. He's always looking for new restaurants to go eat out at. She follows foodies and food blogs 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 right 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 are 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 scripts. And that will set you up to go do research. Okay, hopefully I'll see you over in the next video. Thanks again. Bye. 4. Create a User Interview Script & Research Best Practices: All right, Welcome to the next series of videos on the how to create a UX 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 in this video, you'll learn how to create a user interview script and the best practices when 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 three to four sheets of paper. You'll print it out and you'll leave your office or your home and you'll go talk to people. He may even bring people into your office and 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 research is us going out and learning around the people that we targeted. So the goals are we want to, you're 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. 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 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 to Guidelines for a proper user interview script. Okay, so the first thing you wanna do is you want to put your name and the date, and then you want to define your recruiting questions. These questions, will you identify 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 talked, we've set out to target. So in the bokeh T 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 0 but t frequently? And do you consider yourself a foodie or love good food and beverages? If they respond to yes, to all three questions, I may want to pull them in and actually interview them. Okay, So the next thing that we have is we want to identify our learning goals, what our learning goals, learning goals are high level areas that we want to learn more about. And this whole section right here is 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 bowl? But T example. First one is what's they're delivering on demand behavior. Because remember we're building a bot but T application that will allow someone to order a bot but t wherever they're at. And within 10 or 15 minutes, they'll have mobility 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 we're a lot we can actually deliver within 15 minutes anywhere in the city. And they order some Mobitz II 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 what do they like and find painful about current delivery and on-demand services and y. And the next thing we want to learn is what's their bow? But t behavior. Saw show you how you use these learning goals to develop a whole series of questions that relate and pertain to each learning goal. Before I do that, I'll show you the introduction that 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 first nine things on this introduction you will ask, can say to your, your interviewee. Number ten is to take pictures of them for your case study. Don't take pictures of them in the first five minutes of meeting them. You want to wait till the end? Asked him if he can take a photo of them. So number one, the first thing you wanna 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 Bobo t delivery example. So we're going to call it the food and beverage space number to ask if it's okay to record. 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, will be about one hour. Sometimes I say is it's still a good time. The interview will take about a 10. Number 4 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 boat would see application. And I would like to learn about your omega t 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 contexts, 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 5, law, him or her know, 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 6. Let them know they can ask questions to you anytime. Number 7, let them know that they'll also have five minutes at the end for any questions. Number 8, ask them, Do you have any questions before we begin? And the number nine, let them know you're going to start recording and press the record button on your audio application on your phone. Okay? And then what we're gonna do is we're gonna get into the questions. So the first question we ask is called the icebreaker question. It has really nothing to do with what you're trying to 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. That gets them talking. It gets me talking. After that. We'll do the about them. So you can ask questions that sound like the four that we have here. And 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 are asked, you can move to the learning goals. So you can see here I have the learning goal topic here and a 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 we'll use the bokeh T example. So the questions that you have under each learning goal should relate to that learning goal and help you learn a more 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 and on-demand behavior. So I'm going to spend about ten 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 did 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 the 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 surface. When was the last time you ordered something on delivery? Okay, so now I'll move to the Bobo t behavior learning goals section of the script and spend ten minutes with questions that pertain to the bulb AT team. So first one is, how often do you drink Baba t? When do you drink it? Where do you go to get over t. Have you ever had a bad experience with Bokeh t? If so, please describe in detail what was bad about it. Have you ever had more have you ever had a more than great experience with a bow but tea company? If so, please describe in detail what was great about it. So you may have three to five 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 for the end of your interview, Go move to the outro. And we have to 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 see, 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. One of my favorites. After that, you can come up, you can finally proceed with the outro. So first thing you wanna do is thank them for your time. Let them know that all the notes and recordings are confidential and will be only 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, do 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 a solution 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 fill 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. So back over at UX The first thing i'll, 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 open-ended. So it'd be better to 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, 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'll say, well, I'll use my iPad the most. And then you can say y. And let them tell you paragraph or story of why they use their iPhone and iPad. But see how much more information I got. When I asked a high level open-ended question. There are areas I may want to come back to, which is, why did they have a advanced alarm clock or a futuristic alarm clock? What do they use? Their iPhone 4 as well. Do their iPhones connect to their iPads? Is there a relationship there? Start very high level, very open-ended. Next, you can spark conversations around scenarios and activities. This relates to the learning goals around learning people's behaviors. You want to know about their world, rural contexts that they're doing an activity. Where are they doing it at? You want to learn around their pains and their joy. 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 on-demand service? You want to know about the best time in the worst time. So bad experiences and good experiences. And you want to give them that wishlist question that we talked about in that last one. Okay. These are conversation prompts. So sometimes if you don't know what to ask, You can just give them conversation prompts and sound like this. You can say, have you ever had an experience where and to describe the scenario that you think, you want to learn more around. And it's okay if they have it. If they have, you can say, Can you tell me the story from beginning to end? And then within the store, you can ask questions that sound like the next one which is and then what happened. They tell you some more information and 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 of 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. Is there time to talk, not yours. Ask a leading. And questions and we're just asked 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 in my actually going out ever in the future or in my pass 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 and 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 behavior should allude to these questions around do you like it and would you use it? So 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. 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 the cell, 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 or no answer. 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 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 member, They said, Well, 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 time. They'll all you use, you're like Which one do you use the most? My iPad y. And then get into the iPad and have a whole bunch of questions of why and their behaviors around an iPad. But I didn't start with just how do you use your iPad floor or what do you use it? Four, I started with the story-driven question that was very open-ended. Got their complete story. And I can 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. So we're back at UX 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 is just ask questions. You're going to listen, you're going to learn. You're going to record this session. And then after the interview, you're going to come back and you're going to listen to these recordings. You're going to rewind, to go forward or rewind, listen to the audio. And here's the real trick to doing research. You're going to write down your insights, your quotes in your learnings or anything helpful on sticky notes? Yes, Sticky Notes. Go get a whole bunch of sticky notes with different colors, sticky notes, you're going to need them. I'll show you a little bit at y 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 inside or one learning per sticky note written with a black Sharpie. So it's real easy to read from a distance. Make sure you write the name of the interviewee on the sticky note so you know what color this pertains to? I interviewed this individual here, I want to 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. A whole bunch of information that pertains to one interview. After many interviews, what you'll have is something like this. Let's say I interviewed 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. We need to researchers. So the dynamic is three people. It's just like the two-person dynamic. You still want to have our audio recording going. But this time you're going to have a note-taker. The note-taker is just going to take notes. They're just going to write down information that they hear from the interviewee. The note 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 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 inside of 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 interview or captured just like this. So here's Tom, represented in orange. After min your interviews, you see we have the same thing I just talked about. Okay, and 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. It's called real-time board. It just mimics a actual whiteboard 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 real, actual physical sticky notes. Put them up on the wall. So your wall should 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 series, which is how to synthesize 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 UX case study and user experience design 1, 0, 1. So 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 when 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 going to 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 or sorry, UX website. This is the website I teach at the university. And if you click on the UX 2 here, we'll go to home. We'll find the synthesis and clustering. You click on this button and it'll 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 or 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, but 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, five to seven 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 interests, points of priority. And it helps us to validate the learning goals and the assumptions that we made in the persona than 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 represented in 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, but very large, open-ended 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 enters I've got from people were all over the place. So they talked around how they use their, they use their mobile devices. They use a laptop, they use an iPad, they use a like really futuristic alarm clock. Some use really interesting technologies in the kitchen. But I kind of broad statement 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 it a sticky note or a sheet of paper or category. Imagine this is a physical space and it 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, this is a larger sticky note called technology. And now I'm going to stop and I'm going to read every inside I have, based off the research I've done and all the users I've done here. And I'm going to pull it eats 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 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 categories full of insights, then I can go and get granular with it. So seed. Now I've heard from that question around how do you engage with technology? People told me about information around how they use their iPhone or 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 high find themes. That helped me go along with the work that I'm going to do. So pretty much what you wanna do is you want to go through all of your interviewing and you wanna come up and start putting all of your themes together. And I'm going to scroll back up and show you what that looks like. So you can see here I have a whole bunch of people I've interviewed represented in what we have four different colors on that one. We have blue, green, gray, 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 two 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 all the interviews that we've done there. And you can see our persona's 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 we 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 and they're having fun. We're reading what I'm doing right now as I'm reading out a topic, an insight, sorry, from all of the people that we've talked to, a specific insight and reading it out loud. And I'm asking the team, where does this fit? What scene category or topic does this site 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 call 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 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, Jo Han, and Anna here. And now I'm ready to start pulling some topics here. Some gonna start pretty broad. And I'm going to use the example that we talked about in the last video, which was Baba T and a bowtie on-demand. So I was curious to hear when I went out and interviewed. How often do people order Baba t and when do they get both a T? So right now I'm going to select, let's say yellow for my category. And I'm going to call this sticky. Like when do people get Omega t? Okay, There you have it. So we'll call this one. When do people drink, beau, but t, we get 0 busy. And I'm going to comb through each one of my categories. Here, are my users here and see where they said around when do they get over t? So I have a person here, he says I get omega t mostly on the week ends. So Laplace that here. And I have another insight here. This has sometimes I get omega t twice a week. Put that over here as well. Again, it's got moved over to John. I also have a sticky note here that says On an average week, I'd saturate bokeh T three times a week. So I'm going to go place that over here. And on this sticky note here, I get 0 but t almost every other day. I love that stuff. That's an interesting one. I'm going to pull that over here. And this one says I usually do more walking around San Francisco on the weekend. And if I see a bobo t place, I usually stopping get one. Now 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 0, but t only on the weekends and I'm trying to be healthy during the week. And she said I'd say I'd probably drink Bobo t twice a month. So those are interesting insights that we should go pull over to our topic here. So now I have this topic, which is when do people drink over t? But now I'm getting some insights about how often they drink it. So let's go make another one here and pull some from this category on. Make this one. How often Do people drink tea? So this person said it here, I get 0 but t mostly on weekends. This one says Sometimes I get omega t twice a week. Okay, let's pull that over there. On the southern one here it says, I usually do more walking around San Francisco on a weekend and I if I see a boat but T place, I usually stop and get one. Okay. Let's leave that they're on an average week. I'd say a drink over t three times a week. Let's move that over to this topic. And I get Bowtie almost every other day. I love that stuff. Let's go put that over here. Okay. I get Bogota 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 Baba T on the weekends. Very interesting. I'd say I'd probably drink beau, but twice a month. Okay. Very interesting way to topic your information that you have. And that act of putting themes and putting sticky notes underneath the themes. And that's called and fostering affinity mapping. But we're really looking for the patterns here. And so now I can come back and interview a whole bunch of more people. I've also learned during this interviewing that people want Mobitz II not only on weekends, but they also wanted at work. They leave during the week day at work and times and get it. And you'll eventually should have something where you have a lot more people on one of these topics with different colors. So you've interviewed more people, say, I'll make one orange, we'll make one green, light green, we'll do another one, It's purple. And eventually hopefully you'll have a lot more of these. Say you have a topic here, we'll call this like Topic 1. And lots more insights around that topic. And then we'll have another topic here on this topic 2. And that's hopefully what you'll end up with, something like this with 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 learn around what the goal was, a research was, it was to explore and capture reactions, explore and capture behavior, and get a lot of answers to the questions that you had. So this point, you can stop doing research when you still that you've understood and validated 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 in the next thing that we're going to do right now is we're gonna go learn how to write a problem statement. So I have this document here that's attached to the video that you can download. And this is what we call it problem statement framework. And the framework here outlines a couple of 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, to have that problem, what their goal is, and what the solution that they would like to have that will help them solve that problem. So the framework is just as you see here, is you start with IM, 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 only if I had which is the solute, the intended solution, we'd like. Okay, so let's go and use the bow but T problem statement example. So we've been running with this bot but T theme this whole time as examples for you. And so here's the problem statement from the bokeh t point of view. So after our research we learned a lot of people did want to order by 0 but t from work. But they weren't able to leave work because they add a lot of work to get done. So their problem was the R This person that we were targeting, her name was Franny Shruti, that was the persona. Again, their goal was they were trying to get mobility at their workplace. But they can't because they have too much work to get done and they can't leave the office. Our problem. If only they had a way to order Baba t 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 trawling, the sketching, the designing, making, the design wireframes, 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, which will help you tell the story in which you're going to design for. You're going to use some sketching templates and frameworks used to create those wireframe 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 that basis of a design system, which is creating all the design elements. How to apply the visual design to your wireframe. Best practices when it comes to design your resumes and the case study outline. Cool, So there we haven't. 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 a UX case study and user experience design one-on-one class. We've just finished a whole series of videos. We've learned already how to create and set goals. 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 synthesized the findings. How to write a problem statement. And now today we're going to focus on how to create a customer journey map. So I'm going to head on over to the website curriculum, a website that I use for my university teaching. I have two classes. I teach serotypes to y2, x2, and I teach advanced user experience design, which we call UX S3. The customer journey map is something I teach to the advanced students. So I'm gonna click on Y2, X3. And here's all the methods that I teach for that class. And we're going to scroll on down here to find the customer journey maps right here. So where it says maps, I'm going to click on that. And this is where we start our customer journey map 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 it's usually a scenario that's 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 in your usually modelling the problem. When 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. And you can use this model, the customer journey map to model a concept or a validated solutions. So again, you're usually modelling the solution scenario. So I have the example here. So I have an example on the website and one that's filled out as well. So I'm gonna hit over to Illustrator. And I have a document already attached to this video that outlines the 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 rows here we call these swimming lanes. And so the first top one we have is a physical environment. So we're asking ourself, 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 could be at the office. The next swimming lane below physical environments is the user action. The key one. This is the actions of the users go through. And the one below that is called the front of stage. These are 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, the backup stage, this 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 to plan. So this backup 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. And the last one here, the support one on the bottom is called the support swimming lane. And these are support interactions could be e-mails, text messages, notifications, okay, so forth, all those series of videos we've done, we've looked at the example being the order Mobitz II online delivery service. This is a application that we're going to build out here at a couple more videos. And I've used this customer journey framework to model out that whole journey that the customer is going to go on during ordering a bobo t online. And this is the journey that we're going to 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 ordered Bogan see online to be delivered to the office. So actually, that's not the current state. Hopefully you caught that. Let's change it. This is the future state goal here because we're designing the solution right now. So the future state goal is we want to order BY Bowtie online to be delivered to the office. Okay. So we have our user name or user was Franny foodie. She wants to order a Mobitz II at the office. And then 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 Bot button and have it delivered to her office. So that's the application we're going to build. And here's the customer journey that Franny foodie is going to go on modeling right here, so you can see. Okay. So Frannie foodie is at the office. She's on a computer. She goes to the website here, whatever the website is, naming is, we can say it's sweetened 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 Bobo. Only in San Francisco, service times are eight to nine o'clock. And she sees a button that says, see menu. The backstage here we have a backend 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. Let me add a there. So the next thing that she's going to do here on this user action, as she looks at the bot, bot team menu, she's on our website on a computer right now on her desk at the office. She can can can select from different types of bowties. Some drinks, pictures of toppings, prices, and Add to Cart button. The back-end database behind the sage. Sage will update out of stock toppings and T types so we don't have a certain topping. Or T 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 bow but T and her toppings. So again, she's at the website at her desk. She selects and adds to cart milk tea with large Baba, medium, sweet, and add a name to the cup label. So this, you can order the amount of sweetness that you would like on your property. And so we do multiple orders. It's important that you put the name on the cup. So if we have four orders, Ababa T, it will name the people that you can put the people's names for each flavor and order speciality. She sees the Add to Cart button and continues to the Add to Cart. 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 Franny foodie does is she reviews the order. She sees the milk tea selections, the total price, the taxes, and the delivery fee. And she sees a button that says checkout. At this point, the backend, you're behind the stage, calculate the sales tax and calculates the delivery fee is a Estimate. Think you have anything in support leg here yet? Okay. Now, she Granny has to login. So she sees that email form, a password form. She can log in through Facebook, she can login through Google. She sees a button that says login. At this point that back-end database will confirm the login information is correct. Pull customer info like name and delivery address that was entered in the last screen and save it to that person's profile to Friday's profile. Okay, next thing that we're gonna do here for Frannie is she's going to confirm her delivery dress and inter payment details. So in the physical environment, she's still enter das got a computer, but now she pulls out a credit card. When she sees the delivery address, she sees the credit card, Florida, she sees an estimated delivery time. She sees a total costs, a tax break down and delivery fee. She sees a button that says Place Order. And again on the backend, we're going to calculate sales tax. We're going to calculate the actual delivery fee because now we know the property trusts that we're going to deliver it to. Okay. Then we're going to have the payment confirmed is the next step that friend is gonna go on. So she's entered all that information, she places the order. She sees that the payment was successful. She sees the delivery time is going to take to get the bokeh teacher her office. She sees the delivery address. The back-end database here confirms the payment information order for the business stores the user order in a user profile section. So those phrenic and go back and see historical log of her orders and it sends a receipt to the email. So remember this last track here was support track. So Friday is going to get an e-mail of the receipt of her purchase. And this also will create the orders and details for the business so the business can start working on her omega t. Okay. So the next step is is that Franny is waiting at our office for Bobo t to be delivered to her office location. So the final stage, nothing's really happening. She's just waiting. But behind the stage there's a lot of work happening on Billy the bike messenger. He has to package up the Bobo t. He informs the system that the t is being delivered and he prints out ever. He also has the system send a text, send an email notification of the ETA, the estimated time of arrival. So that ETA shows up as a text and email to Franny that we're on our way and gives her an estimated time of when her bow but t will be delivered to her. Billy rides off into the sunset and it goes deliver this Bobo T on his bike. Okay, so now we'll go to the next action here is that the Bobo t is being delivered. So the physical environment is you can see the office frantic and see Billy, she can see the bulb, a T a receipt as well. And I'm behind the stage, the bike messenger, Billy, and forms the system that the transaction was completed. So now Franny gets a tax and an email thanking her for her service. And this would be a good place also to give her a coupon for a fight, maybe a $5 off the next order. Okay. So there you haven't, there is a customer journey map. I'm going to show you another version of a customer journey map. And you can actually use when you do user testing or when you're with your targeted persona or your customer. So I'm going to head on back here to the UX, honey. And we're going to talk a little bit about the emotional journey map. Okay, so what is an emotional customer journey map? 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 that future state. You can also do it during a current state. And I tend to do this once we have designed, already built out in a workflow of our designs built out. So here's the example here on the website that you can find. But I've also given you the example in the same file that you can download with the video as well. So it's pretty similar to the customer journey map. We have the same swimming lanes. We have the physical environment here at the top, if the user actions here. But at this point Delaney that we have below are described by emotions. So you can see this lane here is described by excitement. We have a normal state. You have a little bit of a hesitant state. We have a confused state. You have a border 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 fill in whatever information they felt here at this point, they can draw it in with a pencil and a Sharpie. So let me give you the example of what this looks like in the bokeh t 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 the design's already live in the wild. And I found somebody who used it. And I 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 for parts of the application and what are the parts of pain. So I can focus on working on improving Not only things that are paying for the app, but the, the joyful things and continually ensure delight for our customer. So it's the same journey pretty much that we described before. Known strand goes onto the website or the application, gee, it looks at a menu above. She selects both a t, et cetera, et cetera. But this point you can just have the user actually draw 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 Japan on the website. Search the menus, you got real excited and we asked why. She got excited and she really liked seen all of the options of mobility. You got to select some mobility options and toppings. Still pretty excited over there. Let's review the order. Senate was pretty normal. Boom, got to login. She wasn't existing customer. She's she got really frustrated here because her she forgot her password. So she had to go through a forgot password flow, eventually becoming more and more once she got her information there. Okay. She confirmed her delivery dress and entering the payment details, so that was pretty normal. Once she went to payment confirm, she said she got really excited because it was going to happen. And then she said over here she got pretty bored because she had to wait longer than what was expected. The application told her I'd be at her office in ten minutes and actually end up taken about 15 minutes. Um, so she said she was pretty bored there. But then again, what she got her bow, but she really likes to 0, but t is really good. She got really excited here. So that's how you can use this method during a user test session or after an applications in the wild. Um, I'm gonna go and show you another thing you can see this used. So I'm gonna go to my website here and I'll show you a case study that I've built out or reviews. This will ensure that website. I'm gonna go to my work page. Click on the ANOVA case study. And we'll get too much into what the ANOVA application is. That you can scroll down here and you can see when we went out testing or testing out a workflow in the application doubt up to a SUV cooker. This is a device that cooks in your kitchen that kicks. You'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 on. They go off into the device and they actually start to prep food and cook their food. And we just wanted to know how they felt during this journey. So you can see how I've used it in case studies as well. Okay, So you have this file here attached to the video, and you can feel free to download it and use it for your 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 and how to design a UX 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 interview script, best practices when conducting research, how to synthesize 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 going to look at sketching templates and frameworks. So at this point, the stage we've done research, we validated a problem, we understood a little bit of how that solution and tends 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 UX I'm going to go to X3. 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 going to go into here in yellow the sketching concepts and frameworks. And when I press this 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 are not judging each other. We are differing from judgment. We'd 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 we're doing a critique or sharing work. One conversation at a time is best and go for quantity. This is about going very broad and try and get as much ideas as we can. Okay, So let me talk about the first concept we have, or the sketching framework and template we have, which is called the value prompt. And what you have here is you draw a person in the problem space here. And next to it you have a person in the solution space here. So kinda looks like something like this. I also have this in a document attached to the file here that I'll go through and review with you here in a second. I'm gonna give you the reasons why they use these templates and what they're good for. So 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. And the proposed solution should be conceptual and it doesn't include a UI workflows. 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 going to use the same Bobo scenario and application that we've been carrying throughout all the videos. And I have the template here for the value prop 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 Bobo T experience we laid out earlier. Okay, so here we have Franny foodie. This is the person we're targeting their in their problem space right now if you remember the problem for any was at work, I wanted to get a Mobitz II, but had too much work to leave the office and go grab a boat with t. So she's here, she's on her computer and your cubicle scout work. And you want to use a thought bubble or a speaker bubble here to frame out the problem. So here's the problem as she was, she had a bow but t where she can't leave the office. So when you do the persona or the solution here on the right, it's best to start it. And right with the concept name. You can see here with open now. And then write what the user can do with this concept. C can see here on the bottom. On the bottom is that Franny can order omega t 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 Bobo tea coming to her location. So the concept name here that we wrote out was called Bobo now. And what can he do with Bobo now? She can order mobility on demand. Pretty simple stuff. So what you can do is you can print this document like I have here. You can do it as a group session and you can give it to your teammates. Or you can just use this sketch as many concepts as you can come up with and then pick your favorite one. If you do this as a group setting, what you can do is you can have everybody's sketches, many concepts as 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. One that involves a little bit more user interface design. So this one's called a flora, and this is a quick way to sketch out for different screen designs or scenarios without getting caught into the weeds are the details about the solution or Alice solution will work. You can talk through the details here if you can't fit them. So what we have is we have the sketch here where there's four quadrants and each quadrant here, the top-left is the start. So you put the user and the contexts 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 contexts of the Bobo t on-demand application. 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'm, I'll show you the example of how to use this in the bokeh T scenario. So you can see here we have Franny foodie. She's again at the office. And her goal in mind here is that she wishes she had a over T right now, but she's outward, can't leave the office. So user action one is, you can see a little bit of user interface. Now, I'm selecting both at t that she would like and then user action to here you can see as she can see in real-time when Bobo will arrive upon delivery. So she has a little map. You can see that over time here. And then you can see the goal achieves the result. She's actually in the same area of work that she started and she's still working. But liquids in her hand? Yeah, it is. She's got low but T and she's happy now. So pretty simple stuff for the sketching here. 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 them out. I'll put them on a wall. Vote on the best one. Hopefully, there's a winner and you can move forward in that direction. Okay, pretty simple. There you haven't, there's sketching templates and frameworks to help you sketch out the solution. And then up next we're going to learn how to create a wireframe design and how to create a clickable prototype from that wireframe. So you can go out and do user testing. Okay, as always, thanks for watching and I'll see you on the next video. Bye. 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 will not work. So, so far we covered in a whole bunch of videos on how to set goals, create persona's creating a script, best practices when conducting research at a synthesized research findings problem statement, how to create a customer journey map. We looked at the last video, we did sketching and templates and frameworks for concepts. And then now we're going to take those concepts and we're going to a wireframe dishonored. Let's get into what a wireframes. A wireframe is a low fidelity design, aims to validate the content, usability and workflow of a piece of software. It's usually grayscale in color. And the reason why is, as you want users to react to the content and the workflow, not colors and illustrations and bells and business. It makes it easy for users to give you honest feedback because it doesn't look like you've invested in 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 going to be something. So really it's not validated yet. Once it's validated, you can add all the bells and whistles and also makes it really easy to iterate when the design is low fidelity. Okay, let's go look at some examples here of what makes a good wireframe and not a good wireframe. And I'll talk a little bit about the column on the left and the column on the right. And then I'll also show you examples of what makes a good one. Okay? So a good wireframe has just the right amount of fidelity. And on the side next, it doesn't look like a final product. Start to fold. A good wireframe does not have state copy, what we call Loren Ipsum law. So good uses fake copy. A good wireframe uses real photos and quick icons, we'll leave it. Not good. One just uses gray squares that indicates sodiums. Good wireframe highlights the content. Not so good wireframe looks sloppy and not structured. A good wireframe validates the workflow and the interaction model. It not so good wireframe is everything's a one. And they don't reuse components 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. No idea of location. Uses good design patterns and device. Device paradigms are different interactions that are created for different devices. So the waist as piece of software may act on web. It may act differently on mobile due to the smaller. So those are what we call device paradigm. And not-so-good One has interaction details that are not met with logic. It could wireframe. It's into the details and validates the micro interactions. And also good one just as high level and doesn't account through the details like states. Okay, let's go look at some examples now. What makes good example visual and not a good one? So here on the left-hand good example has a clear workflow of location and content and it highlights the content so you can see where the users here, active button here. It see the journey that I'm going to go. As good highlight, highlighting content, and looking at the ones that are right. I don't know what the hell I'm looking at, look at all the boxes. The square bars are 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 soda, but that doesn't convey content to it. You can see these little gray squares, these little lines here. That is a representation of coffee. But it isn't, I don't know, somebody user when I'm looking at it may not look like me. It looks like gray boxes. Well, can't go to the next one. Exponent is a good example of mixing the repetitive while giving Soto contexts. And they have a lot of photos to show you. Hey, here's a couple of real photos we're going to use. And then they reuse the same Soto going forward. So it's showing repetition. But it's not just all blink photos actually show you some real photos here. I think it's nice. Next one, the content is unclear. See all the repetition here. I don't know what I'm looking around the lap. I know I'm looking at photos here. It looks like boxes again with line. So they're not distinctive. Another one. It gets into the details and the Micro Interactions. You can see I've checked what we call an accordion and lots of information in just one of these little coordinates here, that checkbox I can interact with. The one on the right is not showing in our details. Again, I don't know what the last one is. A good use of alignment, grid and negative space. You see here. It's an alignment happen. Either one, There's no good use of negative space, everything is filled and the son-in-law symmetry to it. It's all over there. It looks like a line here to column grids. And it's just not really put together nicely. Okay? So before we jump into the wireframe, I'm going to show you the sketch that we did in the last video. So if you remember, your app, and it's a on-demand service that allows this person is our persona to get it through a mobile application. By shaking, open up the app, you can see over two flavors, you can select one. She can make the purchase, see it in real time being delivered to her. And now she's back at work. She has spoken. So she's excited. The piece of software we're going to use to build this is what's called Adobe XD. So it looks like this. You can go download it. They have three trials on it. It's a really simple and easy tool to use to build out screens. And it also built out prototypes, which we'll get into the next video. But first I'm going to show you how to build out a couple of screens here, adding some symbols, how to make it button, and just kinda give you an overall view of the problem. So first thing you can do is you can create a new a file by just doing Command new. If you're on a keyboard or a PC, it's control for max is command and control and have different devices I can use. I can use an iPhone 6, 7, 8. I have an iPad here. I can do well, and I can also do a custom size. If you don't know how to use this, I have tutorials already. Sleep. Science suggests. 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 wireframe for the application. And let me show it to you real quick video for that. Okay, So my talk as we go through that whole workflow here, and I'll teach you how to build a screen. So pretty much we login. We see the first screen, the app login for my email password. Stan will do sign up. They could see all the Bogota selections here I can scroll notice the bottom tab bar stays fixed, means it doesn't move on the bottom. I press Add. Now I can get into a little bit more complexity. I can open up the drop-down, select semi sweet Bobo. I'm going to click on the large tap, a button on the top and add a tab bar and the bottom at my shopping cart, C1, I can quantity here. I'd like to go next. Address details. And they have now seeing my global team on delivery and San Francisco. And it's going to eat me and I'm going to close that down. So we'll get into the prototype in the next video. You can see here, here's all the screens that made that pull tight, slack and go out and test it. Okay, so I'm gonna do a command minus to zoom out and a command plus to zoom in. Like an anemometer, I'm on a Mac. I can also use Zoom icon here to zoom in. And if I hold Option or Alt 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 by doing Command Plus Command Minus. That's basic navigation tools that you use. Yeah. Okay, Let's go ahead and start by making a new screen. So I'm going to press this button over here. It's just art board. And I'm going to make an art board here and watch when I press this button, it already knows that I want an iPhone six sides, so it mimics the same size as I've already. Sounds good. I can copy these artboards by clicking and holding Option and click and drag. And I can see here I've copied them all. Let's start with building out a pretty simple page here. This is that loading screen. What about somebody? Side-by-side here. So you see here on the art board I have the ability to fill it with a different color I can pick on. But as you see in this example, we have black, Cisco flip flop. Pretty easy peasy. Next thing I want to have some type here, so I'm going to copy this Command C, and I'm going to grab the type tool here. Okay? So you have the type tool, type box. I'm going to take the type that I just had. You can see here it didn't taste like it did over here. That's fine. So I'm going to scan over to the right here so you can see. And what you'll find here is I have the tools that I need for the object that I'm on, selected the type appetite loaded up. I'm going to click and grab all of that type. And you can see here I have this size. So let's bump it up a little bit. But yeah, it's hard to read. That's what we call letting the space in between the tight. So here we have the letting it by double line spacing, selecting is a term we use in Trent line spacing is a term that we use when all looks the same exact thing. It just means the spacing between these lines. We can see this example here. You have a little bit smaller text. So I'm going to pop this down a little bit. Let's give it some formula. Let's give this about 20 to all pixel. I see this. Okay? So here we have the paragraph losses. So I can do center paragraph, I can do what we call slash right, centered. That's less slapped. Cisco flush, flush, left, thinner. I want to change the color of this text. You can see I can pop back over to the direct selection tool. Here. I can also press escape to get that tool. And I can change the text color to any color. But let's make it light. Pretty easy. So there's your text tool. We learned a little bit at how to create different sizes. What the lettering in line spacing was, how to access that. And a little bit paragraph settings, so little paragraph centered. Let's copy this paragraph. Let's do the loading. So it's a little smaller here. So we'll say pixels. We want it. So see where it says regular. Old school. It looks good. So I'm going to pan over to Illustrator right now. This is a letter W2. And you can see I have all my assets already here in what we call vectors. One. Vector format means I can zoom in on knees and see how it never becomes pixelated. I have this map image on the left. I zoom in on the map pixelated. So that's what we call it vector, its actual artwork. And if I click on it, you can see this little lines. I can make this artwork. So what I have here, I have a over T illustration. I'm going to copy it from Illustrator, will go right to XD. And I'm a place it can't see it now because it's black. Slumped it see it over here. And I can change the color. I can blow this up and down. I can make it a different size. And right now it's representativeness, white psych over here to the fill. And I can make white here. Takes on that screen. Let's make it a little bit bigger. Just 16. So that's how that works. I can make this second, I can add other colors into this if I wanted to make it. All right, now let's keep it white. So zoom out a little bit. Okay, so next thing I'm going to show you how to create the sign-up page. And when I make this button, I'm going to show you how to create a symbol, which is really, really important to learn. And a symbol is a UI element that you can 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 two. Let's go and see how it for all signup flow. So that's what a symbol is. It means this component can on many of your wireframe design. And you can change it with just one. And it will change throughout all the other areas as well up at the side. Let me show that to you again one more time. We'll just make this screen. I'm going to copy this screen option, clicked and drag. So I have the same screen size. I can also come over to the art board tool. Once that school. What's built this button, the sign-up button. And let's make it into a square here. Order to follow along with me too. Sometimes you may have to pause this video. They'll make the button come back as playing a video. That's fine too. It's hormones. Well, I'm going to grab the text tool limits the text here. We'll call it a tenuous link here to the tool 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 right-click and you see the subtle bringing the sharp bring the floor of the Senate. So that's how you can organize these objects in different ordering. Some will take the button, send it back slow. So the sign-up button that we have. So it's made up of a rectangle and it's selected. You can also make circles if you'd like to as well. See how the sign-up I'm going to go ahead and make sure that this text is the same width as the vectoring. It's a good practice. And everything's pretty good. So now I'm going to click the text of all sign-up button, that rectangle behind it. I'm gonna come over here to the symbol area. And I'm going to press the little plus here and blue symbol, so it's calmness. The new sign-up. Get to name these things. And here's my mean by being able to change this and worn area. And it changes throughout all the instances such as, let's say I copy this button will launch. Apple over here, small changes here. And I can change the text, which is really great. Let's see. I can say this, the back button, cancel button, and the textbook, the master symbol. So I can have different instances here. Let's say this specific login. Say this one. Say this one is, let's say this one here. Say that watching that video. Okay, so now I got to do here is I can change the fill of this background rectangle to any color I want, I want and watch what happens to all of the rest. They change. Really sweet. Saves you a lot of time when you have to make changes on your application, make symbols. It's really, really important part of our work. So with that being said, I already have some form, form symbols that I've created here. So let's pull up for I'm Alice, just get some of this layout. Sample swarm active law. It's what you do is you click and drag this lung here, this one default black symbol onto the canvas to workspace. And now I can see I have this one. Let's go ahead and copy this symbol. Option. Shift, click and drag. Let's do lastname. But we also had email and password, so I'm going to copy both of these now. Let's sure the spacing. See some rural. Go back to my Illustrator file. Now I have this logo somewhere like here. Well octets D OPEX d case, this illustration. Okay, Great. So that's looking pretty good. Do you have some copy here and login here? I already know how to do text. So you can create those if you'd like to learn how to bring a soda. This is just some thought into this page here. What I'm going to copy this page. And I also haven't been active, which is when I'm clicking into this form as a symbol as well. So I'm going to do is I'm going to delete these three. Active. When you actually click or tap on this form here, I'm going to make sure it's lined up States and actually go back. I want to make sure all my forms like that. So I'm gonna keep these here. So now I'm going to drag this form active on to the canvas, on the lineup, the lines here, I'm going to copy it. Command C, this firstName, foreign, press command, Victor, and that paste right in place. So I'm going to copy the same one. Let's make this safe Thursday. I'm a copy of this form over to the last state, and the command will delete the last thing. I want to os ux. Same thing. I'm going to go over to the email, delete this, and then they see things that smoke this sates home. And that will do the same thing. Oh, it's deleted. The email of the chips this to the password. I'm just going to do a small number, 8, c. So there you have active versions of this form, so we need the keyboard here. So if you go over to my folder, all of the images, it's like this. So I can do is just agonists. Any image you want, just drag it onto the output. I can prototype, which we'll do in the next video, screens together. And it will feel like I'm actually tapping into this form field fighting inflammation. That's for all awesome tool allows me to test how the slums time and wireframing test out on people typing it in the form. What's a general usability? By default that we all do? You're just testing out this content like somebody may say here, I'm used to putting their sperm feel that. Let's say we enter your password secret slot. Okay, so the next thing I want to show you is a little more complexity. This is select both at t. I'll show you what this looks like. So I want to point out here is I've just pressed the plus the play button here at the top right. I can view this and how I would do it on my phone. So when I scroll over t selections, but look, this tab mark, it stinks, sticks to the bottle, meaning it's not losing. See how groups. So I'm going to show you how to create this tap on and how to fix it to the bottom and continue your design. So that way we play and you can scroll through different options that some are more mobile. So let's just go ahead and start with a solid. We'll copy this one. I'm going to select model B. Let's go and create the rectangle. Usually they're about a 10025072 sentences at all. I'm going to cheat a little bit. I'll see you when I tested it was too small. Let's make it black. All right, let's go over to Illustrator and let's grab my icons and make it up top ball. I'll give you a website where you can go to a website that's called the null object. We check this. You can have the icon you want. Let's say you want like a doughnut. Click on this doughnut. I can get this icon right now It's free. I can say basic download. Download it here. While it's downloading now. Scope and drag this into my Illustrator file and check it out. There's my vector, electrical pulses out. And I can issue with Islam and paste this project as well as top. Go ahead and make an account. And let's go back to Illustrator. I'm going to go on here. Let's get back to XD. Black slums go up to the Y. For our profile. It's just small n. That's the screens. All right, so we have three icons, they're all the same color. We have what we refer to as a default state and that state. So the active state is a representation of where I'm currently. It's my location. So right now not until file and not on the heart. So what I wanna do is I want to bring them here to 60 percent sure people. Let's go ahead and say 1650 icon as well. And we'll keep this at 0 percent. Nice. Tab bar at the bottom. Let's go ahead and graph here, desktop here. That's it for this fall. So far. So I can make another rectangle, connect and make this black text. So I'm going to just copy this text here since I won't be able to create debts. I'll give this button. Create a button. So anytime you make a new button, let's just go ahead and say I'm gonna make this. But it's best practice once I make it. The type tool that blocks that you see it. There's add. I'm going to grab both of these holding Shift, Shift philosophy to select both of these images. I'm gonna do Command G, which is a group. Also right-click here. Make it a symbol. Plus mark here at the top. Well, now I got my Add button symbol, symbol 17. Let's say it's looking good. So let's go ahead and copy this section. Here. Show you what's going to go and bring it down to the next layer here. See it's happy, good. Extend this art board. Well, this art board all the way down. And here's a key thing. See this little dotted line here That's representation of what we would call hidden that balloon sold. So anything below this dotted line, the user will not see the hock to scroll down to see that information. So you can see the Start tab bars fall. So I'm going to right-click on this sent back. And now we have our tab bar. So I'll add one more section for this image is sampled little bit of leftover. Our, oops, I just grab the articles here at the top. It says iPhone 6, 7, 8. And then move it slightly. That looks good. Let's take a look at this and take a look at what happens to the Tab Bar I saw and I scroll down, swipe 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. It will show you how to do that right now. So you want to select this tap ball, all the elements within it. Sometimes I just delete it and I do a command Z. Go back and see this little check box over here. It says physician. When scrolling in the top right, I checked that it's going to stay fixed in position. So now let's go watch and pressing the Play button here at the top. And now watch what happens. Let's scroll. Bar states that it's looking good. You can see the bottom image. I can't get all the way to the bottom that all selection to press the button. So what we wanna do here is you do want to go and extend that art. It's like you get to that. It's a lot of times you're designing and you're coming in and see how this works. But we're going back to your notes and adjustments. Pretty much most of the synthesis tool. And there's lots more you can get into here. But I really wanted to show you the symbol, how to use the type tool, make the buttons, photos into it because most of our UI is a combination of either a square or rectangle with a rounded edge, see here along the wall, and this will be subtle insights and photos and typography. So most wireframes, we'll talk like that. You can also go to the Noun Project 2 sine icons. So if we want to save it to your design, and you can start building out the slide here. It's on the next video. I'll show you back to this video. Will show you how to 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 it out. This prototype, what we call usability testing. Now showing you that in the next video. So go ahead and go create all your screens or your designs. I'll make sure they look good in the previous section. And then I'll get into the prototyping and the transitions that you're seeing right here in the next video. So again, as always, thank you for watching and hopefully I'll see you on the next video. Bye. 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. Alright, 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 wireframe design. And we covered that in the last video. So in this video I'm going to teach you how to take that wireframe 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 are using Adobe XD. And that's where we made all of this screen designs. Now I'm going to use Adobe XD. We're going to create a clickable prototype with those screens that we made. So here's what we're going to make. I have the video here and they started from the beginning. We have a loading screen that times out you have a sign-up screen. You can see the keyboard because the e-mail password, you gotta done. Sign-up. Can scroll down. Remember we learned how to keep that tab bar in the last video fixed, meaning stay on and on the bottom, I click there's a slideUp washer. You how to do that. You have a drop-down here. Select semi sweet. I'm going to press the large tapioca button. Add this to the cart. Go back to the normal page. Click on the cart. We have the slide up. Let it go put my address Intuit going to press Next. Kinda put like hard information in this done press pay and LA LA I got low T being delivered to me. And ten minutes. Yeah. Okay, cool. So I'm gonna go open up XD and I'll show you some prototyping tricks here and how create a website. It's pretty simple here the next day. So first thing, you need another 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 go to prototyping. So that's how I know I'm in prototype mode so you can toggle between the two here. Look at the top-left design prototype, design prototype. Okay, cool. So let's go back and design mode, I'm going to grab a new art board. I'll place this art board underneath the sign-up board. I'm going to grab this sign-up button here. I've made a symbol 11, drag it into this artboard Puma, grab this logo. Here, we're going to start here. I want to show you all the functionality that you can do within Adobe XD when it comes to prototyping. So I'm going to copy this screen over here. I'm going to delete these elements. And I'm going to grab a rectangle, and I will make a black screen. So as you see here, so it makes it easy so we know what screen we're working with. I'm also going to put an x here at the top. And the copy the screen as well. And I'm going to do a back arrow here. And I'm going to copy this button over to this artboard. 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 Bobo T experience, I'm, I want to just go into prototyping 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 I'm gonna click on the button. So you can 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 going to 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 when I click and undo my click, you'll see a little pop-up appear. And this is the trigger. So this allows some way to tap, drag or do voice commands in the prototype. So for our, most of our cases, we're gonna 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. 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 the time. That's what I'm using, transition and overlay. And for animations you have dissolved and you have to swipe slide left or slide right-side-up, slide down. So let's just start first with none style. What I have here is have the sign-up button going to the next art board when I tap it as a transition here. And we have no animation. So let's go 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 signup, 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. The transitions here, this is where it gets real fun. So let's go ahead and say we do it dissolve. So I have the duration of how it's going to dissolve here at 0.1 seconds. Oh no, 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. Let's do it on like a very long duration, let's say like 30 seconds. Now, notice how font, Let's go like eight seconds and see that it's dissolved here somewhat press play and see the slow dissolve To slow. 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, 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 our sake, I'll come back and forth and open up previously you can see what's happening. All right, so the next thing we can do here is we can do a slide left. This is going to create a art border wall or will slide from the right of the screen, left to viewing position. So let me show you what that looks like. So you have to both the T 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 do slide, right? Kinda same thing. I'm just going to slide right? Let's go press Play and see how slit in from the right. Most common we're doing slide left or slide down. So let's go look at the next one which is slide, or, sorry, slide up and slide left are most common. So we're going to do the 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 an on the x of. So this x is to close this little slider 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 going to slide up. I closed that. You're going to slide down, see how that worked. It was pretty nice. 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 transition here. So if I connected this to this screen art board, to the next art board, I get a time one when it's homepage. And this allows me to type something out. So I can say here in five seconds, it will go to the next screen. So this is common for load screens. And this is how I made this load screen here. 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 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 going to make this to home screen. 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 going to create the sign-up button. What we're gonna do an overlay here. So if I click the pop-up here, what I'll get here is the opportunity to do not a transition, but an overlay. And then overlays our grief when you do a mobile drop-down menu. So I'm going do is I'm gonna go back into my design mode. I'm going to change this screen a little bit. So I'm going to 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 fill with any color. And so what that allows me to do is when I go to my prototype and I view it, and I press signup, just this little piece will of the next screen will slide up. And that's called the overlay. So just overlaying the initial screen that I was on. Well, let's go back. Let's do a couple of more Three screen prototype here. So as it 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 had a slight down here. But I have this Next button here that I want to go to the next screen. And what that's gonna do is we want to transition. And we want to have this one slide to the left. So let's go look at. All right, So I sign up, I press the Next and you'll see it slides in to the left to make it even easier for you to see. Let's make this a different color. Let's have some fun here. Let's make it pink like that. Okay, so let's go back to prototype this. Take a look. So here are slide up and then I have a next slide left. And the reason why it's a slide left is because I have a back button and they want to go back to that page. So here we're going to go ahead and grab this button, connect it to this art board. And we want to make a slide right. Now will allow me to go back to the middle screen mental model. Now we have a full, complete prototype set. One more piece, I'll show you what I'm gonna do with that button there. So here at the sign-up, the slides up, I can close it, go back to sign up. I can go to next slide left. And I can do the right button here or the left button to go back, and it goes back to the screen on that, back to the home button. So a lot of your interaction design and prototyping should allow users to go forward on screens and to go back on screens. So that's how we've done it here. Okay, and the same thing on the close here, we want to close. This button should act just like the close button here. Takes me back to the original screened set. 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 it had many of these pages here. Let's go and copy this one. Let's make this over here. And we'll say next. Does another slide left here. This one, this back button here will go to the pink screen here. Slide right. The x will go back home, X will go back home. Let's make the art, the art board here on the far right. Let's make it blue. So you know, like that, they're okay. And let's look at this prototype now you can see the acts on all three of these screens. I'll 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 I have 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 me back to the initial first screen and then I'm back at the home screen. Well, let's say I'm all the way to the blue screen and I'm kind of done with this workflow x, go back to home screen. So pretty simple. You've just learned a pretty detailed, complex interaction in a very simple way. And the best way to learn this and just go play around. Just get into this, play with these interactions. Go press Play and see what they do and have fun with it. So we delete these. And as promised, I'll show you the prototyping and a half for each screen here. That makes this full Baba t 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 screen where I fill in my email and password. And then you can see that done button here. I have just say transparent square. There's no color and it's invisible. Takes me to the next screen here, no transitions. So what we can see is this order here. So we have the load at times out in a second. Like to sign up, I click my first name, I click the Email, a press Done, and that's pretty much it, um, for the beginning of Sign-Up. Once I press signup, we can see I have a transition that goes to the next screen that's called dissolve. So it's a really quick dissolve. And you can see it goes right to the main screen where I can order by 0 but t. The next thing I have here is when you get to the Add button, this is a slide up because it has the x and the x takes me back to this screen to close it. So you can see here, as I do they add, we've got the swipe up close, goes back to this home screen here, press Add again. And then once we're on this screen, we wanted to do here was make the prototype overlay. When I order what I want to change the regular sweet to a semi sweet. So what we chose here was the overlay and this is a slide up, so I can select the different options of sweetness. Side, press the Play button, click on the regular sweet. Look at the overlay, come in. And then from the overlay here, I've selected semi sweet. That takes me to the next screen where I changed the text here from regular sweet to semi sweet. So at this point I'm here. I'm actually here, press play a lot to semi sweet. The next page. Okay, at this point I want to click the tab mark tapioca button. That's going to go to the next screen where I have the active state selected so they can see what that looks like. Yeah, it goes to the next screen. And then we have the Add 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. So let's look at that and we press Add Bu. So next thing we have here is I have the Add button that takes me over to the checkout. The checkout button icon that takes me over to the checkout screen, slide up. Because remember we have the x. The x 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 enter your address. All right, And from there we haven't the right-click on the address, takes me to the keyboard. And then I do the Dunn takes me to the next screen here. So we 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 go. Next. Click on the address, get the keyboard, looks good. Keyboard back at the payment screen. And again, I can go back here to the screen. 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. I'll press Next. Slide the left so it looks like it. All right. So this here should take me back to the screen and slide left slightly. Right is what we want it outside left, excuse me. All right, so let's go ahead and look at that among the interests screen and I press next. I go to the inter payment screen and do that back button. Spite, right? Because back to the address screen, I can make edits if I want. Thank go back to payment. Looking good. Okay. Click anywhere in the payment screens, it pulls up the keyboard, have my information inputted there, press down on the keyboard, takes me to this screen and then I pay. And pay, takes me to the screen. It's over t. So there you have it. Let's go ahead and look at the final here, which is I've entered my credit card information has done. Go ahead and go to pay. And boom, here. Okay, next thing that's important for you to know is we have this complete prototype. Now, I can click in. I want to package up that prototype and I want to go out, hit the streets and test it with people. So first thing you need to know is Adobe XD has an application and you can download on your phone. And when you download that on your phone and allows you to save the prototypes that you create so you can leave and go test your prototypes out of the office. If you go to your phone, you go to the App Store and you do Adobe XD. You can download this for the iPad, this application for the iPad or the iPhone. It's free and it will connect to your prototype for you on your folder. Okay, if you're doing a web site and you need to test this on web, then it's pretty easy here. What you can do is you can go to Share link right here. Do publish prototype. And you can see I have already been published. I can copy the link here. And I can also press the share button. And it will take me to the prototype here. It will load it. Voila, Here you go. And now I can go ahead and get my web prototype for somebody. And user testing can also just send this link via e-mail here. Can like put it in somebody's email. They can open it up. Anybody in the world can come to this prototype. I can test with them. Okay, cool. So there you have it. I'm going to go and show you a little bit of what I've done with this file that we're going to cover in the next series of videos. And one of them is how to apply, apply visual design to this file, to this design here. So you can see here that I have some visual design. Add it to this experience here, but I'll show you how to take the wireframe to the visual design. But first, in the order of videos, we're going to learn how to do user testing and a design system. So as always, thanks for watching 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. Go out and test a clickable prototype that we made today. Alright, thank you. Bye. 10. Create a User Testing Script & User Testing Best Practices: Welcome to the next video in the how to design UX, design case study and user experience design one-on-one class. So far we covered a lot of grounds. We've done goals, persona's, we've done interviews, scripts and research and problem statements, customer journey maps, sketching templates, and wireframe 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. C can walk out of the wild, go around the streets. And these are tests with people with your mobile device. If it's from a laptop, how to do it from a laptop as well. And in this video, I'm going to show you how to do user testing. So you just can't have a clickable prototype is not enough. You're going to need a user testing script as well. So I'll teach you a script and I'll show you best practices when conducting a 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 on. But before I get into that, let me just share with you around why did 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 UX, honey. And that's the website I teach at the university here in San Francisco. If you click on the 2x2 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. A page that looks like this. So these are testing, it's really all about task tasking. You're going to task your user to do an action in the application. And then you're going to watch and observe. And 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 tag 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 to help you. So why did 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, you're accumulating risk every time you make design changes and 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 an ABT 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 can do tons of testing during the wireframe 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'd like to task people to do in your application. And you can come up with the scenarios. I'll get a little bit into these with the Bobo T example here in a second. Okay, then you can take a look at each scenario and look at the screens you're going to show per scenario. Then write questions that tasking guide the user through that specific workflow or scenario. Third one, right, a testing guide or a user testing script through each scenario of your application. And guide the user through the screens with questions relating to each screen and section that you're showing. So 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 our 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, joy, pains, and request went out there testing with people. And I'll show you how to take all of those insights and put them into a synthesis in a systematic way of putting information that relates to each screen. And it's no different than what 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 going to put the sticky notes according to each theme 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 synthesize those insights into themes and patterns so you can iterate. Okay? A lot of times again, before we do research or we do usability testing, we have an introduction. So introduce yourselves, the note-taker to say like I'm a designer or researcher in this case for working on the Bobo t 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. I'm asked him it's okay to record the session. Lot of notes just for purposes state how long the interview will take place. When the session will take place. You can say one hour. This is really important in this section right here, that 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 can say I'm working in the food and beverage space. And we have a and C, the things in bold. We have a early stage. The type 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, then restate it. 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 session, say and during this session, please talk out loud. Again. Number 5 here, let them know. Nothing they say will offend you. See, again, there is nothing you will see that warfare me. Please be honest. Feel free to have questions any time. There'll be five minutes at the end for any questions and then ask them, is there any questions before we begin? Turn on the recording device, start go and 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 or memory to get up, grab a picture of them. Okay, at this point you want to tag them to do something in the application. So what you're gonna do is you're gonna test them. Then you're going to watch them and make them talk out loud. And the questions that we have going for it are a series of safety 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 you've come up with. The user will just tell you around what things are confusing, What's nice to 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 XD prototype that we made earlier. I actually like to put a screen in the beginning that frames out the actual scenario or tasks that I'm tasking a user here to do. Before they get into the application. Start them with a reading out loud that caught 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 Bobo example task, which is sign up for the application. Order one bot with T was semi sweet, sweetness level with large tapioca. Put your address into the application and pay for Bobo t. Great. So I have that as well right here in the application. So I have them read out loud. 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. And they press 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 going to go back to our script here. And this is where you should have your questions here. So we've just tasks them to do the bulb at t task and see your questions should be the makeup the same way that we did the user interview scripts. You should have this screen or scenario here is the title. And you should have a series 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 is saying every time a new screen in 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 to prompt for them to talk out loud. The next questions I have here are the bokeh t selections. So this is the area of the design. When they get to after login and sign up everything. This screen here where it has over t selections here. So remember look at these icons here to add buttons, the photos. So this is where I have a series of 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 bobo chief labors that you order a lot. And then I'll say, What do you think the little icons on the bottom do? Kind of referring to these little icons to see them talk out loud, not to go and interact with the icons. Just go, tell me what do 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 a screen. And then you have the outro. So after year user testing is over, they've, you'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 them 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 wishlist 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 to turn you. Sometimes they just say like, Hey, the location coming, I'd like to order Bobo t That's what you hope for. The outro is a thank you for your time. All the notes and the recording are confidential and only be seen by myself in the team because there's payment involved. Make the transaction. Tell them if you'd like to comment, if it's okay to contact them again for further testing on the solution as well. On you can even ask if they have any friends that are interested in testing. That's a good approach there. And then you just say thank you and goodbye. Okay, so now I'm going to 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. It's best to record the audio with your phone here. Tests 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. So this means that somebody's on site with you and you say you have a laptop that you're testing on. You can test the screen recording with Zoom. Zoom is a tool that allows you to do FaceTime videos and you can also do sharing. You can also share the, the screen recording with QuickTime. That's what I'm doing right now to record these talks. And you still want to have your audio device for the audio as well. Zoom will do the audio with you. Quicktime will 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 an overall really solid application and the capability that it does. So these refer all onsite 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 the Zoom application. If you're interested in learning more, just go to zoom dot IO and you can go find information around how to use Zoom. 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. You can also press the record button in 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 a 100 percent conclusive. 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 going to 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, I 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 verbage. So if you find after a whole bunch of tests that your users are calling something in the UI a different name, the user interface, a different name than what's on the screen. Come back around and change the verbiage in the wireframes or designs and changes a verbage 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 and people lean in on something. It means they may like it. Sometimes when they lean back, they may not like it. Lean back in their arms folded to they probably don't like it. Tests the room though if it's cold, people tend to fold their arms as well. Okay, so narrow that question around. 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, what is that? What do you think that will do? And get their expectation? And then let them go ahead for say, okay, great, Go ahead and proceed. And then they'll tip and tap or click on the button. The walk-through, again, I've given you this already. This is the best opening line ever when your user sees a new screen, just walk me through the screen and tell me what everything means to you. One of the best things there. We'll get into the other one a little bit more advanced. Here's one that's great. So without testing, it's okay to make mistakes. Just don't run off and react immediately after receiving one negative datapoint on get validation on that negative data point to. 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, three to five people, then you can change the design. Okay? So with 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 or reuse sticky notes. So you have three people. We have no Naomi, we have joe Hahn and we have on here. And we've tested with three people so far. And these are all their insights, one per sticky note here. And what you wanna do is eventually go grab these insights and you can imagine this is a physical board, but it actually looks something like this. Here. You have the screens taped up to a board. You have this sticky notes here underneath them. Here's me, Designer here doing this together with the client. We have the screen. I'll be Insights below the screens, all the people here that we interviewed on the left. So I'm going to show you how we do this by, 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 say my Naomi said we are missing some of her favorite flavors here on this screen. So we can go grab that insight, put it here. And let's say she said she liked to 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 contactor texts this person that's going to deliver the Bobo of t. And we heard the same thing from joe Hahn here. So I'm going to put that next to that screen. And Anna said the same thing around the bow but T flavors set, we're missing a couple of 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 what 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 good practice. This get out in the wild. Go do your user testing. On. In the next video, I'll show you the basis of a design system. I'll walk you through what a design system is. And then we'll take that knowledge and will apply visual design to the wireframe that we created in the second to last videos before this one. As always, thanks for watching and I'll see you hopefully the next video. Bye. 11. Learn How to Create a Design Systems: That a video that covers how to build a UX design case study and user experience design 101. And last series of videos. We've covered a lot of ground here, but continued with the goals, persona's and research. Problem statements to wireframes, 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 learn from user testing as well. So the next video I'll have will be around applying visual design to your wireframe. But before I get into that one, I wanted 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 UX, this is the website that I teach at the university. And you click on this link, it will take you to a page like this. Um, scroll down to the bottom and you'll find the link here called the design system. Go ahead and click on that link and it will come to a page like this. Okay, cool. So design systems, really we're breaking down designs for engineering and we're also using a design system as a set of design rules, components, and styles that can be adopted by other products within an 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 UI elements. So again, these are a set of design rules, components that can be adopted by your product or other products could be within your organization, or it can be within companies within the image. 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, and pick up. Okay? So remember that your design decisions turn into UI 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 and an iterative design language will develop and will be used to bridge the gap from design and engineering. So you all want to have the same vocabulary when you're talking about to the user interface components and elements. And think of it. I like to think of these components and UI elements as if you're making a cake. And let's say Kc 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 UI elements. And all of those UI elements have visuals, designs to them and styles to them. In 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 can 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 of screens, designs duns and you start to reuse an element. He started to copy and paste elements. You stop at that point. And you should create a global component library that you can pull from as you design new screens. So remember in the last videos, when in the wireframe videos of how to design a wireframe, I showed you how to create a symbol and how it made it really easy to change that symbol color and style on one area. And it would change throughout a hundreds of screens that you got this and 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 a 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 first one 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 message is, what our error messages. What about marketing pages? One area of a design system. The other one is a brand guide. So how has your software connecting to the market? Do you have rules on color, rules on logos, to have rules on icons? And do you have rules on type? Next one is a component library. This is when I speak of lot. Um, how do you, how do we not create one-off UI elements? So we have buttons and Fields and drop-downs and modals. What's your visual language? How does your visual spark emotion? So what's your visual tone? What emotions do you come from your visual tone? What is the language definitions and what are your visual rules? So language definitions, how do you talk as a team? Talk about things that we're designing here. What are your visual rules? So those are lot to do with your brand guide as well. And then your style guide. This is the made-up of UI elements. So your color swatches, the breakdown of Eli, the space consistency, the typography system. And then you have the design language, which is really the rules of interaction designs. And these rules can be adaptable. So you have inter interaction rules, you have transition consistencies, you have usage patterns, and you have design and UI patterns. So anytime you're talking around any one of these elements here, you're talking around a design system. So 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 the click here, Here's the company I worked for Pivotal. You can go to the style guide dot pivotal dot io. You can go to the components and you can see all the buttons they have here. You can scroll down and see their buttons. Lots of a and this is a lifestyle guide. So if I want this, I can actually get the code. So you see this show HTML. I can now copy this HTML. If see this React, React is a visual framework as well. I can copy this code into my application, pretty solid home. And we have on 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. You have forms here. So I can see here's a user form here. And it goes on and on and on. It's pretty good UI system. When you think about a design language like an interaction rules and transition consistencies. That one here, material dot IO is really solid. So Google made this and it become here. Here's their rules. I like it because they give you good examples and bad examples, right? So here's how to reveal a card and reveal more information. It just kinda grows. Here, it flips. So it's too it's too heavy of a transition. The slip on the I look at this a lot. It's cool, but it's a lot where this is very gentle and nice and this is very abrupt, this system here. So you can go through all of the single, through gestures here and tell you they have rules on this. And all types of cool stuff that you can go see. Pretty cool here. Okay, the next thing I'll cover is the style guide. So this is a 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 OPT application, I'll talk around the action color. The color that is the most important action for the user to take in each screen or each section. And this should be consistent. So this one is our action color. It's called cool blue. We have what's called the hex color swatch here. And we can hand that to engineering and they'll know exactly what color this is by this code here, we have the secondary action buttons. This is the secondary action, say cancel, a cancel button versus a action color being a 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 have in the success color over here. They all have names to it. And that way we can converse as a team around these colors. So when we say Arrow 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 GO green. And then we're referring to this success color, these grays, we can use dolphin gray, we can use stroke gray, we can use hover teal, we can use Hubbard blue, hot orange, purple rain. I like that one. I'll bar blue, right? So these are a language we've created from color. And you can see here we have our primary colors at the top use for most of the application. Secondary colors here at the bottom we use for other parts of the application. Okay, So now we're gonna get into the topography rules. So here we have a series of what we call H1, H2, H3, H4, H5, A1, a2. And so on. And what this is are these are headlines, so these are 21 is going to be the biggest font, not necessarily a headline in your UI, but the one is the biggest font size in the application. H2 is secondary on the largest font size used to H1. Sometimes you'll have an H2A, which is we're using regular in this case, we're using light. In this case, h3 is not as big as H2, little bit smaller and a little bit smarter than h3, h4, and then a little bit smarter than H4, H5. And then we have A1 for paragraphs. So small text. So you have a1, a2, a3 here should be, it's a copy duplicate. So you can see here on the right, we've laid out this system. We're going to use Roboto Open Sans for BAD Open Sans. 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 more around topography, you can go to moments with typography. This is a website I've created and this was a talk I did for Adobe at a conference they put on called Adobe MAX. And this goes through a whole bunch of last systematic type design. What's best used for paragraphs and toxin on H1 and how to use an H1 and H2 for desktop, tablet and mobile devices and best practices, their sums it up. I broke down medium, the most popular web blog in the world and their type systems. And it covers a lot of ground here. I'll probably do another talk on Skillshare breaking this just on typography here. But if you want a chance to go get a sneak peek of all of this, just go to moments with You can see here is the URL. And you'll find a whole bunch of information on this. And so they haven't, there's this, there's some colors that reflect the style guide. And we have the typography system here. And then we'll get into more the component library. So we have buttons, we have hover states for the buttons. And we break down the types, the color, the color, reusing, the hex color here. And this is real code. You can get into this, you can copy this. You can open up the browser here. You can see the code here if you want it. And we have all our forms here. So we talk around the hover states and active states of our forms. And the error states have checkboxes. And then we'll get too much into the component driven design world. You can find a lot of that covered here in the pivotal material design examples. But one thing I do want to talk around is you can use space as a component. So here I have these little red squares. And when you have two red squares, there are 30 pixels, so each one is a increment of 15 pixels. Anytime 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, it has texts, but they're all space accordingly, like the icon from the top of this card is 16 pixels. And the text here, recipient targeted is a 120 pixels from the bottom. And you can see how I'm using this space attribute throughout my design. Okay, So there you have it. That's pretty much the foundation 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 in the next video, which will apply visual design to your wireframe. Let me give you a little sneak peek of what that will look like. Men that there'll be XD here. I'm going to go to that bokeh t design that we've done this whole time and give you a little rundown, will take a couple of these screens and Watson Visual Design to them here as well. Pretty fun stuff. All right, So little preview there, what to expect. And hopefully I'll see you in the next video on how to apply visual design to your wireframe. As always, thanks again and see you soon. Bye. 12. Do's and Don'ts with Design Resumes: All right. It looks like we finished up a lot of the classes. Again, we've done goals and persona's and interview scripts. Research. How to synthesize your research. Problem statements, breakdown of a customer journey, map, sketching, wireframing, clickable prototypes, user testing basis of design system and applying design to your wireframes. 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 created this for them so they can see what a good design resume looks like and what 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 haven't 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 looking at it portfolio. Then 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 allDay interview and hopefully that designer gets to join our team and we're going to 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 TextField have alignment and are they not all over the place? That's the 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-designed 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 is talking 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 jam heart. And here's some examples on the right and some call-outs of why. It's a good resume. So it looks custom and it has nice layouts, clean. It has consistent spacing is done all over the place. It has nice topography hierarchy, spelling looks good. Has nice alignment, uses more than one column grid. Has linked to portfolio. You can see as portfolio link right there. Let's go take a look at it. Another good example. Here's one familiarly Evelyn itself branded. It's nice and easy to read layout. There's good use of type. Type. Type hierarchy has nice alignment, clean spacing that looks really organized. Okay, let's go look at what a not good design resume it looks like. So why is this one not so good? The layout is not clean and it's hard to read lot going on. The spacing isn't consistent. Sloppy topography hierarchy. The alignment could be better. You can see things are often line with the bullets. And it uses a one column grids, one giant grid. Let's go look at another one that's not so good. Why is this one? It looks like it was made in Microsoft Word and not a design tool. Black is the only color being used. The type hierarchy, hierarchy is not that good. It's a little better than the last one, but still not that good. Spacing isn't consistent. See lots of weird spacing in between here. The layout doesn't seem custom. To get more good examples here. Lots more good examples. Very clean. And see that two column grid here, right column. And look, there's still using black for all the texts, but they're topography treatment is really nice here. One on 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 Hello, has a nice introduction of personality. It's one Jane Doe, it's a template. It's 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 byte Molina. Nice and fun, who couldn't use of colors and like the orangey reddish color with the teal blue. And here's one by a friend of mine named John. John obey are really solid resume here to a lot of time crafting this. Okay, let's go look at some more. Not so good examples. See we just have layout colors are a little bit weird. This red and blue seem to vibrate a little bit. And the color palette, This Mary Cunningham kinda all over, not really, could use a little bit more hierarchy. It's not that bad though. This one over here and the teal text spacing is kinda inconsistent all over. Hard to read alignment, topography, hierarchy. It's this template here, just one giant column. Right there, you have it. So there's the basis of a lot of good examples of really good crafted resumes and not so good project resumes. Hopefully that will give you a little bit of a guideline. As always. Thanks again. And if you want to go check out the last video of this series, 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 UX process. Lot of methods we use how to craft a good design resume and what a good case study looks like. Alright, hopefully I'll see you there. Bye. 13. The UX Design Case Study Outline: All right, welcome to how to build a UX design case study and user experience design 101 classes. Cool, we're at 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 persona's and then create user interview scripts, conduct research, synthesize your findings, write a problem statement, create a customer journey map, do sketches, make a wireframe, make it 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 wireframe. 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 you need to do to make it 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 going to 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. We're going to start here with UX honey and UX This is the site that I teach at the university. And if you click on the UX to 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 we'll hit the View button over here. And it's going to take us to the outline of a good case study. Then I'm going to show you a whole bunch of examples. So you can see over here I have one example called presses this side I did for Barnes and Noble, how to create a book years ago. And another case study for a, what's called a SUV cooker for a company called ANOVA. So I'll show you the examples of what this looks like. But first, let's just go through the outline. Similar 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 wanna do is you want to show the wow, this is the screen of the final product, the most beautiful screen that you have. And it can be interactive, it can be a video, but show the product. So the final product here, but what you wanna 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 contexts, give the product name, the company mission, show the logo, showing your role in this. And you can make it visual user design craft and make it visual. Then show the house, talk a little bit about your process or you can call it the chapters of the user experience work that you did research and then you went and did some problem validation and you sketch some ideas, you prototype some ideas and tested you, fouled up the fidelity, the design and went visual. And you can call those chapters, you can show it visually, you can show your process. And remember in the beginning of the videos, we talked about business goals and product goals. This is where you show them, show the business colors, show the product goals. Then talk about the problem that you're solving and why show you can show a little bit of the problem statement of some times this is the invalidated problem. And then you go learn a bunch of research and do a validated problem. But you can talk a little bit about the problem and the mission you're on. Okay, next thing you wanna do is introduce your users. Show the persona's, The talked about earlier. You can even show pictures of the users if you want to. Remember to highlight their problems, highlight their current behaviors. We had shelled a little quote bubble that I taught you in the persona video. And then we talked about the learning goals and the usability scripts. So you can talk a little bit about what you plan on learning. When you go out and do your research. You could 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 talking to people out on the streets or the boss 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 of the case study. And remember I showed you how to take the sticky notes and do your research synthesis and also look for patterns. This should be pictures of those sticky notes. There should be inside here typed up that I can read. There should be patterns that you're calling out in this section and what you're learning on show the validations. What kind of problems did you validate? One of the things did you learn from your persona's? 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 this. The solution that we're modelling in the customer journey. Then you can show your sketches, your solution concepts. You have any storyboards, paper prototypes. And then show the wireframe designs, show the screens. Then show the user testing. So these are the pictures of you going out and this 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 are 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 as well. These are your validations, these are your learnings that can map to 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, showing your form fields, showing 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 mockups, show the workflows. 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. So 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. What's called look at a couple of examples of this. So if I go back to the user to UX, I have a link here called the case study example. If I click it, We'll go over to the press site. This is a bookmaking application that I did for Barnes and Noble couple of years ago. And it goes through most of what that same outline that I spoke of. It starts with a little bit about the company and the mission and my role. We start with a little kickoff 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 a more fun and illustrative and a calling out their behaviors, their needs, their goals, their pains, persona. And I had my learning goals are my assumptions here that I want to go learn about. And here's the learning goals that pertain 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 with people's houses and talk to them. And here's some of the quotes that they have. Since the things we learned about them. Here's our synthesis, all the sticky notes, all the insights coming together. Theme them into topics here and patterns that we found along the way. Here's our learnings and finding, here's what we were right about, here's what we were wrong about here, 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 persona's 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 online and turn that book into a physical book and have it to them. So they start with a digital book and the platform they're going to 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 he 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 erroring. So we all got together, we sketch concepts. We made a wireframe design. Some concepts and some wireframes, we modeled it out. Here's how to preview the wireframe if you want to. We had questions and assumptions per screen that we want to learn about that I'm showing you here. And we did our user testing and untested with a bunch of people. We had our learnings based off the testing. They made decisions based off the testing and what we learned about. Then we dialed up the fidelity of the design. You'd see a couple of screens here and help me solve this complex process. Some of the error cases that could happen here. And we get some marketing pages and then check it out. I can take a link. I can walk over to the actual website or the clickable prototype here. So we have the marketing page here that we made. Now let's get right into the product. This is the final visual designs. So first it's going to ask me and 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 whitepages, trim size seven by ten, and it's going to be about 0 to 50 pages here. Let's go ahead and call this Leslie's book. The project name that I have. Here, I have a calculator calculates. This is going to 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 going to have me create an account. So I'm going to create an account. And here's where it's asking to upload the interior of my book. I can hover over this side here. This is how we covered the error cases. And I can see and learn about margins and images and embedded fonts and what trim them look like. I can upload my PDF. You can see it's uploading, Let's say I had an error, but it does, it takes me back in a highlights the error here. Pretty interesting there. So let's go back and upload my book. Let's go to 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 by images would do well. Where they're going to get cropped at how to embed fonts. And I upload the cover here. Now I'm going to go to the back cover. I can hover on the left here to get the same information. You can see we put a bar code here. Upload the back. Now I can do my spine. And look, here's my book with the barcode and everything. There's my book cover. Looks pretty good. And then I can get into payment here, put my shipping details, put my payment details here, and I can purchase it. And we'll law. There it is. That's the final product there. So that's one case study example that clicks over to the final product. Let me show you another one. Let's call the nova. This is a SUV cooker. Suv cooker is a device that cooks your meats and vegetables and fish in water. You actually put this stuff into a, you put your piece of meat into a Ziploc bag and this device will cook. I 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 meet 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 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 that we got to business goals and I roll. And we talk about this little scenario around scheduling a cook that we wanted to learn about. This was to place your meat into a bag, put it into this device, work, and you would schedule this device to turn on. Maybe about five or six hours after he went to work. 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. Ha, well, 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. So overall, Here's all of us, the team getting together. We're going to introduce the persona's now so little bit about each persona. We're going to talk about the learning goals that we wanted to learn about. And we went out and looked at doing some research and some testing of the initial assumption that we went out to learn about. We use a customer emotional journey map that I showed a video of in the past series of how to do this, to 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. I read one out loud. One person said, I'm gone for ten hours now You sure that ice will keep the meat fresh all day and I won't get sick if I eat this meat. So a lot of people were hesitant to do this. So we eventually decided to pivot do a little bit something different, which is just a nice onboarding 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 neat. And then 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 piggyback 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 wireframe. You can wireframe designs. Who went out and did some usability testing here with folks. We did some synthesis. Here's what we learned. And then we did more iterations and the collab more together. And here's the final lab. So I'll sit back and you can take a look. It's going to connect to Bluetooth. Connect your phone to the application, Bluetooth. It's loading to Bluetooth. You'll see here it's going to be success, success. And I go to the home screen of the app. I can start a cook immediately or I can go to the cook guide. So I click on the Guide. Let's say here I want to cook a piece of steak. Site, go to the steak. And let's say here I wanted to rebuy. So I click on a rib eye. And here I have the ability to set the time and temperature based off that doneness. I want this thing well done. And look, I press the Start cook button and boom, it starts set SUV cooker up and you're cooking meat. So that's pretty much it. So I showed the wow at the beginning of this case study and I showed the end experience at the end of that case study. All right, so those are all examples of the good case studies. If you want to find this one, it's at my website at air and Lawrence I'll go to the homepage here so you can see it. The site. Here I am. And so you can find these case studies here in this website or in more it's You can also just Google me, Lawrence, designer, and you'll find this website as well. Okay, So that's been quite the journey. 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 in work. And again, as always, thank you for watching the classes. I really appreciate you sticking it through. If you've watched all 13 videos. That is really great, really awesome. I applaud you. Thank you so much. My hope you've learned a lot. And hopefully I'll get some more videos, go in here soon and we'll give you some more content. Again as always, thank you so much and goodbye.