Transcripts
1. Class Introduction: Welcome to the user
experience design course 101. My name is Erin Lawrence and I'm a Principal UX designer and founder of a UX agency called UX honey in San
Francisco, California. I'm also a UX instructor. Ryan teach advanced UX design at the Academy of
Art University, also here in San Francisco. Alright, let's go start with a high-level overview of the
introduction of the course. And I'll cover all the topics
that we'll go through. 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. 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. What's the difference between the common UX and term
and UI terminology? I like the analogy
which is a cookie. User interface design
in the analogy of a cookie is the
actual cookie itself. It's how it looks. It looks chewy, it
looks chocolate. He it's not neon green and it doesn't look
like it's gonna 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, I see the cookie. It's nice and warm, chocolate goodness in it. And then I eat it. When somebody asked me
How was that cookie, 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 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. I hope that's helpful.
But just in case, Let's go deep dive into
this topic of UX and UI. What is successful UX? Successful user experience
design is connecting business goals to customer motivations
and creating 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. We're gonna do is
we're going to do user experience design 101 overall, this is the same curriculum in class that I teach at
the university level. The outcome of it
is a case study. What you're going to
learn, all the methods and the tools needed to make a solid UX case study. Let me go through all
of the things that we're gonna go through
in this class. 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, how to 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, let's go take a look at all the class material
that we're going to cover in the next
round of videos. I'm going to close
out my preview. I'm going to come
to the case study. I'll give you the case
study example at the end. 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. 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, is the people you do
design reviews with the risk that you
may face and how to mitigate those risks. The next thing we will cover
is we're gonna 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 cross 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. I'll teach you how
to build a script. 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 will also give you the
interviews best practices, 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. 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 statement. So after you've learned around the people and the problems, you can restate the problem. That way you can go and design solutions around these
validated problems. After that, we're going to learn the customer journey map. You can come here
and you can map out the journey you're gonna
put your customer on. 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 it 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. What we'll learn here is
called the value prop, kind of looks like this. We'll learn more concept
frameworks like a four up. Learn another technique
called the picture frame. I'll also point you to
other websites 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. I'm gonna come over here. I'm using Adobe XD right now. And I've created a
wireframe workflow on how to deliver Baba t 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. Loaded. I'm gonna do my
firstName, lastName, I email them and sign
up for the application. I see the sign up. I can 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. I want large tapioca. I'm going to press Add. I'm gonna go check out. I'm gonna see how
many Bobo tea drinks I would like to order. Just one is fine. I'm going to press Next. I'm going to put my
street, my address in. I'm going to pay
for this baba t. 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 Baba 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
with user testing script. 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
out of approach one, what a style guide is, it has lots of dive
into here as well. Once you understand
that we can take the Bobo t 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. I'll go through this again
in a more visual way. I signed up. I could see how
the Buddha t, They're sweet. I want a regular milk tea. I want it with regular
set, our semi sweet. I'm on 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 usability testing. I press Next, I put
my address down. We also learned people
wanted it to be text when they're Baba t was, was gonna 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 got five
minutes, two minutes. And it's almost there. Yea, I have Bobo t and I get the text that it's delivered
at my front door knocking, go meet the person Apple. Wha, what you could do at
the very end of the class, 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. You have the wow image, the final design
that you've did. You can do a little
bit about yourself. You can show your goals, the product goals,
the 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. 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. You're going to
sketch out ideas. You're gonna do customer
service, customer journey maps. You're going to create
the wireframes like I showed you in the
Bobo t 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 learned during user testing. You're going to 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. I'm excited. I hope you are. Go ahead and check out all
the other videos and we'll do a deep dive into each topic
that I overviewed with you. And I'll end on my website here, Aaron Lawrence, design.com case. You want to see more of my work. And I thank you for spending
the last 20 minutes with me. And hopefully you will
enjoy 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 honey.com. You can see the logo right in the center. I will also have documentation attached to each video that you can download and use for each topic. So let's go find where you can learn around the kickoff meeting and the goals and UX honey.com. 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 honey.com 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 honey.com. 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 honey.com. These are your best practices based off interviewing dynamics. So if you have a two-person dynamic, meaning there's an interviewer and there's you, there's only two people. Make sure you record with audio. You don't you can't take notes and ask questions to the interviewee at the same time. So what you're gonna do 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 UX.com or sorry, UX honey.com 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 honey.com. 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 honey.com, 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 typography.com. 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. How to Apply Visual Design to Your Prototype: Alright, welcome back
to the how to create a UX design case study and user experience
design one-on-one. Alright, so we've
covered a lot of ground from the beginning
of learning how to set goals to creating personas and user
interview scripts and going out and conducting research to synthesising
your research too, how to write a
problem statement. We learned some
customer journey maps. We did sketching
templates and frameworks. The last series of videos, I covered how to create
a wireframe design. How to create a
clickable prototype, how to take that
clickable prototype and do user testing and best practices when synthesising your user testing
insight, insights. We learned on the last
video how to create a design system and the
basis of a design system. Now I'm going to
teach you how to take that original wireframe design and apply visual design to it. So let's talk a little bit
about what is visual design? Visual design is the
study of creating, positioning, graphical
elements for visual intent. It's a continuous study
of layout compositions, colors, typography,
and visual mood. It takes lots of practice
to get good at that. So remember if you're starting out and
learning it takes time. So don't be too
hard on yourself, just keep practicing and exploring visual
moods and treatments. Get inspiration or help you. And I'll give you
a little bit of a tip here before we jump into creating visual
design to your wireframe, I'll show you some
methods that I use. So some tips here before you go out and do visual design
is described here. Visual design with adjectives. It will help you learn
a little bit more of what the goal is of
your visual design. So some adjectives you can
think of is you can say, I want something visual to be
fun and playful but modern. Then you can take
those adjectives and you can go look
for mood boards. These are visual examples that
apply to those adjectives. It's also best to create a folder to put your
visual inspiration. So wherever you find things
that are interesting or cool, or when you're out
in the wild and your own life and
you see something, take a picture of it
with your camera on your phone and place
it into these folders. And it's also good
to practice just exploring lots of different
visual treatments. Let me show you a
little technique of how to come up with adjectives and how to apply a mood board to some of those
adjectives here. Okay, So you can think of the visual makeup
at the beginning as just words like describe your mood that you want
from your visual design. In this example, we have
talked a little bit around something that's
modern instructor, structured and credible
and aspirational. We describe these adjectives, we turn them into nouns
by doing mood board. So here's an example of some
designs that fill monitor. Modern color palette. They're very clean, good layout. Look at this little
iPhone app over here. This is real work. This is real work I've
done for a client. Here's some examples that
made it feel credible, like a bank, but
really trustworthy. So there's a lot
of blue in here. Blue is a trustworthy colored, so it's a color that
hospitals use and banks use. It's very calming color. These little examples
here visual elements apply to the credible. So the next thing
here, some structure, I can see everything is kind
of boxed out as grids to it. Those very structured. You can here see
some aspiration, just the photographs,
the treatments of sun, sun rays and some evening
time shots and some sunsets. Just very inspiring. We were trying to capture
that in a visual way. So where do you go to get
a lot of these moods? A couple of places I like to go. First is I like
to go to dribble. You can see here tripled. It has three Bs and it DRI BB. It's just a place
where designers go to post cool things
they've done. You can do a search over here. Let's go look at some screens. And you can just see
many different ways to have a screen design here. Pretty interesting. You can get inspired by just looking
at this type of work. It has animated gifs on it, so you can see little
interaction details here. An interesting place to show off and iPhone
there. Let's look at. This one here. Pretty cool. They're just lots and
lots of things to go get inspired and look at and help hone in
your visual craft. Okay, another way
that I like to find mood board examples is I
haven't inspiration folder. So again, this is a folder
that I've had my desktop on my computer and I
filled this up with anytime I've ever seen
something that inspiring, either it's coming from Dribble, me and my in the world. If I see a website on anything, I just pop it into this folder. And let's go through
a couple of them. They're just full of
different layouts and moods, even illustration styles, logos. And anytime I get
stuck on something, I usually tend to
open up this folder first and I just go through
it and it just inspires me. And it's full of tons of beautiful examples of design that other people did that
I wish I could do two. Yeah, it goes on and on
and on and on and on. I started this folder, I believe in 2009. And it has lots and lots
of information on it. I'm just clicking through
some of the areas right now. Let's go through here
some ones I found 2015. Lots of cool, just
interests layout, some ways to do
different designs. Keep going and I'll
show you maybe a couple of more examples here. Yeah, it can be iPhone
apps and websites and logos and iPad applications, animated gifs,
editorial layouts, all types of good stuff. So just best practice to just put all of your inspirational material
in a folder and just develop it over time and come back to it
when you get stuck on the visual design
or help you just to get unstuck and get inspired. Some best practices when
developing your visual design. Let's go look at the thing that we're going to make today. I have a video here
of the final bow Betsy app that we've
been doing all along. And again, this is a application that's been a theme
through all the videos we can see here. I'm going to go ahead
and order some baba tea. I like that regular milk tea. And have the semi suites. Large tapioca. Press the Add button here. Go to the next screen. But in my address. Next, put my credit card
information in and boom, here I am and there's Bobo
come into me five-minutes, 2 min, and I get bulbar t. So really neat. So we're going to
learn how to take your wireframe and we're
going to learn how to apply visual design in a way
that would look like this, will be even maybe have
some fun and we'll use a different color
besides the pink. Maybe we will use
some blue here. So without further ado, let's go ahead and open up Adobe XD. You can see this was that
wireframe that we built out in the last video. So if you want to learn
more around building out this wireframe and how to make the prototype here that you see. You can go back to the video. You can learn how to
make this design. Learned some of the
prototyping techniques here. What I'm doing right now, then I have this all
wireframes and prototypes. But let's go look
at taking a screen here and applying some
visual design to it. So the first thing I'm gonna do here is I'm gonna go ahead and start with a side-by-side
of this intro screen. And we're going to
apply some color to it. I'm going to keep the
black background. I'm going to keep the
text a little bit here. I'm going to keep it white, but I'm going to pull
it back a little bit, little bit transparency on it. And it looks nice. But I don't think
that I'm gonna do here is I'm gonna go ahead
and put a line at the top. This has a visual style. I'll make this line why? I don't want it
too strong though. So here's a key
thing when you're doing some visual
design work is you usually want your communication to be the strongest
point on the page. That's what your
design is to do. It is to serve visual intentions and visual communication. So see right now how the
text is a little gray and this line here is white and
it's stronger than the text. We don't want that in the
hierarchy realm of our visual. So I'm going to push
back the opacity of these lines just so
you can barely see it. Nice. That looks good. Okay, so I'm gonna
go ahead and push back maybe this
loading baba as well. I think the text
size is fine on it. I'm going to push
this back as well. Cool. And I have this
icon of a probit t, but I have it here
in Illustrator. So I'm going to open up
Illustrator and go to my assets. And you can see I
have all the assets here to make up this
bulb at T designed, even this one here, the pulpit T itself. So what I'm gonna do
is I'm going to place this bogus t over
black in Illustrator. And I'm going to start making it white first,
so you can see it white. Then I'm going to add the color. I know in the, in the example that I showed you, we use pink. Let's, let's have some fun. Let's use blue. And I'm going to make the
straw blue as well. We'll change it up a little bit. Thanks. Okay, so now I have
that in my Illustrator. I'm going to go ahead and
go back to OPM, Adobe XD. Before I do that,
I'm going to copy this bulb of t.
I'm going to go to XD and I'm going to place
this bulb a T on the screen. It looks pretty fun. This
downsize it a little bit. Cool. Alright, cool, that
looks pretty good. The next thing I'm gonna do
here is we're gonna go to this foreign page here
after the loading screen. And we're going to come
over to this one here. It says the Bobo,
not copy the screen. Delete some of this
here, keep this in view. And I'm gonna go ahead and
make this a dark background first so I can make the
fill here on the right. Make this room dark
just like that. I'm going to grab
this text here, the lastName, I'm
gonna make that text. Let's make that white. And let's make the texts that
I'm actually adding here. I'm going to make
this the blue texts. I like that color, so I'm
going to add that color into my swatch palette. And I'm going to just
keep going through here making these changes. Let's go ahead and
make that blue same with the e-mail here. Lights and go ahead and grab
my email. Make that blue. Same with the password
and make this white. And go ahead and make
this one here. This blue. There's a couple of lines here. So let me grab all these lines and make this line is white. And I have a very
light opacity on it. So you can see they're
white like that, but that's too strong. I want to highlight that
visual communication here. Okay, and I had an old
logo here at the top. But before I do that,
let me just put the call to action text here, Texas telling you what to do. I have this login. I'm going to go ahead
and make the login blue. And I'm gonna make this
sign up here as well. We're getting there. I'm, let me go grab the
old logo from Illustrator. So I'm gonna go over
to Illustrator here. I have this logo
and I copy it over, paste it into his lack. Second reverse some of this. So I'm going to make
the text white there, and I'm going to make
the talk bubble whites. And I'm going to make
the knee texts black. When I copy this over. I'm going to paste this logo. Here. Looks good. It looks like I shouldn't be
touching the thought bubble. The me, look, I can
make changes right into Adobe XD, which is nice. Let's go grab this logo. Let's go put it back
in the loading screen. How about that? We'll explore a little bit
where I talked about earlier. It's all about exploring things. Yeah, let's go do that. That looks nice. Let's have some little bit of fun
with the logo here. Let's make this, let's make
this one color here more. Peak. Yeah, That's kinda cool. By a little bit more official
design at this screen here, just for fancies, we're going
to grab this pink here. I'm going to make
it a color palette. Add that to my
color palette here. So now I have pink coming right? Let's select the loading texts. Make that P pump up the opacity on it.
Yeah, there you go. That looks fun. I'm liking where this is going.
What about you? Cool? Alright, let's actually
put the, try something. Let's put the opacity down
here and the cup here. It looks cool. Alright, So what we got going on here is I have a
couple of things. We're using the color blue. And we have blue for the forms, and we have blue
for the buttons, and we have the blue
for the sign-up. But let's make one
strong action color for things that
you can click on. So let's go make these pink. We're going to keep
this theme throughout the designs that we're doing. We want one action color to represent all of the things
that you can click on them. Not all of them, but most of the things
that you can click on the primary
actions per screen. So let's go to the
next screen here, which is the big screen. This is where you have all of the makeup of the homepage of
the bulb of t application. And just like I did with the
login or the sign-up page, I'm going to copy it over here. And I'm going to
show you a little bit of how to build this up. I'm going to delete some
of these elements here. We're going to
start from scratch. See this little
dotted line here. This indicates the
below the fold. This is the content you
won't be able to see when you load this up on
a screen. So I can go. Over here to the top
right where it says Play. I can look at this prototype. And you can see, I
can see the tab bar here, it's in view, but if I move it below the fold, see how it goes away on the
viewer on the left here. So that's what that
little dotted line is indicating to me. So let's go ahead and start
by building a little bit of this OPT application
tab bar out here. So you can see I'm going
to delete these icons and I'll go get them
from the Illustrator just to rebuild this out. I have the black bar here. It's just a black rectangle. Over here in the top right. If you see where my
mouse is pointing, says fixed position
when scrolling, watch what happens
when I don't have that checked and I
go to press play, which I can view the Mach. And take a look. When I scroll this
black bar moves up. I don't want that. I want that fixed. I'm gonna go ahead and I'm going to press the checkbox here, fixed position when scrolling, press play and look, it stays in the bottom. What I'm tabbing or
swiping, scrolling down. Let's go back to Illustrator. I'm going to grab this
little icon here, the bulb Etsy icon
with some color in it. I'm going to go back
to the XD application. I'm going to paste
it. The wrong thing. Let me go back over here. Let me just grab the bulb of T icon and I'm going
to paste it here. Let me get rid of the viewer. Paste it right in the center
of this bar here and you can see it helps guide the guides helped me know if it's centered. Alright, it looks good. Let's go over to my
Illustrator file. These are all my icons
that I need Live. Let's go grab this
little profile icon. I'm going to make it
white in Illustrator. I'm going to copy
it. Come over to XD. I'm going to place it,
shrink it down a bit. Alright, I'm gonna
go ahead and group. It, makes it easy to
select the group. I'm going to downsize
it a little bit. Place it over here. Let me go grab the other icon in Illustrator here I'm going to go grab
the shopping cart, place it over in the back, black here and make it white. So I can see it. Go back to XD. I'm going to place
it here on the tab. Bar mixture is in same
size position relative to all the other elements.
And out visually. Now, what screen rebuilding
is the home screen, it's the bulbar T icon screen. So when you're not
on that screen, I'm gonna Ghost these
sections out a little bit. I'm going to do the
opacity at about 50, 45 per cent should be fine. Okay, Let's go
ahead and make sure these have the fixed element. So I'm going to grab them
and check the box here on fist fixed position
when scrolling, I'm going to group it Command G to make sure
that it's grouped. You can also do it
by doing group here, right-clicking and doing group. Let's just preview
that really quick. Makes sure that it
stays on the bottom. It doesn't see what happened. I think it removed it
when I grouped it. So let's do it one more time. Fixed position when
scrolling, Let's preview it. And it stays on the bottom. Nice. Okay, for
the sake of time, I have these photos and the
example that I showed you, I have them in photo. So you can see I'm gonna go into the high fidelity prototype of already built out that's using P or having a little more fun
than one we're building, we're going to use blue here. I'm just going to grab
these photos just so we have them here and place
them out to the side. Alright, so first thing
we want to do here, so let's go grab the skeleton to the other art board here. So the silver. Just for now. Here's the photos. Great. Let's go put this regular bogus. He born here. And you can see I
have the text here. Let's just go copy this over. And that looks about right. That's pretty good. Let's add a little color
style to this black. So whenever I use Grace, I like to do a
little bit more of a bluish gray with some
blue into your grace. Always helps a little bit. Alright, that looks nice. Let's go apply this
Add button over here. Alex. A little good.
It's a little strong. So I wonder if we
even need the square. Maybe we just do
the texts there. We'll make this a little
bit bigger here so I can go to the text
area on Adobe XD. Let's go maybe 25, let's do 27 font size. Okay, Let's nice
and big and nice. Okay, cool. Let's add the next one in. Going to add the
next photo here. I'm going to use the same text
just for the sake of time, I'm going to copy this over. One thing I'm gonna do
is push this to the top. So see where it says
Bring to Front. I'm going to bring
that to the front. And I'm going to copy it and move it down
here just like so. It looks good. I'm going to move
these add buttons a little bit down there. Okay, let's put the next photo. And we want this
below the tab bar. So when everything is
scrolling below the tab bar. And again, I'm going to
copy the overlay here, but it will run. And then let's go put the, try milk tea over here. Hopefully you're getting hungry or thirsty for some bulb of t. I'm going to make sure that this elements
here is on the top. So bring to front,
bring it down. Okay, and now I'm going
to grab this tab bar, make sure that it's on
the front of everything. They still have a little
bit of space here. To have some fun, we want to show to the
viewer that we're going to have some more cheese coming in. We're not have all the flavors that we could have right now. So I'm gonna do a little
black section here. I'm going to bring
it to the back. And it's actually a little
bit of bluish black here. So kind of going back
to our theme there. Some blue icon over here that
likes, yeah, there you go. Let's go grab this one here. Let's paste it right
in the center here. See this more flavors. This is copy that. Let's make this more flavors. Let's just make this blue. And let's make this
one, keep this white. So we're using mostly
this pink color here for action colors. So let's not do anything. Peak here is keep this blue. I'm going to push
everything back here. Control Shift left bracket. Or if you're on a PC, it's Control Shift left bracket. If you're on a Mac, it's
Command Shift left bracket. But I'm also going to
do it the other way. Send back here. Let's go ahead and look at now, I'm going to go over to
the preview section of XD and see that
video and look nice. I'll scroll through
my fovea t Here. I got some flavors coming soon. It looks a little too
tight to the tab bar. So let's go back over here. I'm going to close up
the preview viewer. Let's move this art board down a bit and give
us some more room. Grab that, it's more flavors
and bubble tea here. Center it in space. And go ahead and go back
to the preview mode. Make sure I'm on the
right art board. And great. I'm previewing. Nice, looks like a
nice visual so far. Cool. Let's go to another
page that shows what happens when I press
the Add button here. So at this point, let's go look at that page
in the wireframe section. So it looks something like this. I'm going to go
ahead and copy it. So that way we can apply the
visual design next to it. So you can see on
this new screen, what I'm going to
do is get rid of the old photo that I have here. And I'm going to grab
this new photo but over T. And I'm going to make
a rectangle over the top. To make this rectangle here. Where I could see a
little bit of that bulb, a T. Based off this line
here on the next art board. I'm going to select
both of these elements. I'm going to come up
to the top right here. And I'm going to do
the intersect areas, the little two squares
that intersect. And boom, I can
crop that bulb at T and I can send it
down a little bit. Great. Send it to the back
of the page now. Looks good. Let's
go ahead and remove the white X mark there. I'll go get a color
one that we could use. Okay, so let's go back to
our initial thinking here, which was that the
areas that are clickable are areas that we
will make that pink color. So let's go and make all
these little rectangles pink, just to indicate that these
are the clickable areas. This little white is
kinda strong here, so let's go back and make just a white outline
here, the square. Let's make that, make that 30%. I'm going to grab the
other one here as well, make that 30% down. You can see they're overlapping. So we don't want to
do opacity there. We actually just want
to make it gray. So let's go find a, a nice gray that we can use
that has a little bit of blue in it. Stronger. There you go. Let's grab that. I'm gonna go
ahead and make that a color swatch so I can easily
redo that color as well. Let's select the next gray. Now we're highlighting the
content, which is the milk, the regular T with ice. All right, that looks good. The other design
that I showed you, we had these buttons here. They were outlined. So let's go ahead and
make these outlines. They look like they're
filled right now, like they're active states. So I'm gonna click
into this and remove the fill. And you
can see I have it. Symbols, so they're
all going to do the same thing that I want
them to do, which is great. I taught you how to do symbols
in the wireframing video. So if you're curious around
how to make a symbol, you can go watch that video. But I have this symbol
library here on the left of all the buttons and everything that I've
created in this design. So I'm going to make the
stroke a little bigger when they get to see the
two looks like great. And see this Bobo tapioca
texts. Let's make it white. Highlight that content. Great. Okay, and you can see it's changing on
the screen next to it. That's because I have all
of these as a symbol, which makes symbols grade is watch all three of
these add buttons. They change color as I
change them in real-time. That's what a symbol does. So it's really, really
handy to do symbols here. So let's go ahead and remove some of the app button
here that I have. Let's go grab the
Sign Up button. Let's keep it
pretty simple here. The pace to sign up button then before I do that, I'm
going to make a symbol. I'll show you
really quick how to make a symbol of the sign-up. Just add the plus
button here to symbol. Let me just grab the texts. And I'm going to call it the primary button
here on the left. But whenever I want to use it, I can just drag it
out to the screen. So let's go ahead and go back
to we're designing here. I'm going to grab the
symbol and we'll place it onto this art board here. I'm going to put texts
by sign-up button here. Yeah, that looks good. Okay, so we have a close icon here. Let me go grab the icon that
I have in Illustrator first. So I have it in black over here. I'm gonna go back to Adobe XD. I'm going to place it. Looks kinda big right now. Let's shrink that down. Let's make this a pink as well. And now you can
see on this page, everything that is
tappable is pink. So I'm using the primary
most brightest color to indicate to the user what is tappable and
what's not tappable. And that's a key aspect when
doing user interface design. Use your primary color. Use a bright color,
make it strong, and those are the
primary actions that you want to do for your user. So I'm gonna go ahead and
delete the screen next to it. Oh, we forgot this text here. Let's go ahead and
make this text block. Cool. It's pretty good. Okay,
So I'm going to delete this page here and
I'm going to make another button for the filled
state of this tapioca. Let's say user taps on
this tacky tapioca here. What I'm gonna do is
first detach it from the symbols because I don't want to change all the symbols. I'm going to select
just the background. I'm going to fill it. I'm going
to fill it with the pink. Cool. Looks good. It's almost like the user
had tapped this button. Alright, so we're
getting along here. So you can see how we've created a pretty unique form
filled page here, sign-up. We've created the
homepage here and add styles to our photographs
and the overlays. A tab bar I showed you in
Illustrator, it's best. All of your icons in one area. If I even wanted to, I can
copy all of these icons here. And I can place them
into XD over in just an art board here so I can take them up,
they come in vector. I can change the colors. If I want to see, I could change that arrow. Let's keep going along here. I'll do one more for you. Is this map screen. I think this match
green is really cool. So let's go into the screen. Let's add some love here. So again, the strongest communication at this point is that we have
the image of the map, but it's also the
estimated time of arrival. Let's go ahead and grab
a gray for my name here. Cool. I know my name. I don't need to be reminded
that my name and we'll keep this text white so
it's real strong. I haven't the map image here. So if I go to Adobe XD, here are my export,
my illustrator. I have my map file here. I can copy and paste. It. Can go right into Adobe XD, Paste it into my screen here, just like I've done here. Let's go add some cold color
designs to this line here. So I'm going to bump the opacity up and I'm gonna make it blue. Let's go ahead and bring this
logo icon up a little bit. We'll keep it wide. Let's go grab our bobo T
icon from the top here. But I'm going to add
a couple of things in these properties here. These little bulbous section, I'm gonna make these peak to have some fun.
It's kind of small. We could probably get it. Let's pick this
drought light or blue like that. Have some
fun with this one. I'm going to grab it. I'm gonna come back, go
back over to my mark here. And I'm gonna get rid of the poverty that I have
in the center here. Let paste this one in. This one's a little cooler. Alright, place that they're going to blow this
up a little bit. Yeah, there you go. Cool. Let's go make this icon, the little map icon, blue. And the thing that's tappable on the screen is the
cancelled case I needed to cancel and all
either cancel white. But let's go sit back with
a little bit of gray here. Yeah, there you go.
That looks good. Alright. Let's go take a look
at the final again. I have the other
final visual design planned out over here. You can see I have all
the screens real pretty. I have all of the
buttons set as symbols. So let's say I change
this next button to another color like the blue. Look what happens. All of the next buttons change balloon. That's pretty nice.
I have to add buttons all as symbols to. So if I change one Add
button to another color, let's say yellow,
they all go yellow. Same with this tapioca. So if I change one of the
borders to say orange, you can see they
all change orange. Same with the x.
I changed the x2. Let's say blue. See how they all go blue, any color I really want here. They're all symbols, so it makes it very easy for me to work. So let's go take a look
at the prototype here. So in the last video, I covered how to design a prototype so you can
learn a little bit of the things that I'm
showing you at this point. And here is the final
screen, final design. And I can go ahead and make my first name and
last name, password, sign-up, graphs and below
the T, regular, sweet. Now what semi sweet? Then I got semi sweet here. We can do the large
tapioca, press, Add. Nice. See that notification on my
shopping carts. Go back. It looks like I'm
good with my bulbar t. I can press Next,
put my addressing. I'll put my credit
card details and boom, I got over T on delivery. One thing you could
place you can go to, I talked about this
website on how to build a wireframe video is
you can go to a site called the Noun Project C here. And watch this. I can
get any icon I want. Let's just say ice
cream. Ice cream. Center. Watch what happens. I get a whole bunch
of ice cream icons. So let's go grab one
of these icons here. Which one we want
to get? Let's grab this one. This is a nice one. Will get this icon, basic download and
do from my website, SVG, that's called
scalable vector graphic. And now I can take that, drag it into Illustrator. I have this icon and I can change the
colors of it a little bit. So let's say I want to
make this icon blue. I can make it blue, copy it. And I can paste it into
Adobe XD, just like so. Not ice cream icons as well. Pretty cool stuff. Right? So I hope you learn a little bit about visual design again, it takes lots of practice, so just go practice it. It's okay if your designs
don't look like mine. It takes a lot of time to
get to certain points where you can apply very simple
visual design craft. But hopefully this is a good
starting guide for you. Alright, so let's go ahead and look at the next
series of videos here. So join me for the next video, which I'll talk a
little bit around. What makes a good design resume. So you can take
some of this visual crafts that you're learning. You can go see what our good design resumes
out in the wild. I'll give you best examples and also give you examples
that aren't that good. And it will hopefully give you
a little guideline of what to do when you're
creating a design resume. As always, thanks for watching. I hope you learned
something and goodbye.
13. Do's and Don'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.
14. 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 honey.com. 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 honey.com, 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 design.com. 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 designed.com. You can also just Google me, Lawrence, designer, and you'll find this website as well. Okay, So that's been quite the journey. 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.
Aaron Lawrence, UX Instructor & Product Designer in SF
