Intro to UX: Apply the UX Design Process

1. Introduction: Calling all problem solvers and creative people. This intro to UX class will break down the foundation of how to be a User Experience Designer. My name is Becca Danna. I'm a User Experience Designer and Researcher at Google and I absolutely love this field because I get to solve complex problems from a human-centered perspective. I get to help drive product strategy and solve real human needs. If you're interested in identifying problems, brainstorming solutions, prototyping, and even understanding users this is the class for you. This class is geared towards a student or a technical professional, like a product manager or an engineer who is interested in switching to the UX side. In this class, you will take a UX project from start to finish. You will learn how to build the communication skills that are needed to inform product strategy. Even if a career in UX is not the path for you, these brainstorming and problem-solving skills are very applicable to any role in the tech field. The best part is that no prior experience is needed. You will leave this class with all of the basic foundational skills that are needed to do the job. If any of this sounds interesting to you, join me. Let's get started. 2. Getting Started in UX: Getting started as a UX designer can feel a bit intimidating, much like taking on any new skill or learning any new trade. That said, I fully believe that this career in this change is worth investing in. This career is fun, it's challenging, and it has a big impact on shaping the everyday lives of our users. As a UX designer, it is your primary responsibility to be an advocate for the user at all time and help push product strategy to deliver great experiences to market. I believe Donald Norman sums up the objective of a designer best in his book, The Design of Everyday Things, when he says, "Good design is actually a lot harder to notice than poor design, in part because good design fits user needs so well that the design is invisible." That is what we are achieving for each and every time we release a product to market. Before we break down how to be a UX designer, we first must define what user experience design is. Simply put, user experience design is a process to create a meaningful solution for a user to complete their goal. A common misconception out there is that UX design focuses solely on the UI or the user interface, what the user sees. But that's not the case, UX designers have to consider a wide range of factors when putting a solution to market, such as usability, functionality, accessibility, aesthetics, just to name a few. UX designers are actually solving complex end-to-end challenges that require a deeper understanding of the end-to-end experience that users are going through. It requires an understanding of not only the task they're completing, but the environment in which they're completing it in, why they're completing this task, and any efficiencies that can be gained through the process. Taking a product to market is actually a cross-functional, time-intensive process. It's easier to focus on what is easy to do and easy to build rather than what is best for the user. Your responsibility as a UX designer will be to advocate for the user and help drive product strategy through something called design thinking. Design thinking is a process that many UX designers follow. It helps the team align around finding that sweet spot between what the business needs, what the technical constraints are, any technical challenges that you need to take into consideration, and the user desires. Finding that middle ground to put a quality product to market. Through this class, we will break down the UX process. As we do, I've created a series of many projects that you can complete, to begin putting the theories that I'm teaching you into practice firsthand. By the end of this class, you will have a project that can be used as a portfolio piece. Together, through this class, we will work through all of the design phases; understand, ideate, and evaluate. Don't worry about understanding those too deeply, we'll break them down through each segment in the class. Your overall objective by the end of this class is to design a coffee delivery service where users can browse through a menu of options and track the progress of their existing orders. Now your first assignment is simple, set yourself up for success. Go and create a project presentation template that you will upload into the project gallery. This is where you'll share each of your many assignments for feedback from peers and from myself. At the end, this presentation will theoretically pose as a portfolio piece for you to show that you've completed an end-to-end project as a user experience designer. 3. Understand the Landscape: To begin any project as a UX designer, you first need to understand the landscape or the market that you are putting a solution into. There are various activities that you may want to complete throughout the initial phase of work. We call this initial phase of work the requirement gathering phase, or the understand phase. This is where you're understanding the market, understanding the business, understanding the technical constraints, and understanding the user. Other good activities to complete in this initial phase of work is speaking to experts to understand their position, maybe even reading articles or reviews that are published online. These activities will help you as a designer, not only understand the market, but it will help you and your team aligned around a shared understanding of the market, the opportunities, and the problem space. Now the biggest challenge that you'll need to overcome as a UX designer, is that in faster projects or timelines that are condensed for whatever reason, whether it's business drivers, whether it's revenue drivers. You'll find that the initial phase of work where you're spending a significant amount of time understanding the landscape and the user. A lot of time stakeholders will push you to move faster through this process. Now this sets up the backbone of any good project. It's important to advocate for the need to spend some time on these activities, my go-to activity and one that I'm going to walk you through today is called a competitive analysis. This is where you evaluate the strengths and weaknesses of both direct and indirect competitors. This activity will help you and the team understand what products already exist in the market and where they stand. It'll help you understand how saturated the market may be or how groundbreaking this new opportunity is. To start off a competitive analysis, you first need to understand the desired solution that you're taking to market. That way you can identify the right competitors to evaluate. Now if you're really struggling and maybe this space is new or it's a bit technically difficult to understand, talk to your product managers, talk to marketing and talk to sales. They're usually very good partners in helping you identify both direct and indirect competitors to work with. You want to aim to evaluate anywhere from 3-10 competitors, depending on both the size of the project and the market that you're fitting into. On top of the competitor you want to take a look at 2-3 comparative experiences from similar or different industries. What I mean by this is, if you're creating a catalog of coffee that users will browse through, go look at other catalogs that already exist and maybe do really well, such as [inaudible] or buying a pair of jeans. The reason you look at a comparative experience is to take inspiration and find new patterns that are relevant for the work that you're putting out there. Now, be aware that you don't evaluate too many competitors or comparative experiences. You'll just simply end up in a hole that you feel you can never dig yourself out of. Stick to 3-10 competitors and 2-3 comparative experiences. Now you're ready to do a competitive or comparative analysis. What you would do is simple. You would start off by doing the task as if you were an average user. If your objective is defined and buy coffee, you would complete that task end to end, and as you're doing that, you would take screenshots every step of the way for documentation later. Now you don't want to just complete this evaluation on one device. You want to make sure that you're simulating all various experiences that users may go through. Trying it on a mobile device versus a desktop, trying it on an iOS device versus an Android device. Now, if your industry or your solution is only ever going to be on, let's say an Android mobile device, then that's okay, you can simply look at that device. You don't have to evaluate all of them. But if you're creating more of a general product that will exist across devices and across operating systems. You do want to evaluate all of those as there are nuances to the user experience. After you've taken your screenshots and you've completed all of your evaluations for each of your competitors, what you'll wanna do is summarize all of your key findings, focusing on top strengths of the competitors and top weaknesses or areas of improvement. Now there are different ways to document the findings of a competitive analysis. Typically, you will summarize your findings in a table format. This will tend to be at the upfront part of a presentation, may be something that you would give to executive stakeholders. Later in the presentation, what you would want to have is more detailed flows annotated with key findings, and this would show the actual progression through the user experience. Go give this a try. I want you to identify three potential competitors for your coffee delivery service. Complete a competitive analysis and add your key findings to your presentation document. Next, we'll talk about how to begin understanding your users. 4. Understand Your Users: Advocating for your user is going to be one of your primary responsibilities as a UX professional. In order to do this, you must first understand your users. The quickest way to get to know your users is through user interviews. These are short, semi structured conversations where you're just simply taking your questions and your team questions to your user and having a back and forth conversation. These discussions will help you learn about situations in which your users may want to use your product, you'll understand any existing pain points that may exist in the space, and you may even generate new ideas that you and your team haven't even considered to begin with. For me personally, this is one of my favorite phases, I love connecting with users. I learned so much about the products that they're currently using and the product that I want to create and it really helps me create a better user experience for them. To interview users, you start off by creating a discussion guide, this will be essentially the outline of your conversation that you're going to have with your users. And this will be based on the questions that you and your team have generated or any assumptions that you may have. As you write your questions, try and frame them in non biasing ways. For example, instead of asking or saying something like, "tell me how you would use a coffee delivery service" because this actually implies that you're assuming the user will use your product. You would simply reframe it to say something like, "tell me about a time that you may need or want a coffee delivery service." This is much more open and gives the user an opportunity to say something like, "Actually, I would not use a coffee delivery service", or it's an open-ended enough question that they can give you various answers and various scenarios. Also avoid yes, no questions. They don't go into rich detail enough and you'll have to pull so much information out of the user that it would have been simpler to ask them an open-ended question to begin with. Now remember, you'll use your discussion guide as an outline, not as a script. You do not want to read your questions verbatim, and if your conversation starts to take a path slightly off of your original outline, that's totally okay. This is often where a lot of nuggets and rich information comes out of the conversation. After you conclude that thought, gently guide it back to your outline using your discussion guide in front of you. Now, taking notes is just as important as how you frame the questions and write the questions in the first place. As you're taking notes and as you're analyzing the insights you've uncovered, you also want to approach this in a non-bias way. So you want to make sure that you're only taking note of what you actually heard, not what you think you heard. If the idea of taking notes on top of having this conversation is very overwhelming for you, don't worry about it. Ask the participant for permission to record the session. This could simply be a video or an audio recording, where you can refer to it back later and take the notes or transcribe the conversation you had. Having these videos is also a really great opportunity to create something called a highlight video, where you can not only tell the team what you heard, but show them firsthand. Now, user interviewing and user research is a specialty in and of itself. So if you want to learn more about how to plan effective research methodologies, how you have these conversations and analyze this information, I do suggest doing additional reading on this topic. I've linked one great article in the class resources called Interviewing Users to get you started. If you happen to work at a company with user experience researchers, I highly suggest that you take full advantage of that partnership. They can help identify the right research questions, the right opportunities for research, and suggests the right methodologies for completing this work. Now a challenge with user research if you are doing this yourself, is that users don't know what they need and they're not very good at communicating what they need. However, they are good at communicating what's not working for them. You're job is to help guide the discussion, to uncover what users need through understanding what they're currently doing, what's not working, where their struggles are, and where efficiencies can be gained. You'll use this information, the quotes and the stories from the interviews, to build out empathy maps that you and your team will refer back to you as you're designing your products. An empathy map simply documents what a user is thinking, feeling, and doing as they achieved their goal, and this exercise is best completed if done cross-functionally, so that everybody on the team can speak a common language and agree on the priorities that you're solving for. Here is a template that shows a simple way to document an empathy map. This can actually be filled out quickly as post-it notes on a wall or even as texts in a presentation. So go give user interviews a try. I want you to identify five potential users, interview them and understand their needs and desires for a coffee delivery service. From there, document those findings in an empathy map. Next, we'll learn how to turn those insights into product ideas. 5. Brainstorm Solutions: Now that you've collected insights from competitors and prospective users, it's time to turn those problems into solutions. Here is the part of the class where you will need your materials for hand sketching. If you don't have them readily accessible, feel free to pause, go grab them and come on back. Now, the idea of sketching can be very difficult for many people at first. I have a couple activities for you today to hopefully help make this film more natural for you. I know that in the beginning of my career, I struggled a lot with sketching. I had a lot of anxiety about being judged or not being good enough. But the good news is that sketches don't need to be perfect. They just need to communicate as simple idea. Don't worry about what the final product looks like. Just start sketching. It's that simple. The more you do this, the more comfortable you'll become. Here's a look at some of the tools that I like to use for sketching. I personally prefer to use some grid or dark grid rather than blank paper as I find it helps me keep my lines a little bit more straight and then I'm not spending worrying too much about using a ruler or what the final product looks like. A good rule is to use something permanent, like a pen or a marker. Because I find that if I use a pencil and my line isn't straight, I end up obsessing over that line and I'll spend way too much time erasing and redrawing not straight line that doesn't even need to be straight in the first place. I find that when it's permanent, I'm not as attached to the idea. I'm also not attached to what it looks like and I'm able to go through ideas much quicker. The first activity that I would like to teach you today is called Crazy Eights. Essentially, what you would do is you would take a piece of paper and you would fold it into eight segments. I'm going to fold it in half, in half again and once more. The idea with a Crazy Eight is that you want to come up with a rapid set of sketches, eight to be exact. You would set a timer for eight minutes and you would sketch out one idea per minute per frame. Idea one here, two here, three here, so on. You want to come up with quick ideas and put the first thing that comes to mind down on the paper. If you feel that you need to use words, you can also use words. You can use iconography. Essentially, what you're trying to do is just communicate a top-level idea. What I've done here is I've mocks up what this would look like if I was starting to create a Crazy Eight for this coffee delivery service. You'll notice that there's not a lot of energy put into refining the idea, but I'm simply communicating the idea at a high level. In this first one we can see I'm exploring a Mad Libs order approach. In the second one, this looks maybe like a little bit more of a beautiful card catalog experience. There's not a lot of detail in here, but there's enough that if anybody looked at this and knowing that this was about a coffee delivery service, they would get some of the top-level ideas I have. This will be your first activity, complete Crazy Eight rapid ideas, one minute per idea for your coffee delivery service. The next activity is called a solution sketch. For this, what you would do is use a blank piece of paper or as much paper as you need in order to refine an idea a little bit more deeper and communicate some of the new ones as of the experience. Here's an example of what a solution sketch could look like. This took me roughly 30 seconds to a minute to come up with. I based it on the initial Crazy Eight idea that I had here, which by the way, I actually spent one minute or less for each of these ideas. In this solution sketch and what a solution sketch does is it helps you identify some of them were critical components of the user experience. But you'll notice that there's still not that much attention to all of the details. I haven't figured out copy, I haven't figured out all of the user controls. But you can tell that my idea is a little bit more solidified and it will be easier to communicate this idea to users, stakeholders and even begin to wireframe. A solution sketch will generally have the overall page layout sketched out and then you'll have annotated call-outs for specific elements. This one, for instance, I came up with an idea for seeing reward cash that the user has based on their previous purchases. All I've done here is written that down. I haven't gone into too much detail about how they get the reward cash or what they do with their reward cash. But it sets the idea and the tone for the overall design. Some things on the solution sketch require further explanation. I came up with an idea of what if we had some visual identifier in the bottom of each card that signify something that could be important to the user. In this instance, I'm looking at maybe caffeine level or another factor that would help them make a choice. I don't yet know what this is or know what it would look like, but I know that we might need an idea to call this out. A few tips with sketching. Don't waste time writing out content into the sketch. You'll notice what I've done is I've put lines instead of the actual content. Reason here is that we don't yet know all of the content we may need. As we go through the wireframing process, we'll add in the final copy. What I do suggest you in is maybe only focusing on the primary actions. If I have a button and focusing on the headlines, so I could have written something like my favorites here or your favorites here. Secondly, in order to make sketching go fast, stick to common components that already exist. You'll notice this is a pretty standard set of components. I have cards, I have a banner image, I have a menu and I have a profile icon. I didn't go too deep in creating new patterns here because it would be too difficult to explain in this simple sketch. Stick to adding only the minimal content you need and stick to using known patterns that are easy for anybody to understand who is looking at your sketch. Now that you've got some ideas from your user interviews on what challenges and needs they have, start turning those insights into ideas that you want to explore. Start with the Crazy Eight for rapid brainstorming, followed by solution sketches for 15 to 20 concepts that you have and you want to take further through this project. 6. Validate & Ideate: Now that you have your ideas down on paper, it's time to get feedback from both stakeholders and users. Now this is something that in a real project you would be doing very frequently and you would be doing it at different stages of the project. You may show sketches early on. You would then show wireframes and maybe later you even show an interactive prototype. For the purpose of this class, this will be the last time that we talk about user interviewing. But just know that this is something you want to do consistently. It's very important to ensure that the ideas you're coming up with are meeting the needs of users, they're understandable, comprehensible, so on and so forth. Interviewing is a powerful tool to have in your back pocket. At this stage of the project, it's okay if your interviews are still quite informal, maybe even ad hoc. However, as you continue to go through the course of the project, you'd want to make sure that you're putting more rigor into your user interviews and that they're falling a little bit more of a scientific methodology approach. When I am conducting user interviews on just early ideas in hand sketches that I have, I like to sit down in front of these or face to face with the actual sketches on paper themself. What I'll then do is I will put the sketch in front of the user. I'll hand it to them on the table. I'll point to the overall concept that I want them to look at. I'll say something like, tell me what you think about this idea? What's happening here? Because I first want to start off by getting the user interpretation of the idea rather than giving them what's happening in the background. After I've given them a moment or two to think about what they're seeing and trying to explain to me what is going on, I'll then give them what's called the elevator pitch of the idea. This is a quick 30-second summary of the overall idea that I am trying to communicate in this one concept. I won't get into all of the nuances, I won't talk about all of the interactions were all of the content they may see. I just simply communicate the idea at a high level. Then I'll ask them something like, tell me what you think about this idea. Or I might say something like tell me a time in which this idea would be valuable to you. Another approach is to do it in a storyboard style, where you're showing multiple sketches or even a flow of sketches. Have the user looks at it like it's a comic book. Let them read it, let them digest it, and then let them tell you their interpretation. At the end of this session, what you can do is ask them to help you understand which ideas resonated the most with them and why. Have them pick either their favorite or their top three ideas. But it's important that they need to communicate why those are their favorite ideas. Now, if you're talking to multiple users, you want to make sure that you're not showing the same concept first each time. This is because you're going to be introducing bias into the equation. What I like to do is I like to rotate the order of the concepts that I'm showing. If I have got five concepts and five participants, each concept has an opportunity to be the first concept that the user sees. Users generally are going to feel a little bit more positive about the first thing that they see. That's not a hard rule. The're definitely exceptions to that. But generally speaking, you are introducing the idea of bias if you're consistently showing each of the concepts in the same flow so mix it up a little bit. With all that in mind, go gather feedback on your concepts with the objective of trying to come back with your top three ideas. From there, we'll further define your idea in wireframe. 7. Sketch 101: Now that we have your top ideas, it's time to start having some fun and creating what we call wireframes. For this first phase of wireframing, we're just simply going to focus on low fidelity wireframing. In this stage, what we generally think through is overall page layout, task orientation, helping the user complete their task. Information hierarchy, how we're going to lay out the content on the page, what should be most prominent? We're also going to think about the path to completion. How does the user start, go through, and end their tasks that they're trying to accomplish. In this stage of wireframing, we don't worry so much about colors, about being pixel perfect, or even about having final content. Those are things that we can develop as we continue to go through the wireframing process, that all will come in a later segment. For now, what we're going to learn how to do is the basics of using sketch. Sketch is just one of many industry prototyping tools that are out there, but I find it to be one that is the easiest to learn and it offers a lot of robust functionality. You'll find that many employers will look for sketch as a fundamental skill of any UX designer. To get started, I'm going to break down a couple of simple elements of using sketch. What I've done here, is I've opened up a new document and I'm going to begin creating the elements of my wireframe. Before we get into actually adding components, I just want to tell you a little bit about how this page is laid out, that way when I refer to certain elements, you understand what I'm talking about. I will be covering the basics of sketch in this. However, if you're interested in learning more, there are a lot of video tutorials out there on how to do more advanced editing, more advanced features, and other functions that you might want to use later down the line as you continue to develop your skills as a UX designer. Now, I'm going to be demoing sketch on a MacBook Pro. However, a lot of the controls are very similar if you're on another operating system. If something I mentioned today isn't directly translatable, just know that there is an equivalent within your operating system. The first area that you need to know is this center white space. This is called the canvas. This is essentially where you're going to be building all of your various wireframes. This canvas is essentially infinite, meaning, it can be as large as you need it to be. If you have to have a 100 wireframes, you can create 100 wireframes in this canvas. As you're adding elements to the page or adding additional screens to the page, and you want to navigate around the canvas, you simply hold the space bar and you use your mouse pad or your trackpad to navigate around. This area over here on the right side is called the inspector. This is where you have all of your styling controls for the individual page elements you're adding. For instance, if you add a box and you want to change that box color to red, you would do that in the inspector panel over on the right side, on the left side of the screen is where you will see all of your art boards and your layers as you begin to add content onto the screen. This comes in handy later on when you want to start doing things like reordering your layers and seeing how your layers are stacked on top of one another. Finally, this area along the top is called the toolbar. If I say you will find the ability to add text in the tool bar, this is the area that I'm referring to. That's it. That's the basic layout of sketch. Here is a good place to pause and make sure that you have access to sketch. I recommend that you open it and play around with some of the elements I've just introduced to you. Get familiar with the layout, and in the next segment, we'll start creating our wireframes. 8. Lo Fidelity Prototyping: Now what we're going to do is start talking about how to add page elements as you begin to create your wireframes. Again, your wireframes are an opportunity to take your idea further, start communicating overall layout, adding real content, thinking about the buttons and the interactions that the users will need to do, and thinking through the entire architecture of this experience. Now, this is what I'm going to show you how to build. This is an example of what low-fidelity wireframes can look like. You'll notice that it's in grayscale. That is because what we don't want to do is get hung up on the overall look and feel with colors, and with logos, and with imagery at this time, but we do want to communicate what essentially will be on the page. You'll also notice that I've only put just enough information at a high level, communicate what these pages will do without getting into the specifics of them. Lastly, what you'll notice is that I have a pretty clear naming convention going on right now. This is because later, when you've got multiple screens and you're working on exporting these, either creating an interactive prototype or putting them in a presentation, these naming conventions will come into play. If you've got a large file that you are going to be handing off to another designer, you also want to make sure that all of your art boards are laid out clearly so that somebody can go into the document and takeover from you. I'm going to show you how to build out each of these pages. Going back to our blank Canvas, the first thing that you need to do is you need to add an art board. Every wireframe will be on its own art board. To add an art board in the upper toolbar, you click on the "Plus," and "Art board." Now, luckily, sketch gives you a selection of precised pages so that you don't have to figure out what size you need to design for. Just to make it simple today, I will design for an iPhone 8. I select an iPhone 8, and you'll notice that it's automatically configured to landscape, but I actually want to design it in portrait. All I've had to do in the Inspector is select the Portrait View. From here, what I will do is I will begin adding the page elements. Now, once again, you'll notice I'm panning around the screen by holding on the space bar and using my mouse. There is also a subtle difference now between the blank Canvas and the Canvas we see. You'll notice that the Canvas before was white and now it's gray. This is to indicate that we've got an active art board that we are working on. Now, the first step is to rename your art board so that it's easier to navigate, it's easier to find later on. All I do to do that is double-click on this area that was called the iPhone 8, and now I can call it whatever I want to call it. My personal naming convention is to give each page a number so that when I export multiple pages, they're already in numerical order. The next thing I like to do is describe what the page is. There's very first low-fidelity wireframe is going to be the landing page. Now, I'm ready to begin designing this landing page. Essentially, everything on the page is going to be a combination of shapes and text. The only exception to that is if you put in real imagery or you put in iconography, but we'll start for low-fidelity purposes with just using rectangles and using text elements. In the toolbar, I select the Shape tool, and I select out a rectangle. Now, you'll notice that my cursor's got a box around it. This is indicating that I'm about to draw a rectangle shape. I can either drag the shape to the full width that I want it or in the Inspector, I can manipulate the size of it. This is roughly about what I want those. I'm going to leave this as it is. The only other thing that I would do here, is I'm going to change the color. I'm going to turn off the border because borders tend to get very blocky and a little over complicated for a low-fidelity wireframe. But we are going to be using different shades of gray, and this will be my darkest shade of gray, so I want to just use the color picker to select a slightly darker shade of gray. If you'd prefer to work with hex colors, you can manually input your hex color here. What I'd like to do is I'd like to indicate that at the top of the page, for my landing page, I'm going to have a background image. I'm going to drag this roughly about the size that I think would feel good for a background image. I'm not going to worry about what that image is now, but I know that because I'm going to be selling products, an image along the top will really be eye-catching for the user. From here, I'm going to add the text that I want to see on the page. In the toolbar, I select the Text tool, and I simply click to start typing. To manipulate the text, I select the text element, and in the Inspector, I can change elements of the type. I can change what font I am using, the font size, the font treatment, and even the color of the font itself. Now, if I want to create another text element on the page, I can either add a new text element, or I can simply copy and paste the existing element. To do that, I select the element and I can right-click, or using my Mac, I can do Command C, followed by Command V. Now, you'll notice over here, these two layers are overlapping, but I do have two different instances of this text, I select the one I want to move and I drag it to the location I'd like to have it in. In order to change this text, I double-click and I type in, "Your favorites." Now, what I'd like to do is I'd like to start adding in what I believe will be screenshots of beautiful photos of each of the different types of orders that this user has placed in the past. To do that, I'm going to insert a rectangle, but for elements on a page that are clickable, I like them to feel like buttons, so I am going to create a rounded rectangle rather than a square rectangle. I drag the rounded rectangle to be the size I want, I click on it one more time so that I can open up the Editor, and I'm going to make some small manipulations. I'm going to change the rounded radius to four pixels because that's just what I like best. I'm going to remove the border and I'm going to make the gray slightly lighter so that it's nicer on the eye. Now, essentially, this is the page element I want, so I'm just going to copy and paste it, and now I have a second one. As I continue adding those elements, you'll notice that all I've done is copy and pasted a couple key things to build out this page and it communicates so much. What I can now see is that in my application or in my service, I'm going to have a landing page. It's going to have a large banner image, it will have some logo, maybe a menu, maybe even a profile picture. I'm assuming this is how users will find their previous orders and things like that. Down below, they'll be able to see their favorite items, maybe these are things they buy a lot, and maybe even some logo suggestions. I've just communicated all of that by three different page elements; my text, my rounded rectangles, and my square rectangle up at the top. I hope that this demonstration, what you've seen, is that sketch is actually quite a simple tool to use. There's a lot of robust functionality, but there's not that much that you need to communicate simple ideas through low-fidelity wireframes. Now, before I let you go explore this on your own and give this a try, I just want to talk about what I meant by layers. Each of these elements is an individual layer. Let's say I want to have text on top of the circle. To save time, I will copy and paste this text that I've already styled rather than recreating the styling over again, I will drag and drop it in the place I want it. But you'll notice, the fact that you can't see it means that this layer is behind the circle layer. I can also see this by looking over on the layers side. What I can see here, is that this text layer that I want above the oval is actually underneath the oval. I have a couple of choices. The simplest is to drag the text element above the layer of the circle. Another option, is to select the text layer that I want to move forward. I can see it selected even though I can't see it, and I hit the "Forward" button in the toolbar. Now, you have all of the basic elements you need to know in order to get started with low-fidelity wireframing. What I'd like you to do is take your concept a little bit further by turning it into wireframes. You don't need to have the entire experience wireframed, but you do want to make sure that you have all the key pages to communicate your idea. Next, we'll take a look at how to evaluate your concept to ensure that it's accessible, and then we'll begin turning it into high-fidelity wireframes. 9. Accessibility 101: Accessibility is a very important consideration for UX design to think about through the entire life-cycle of the project. So you want to start off early thinking about accessibility and bring it into every activity and exercise that you and your team will do. Now this is a complex space and one that I don't pretend to be an expert of. However, what we will do today is break down the basics of getting started with accessibility for UX design specifically. I do suggest that you spend some time reading up a little bit deeper on this topic, as it's become increasingly important in the UX design community. So we'll start off with this. There are a variety of impairments that users may be faced with and you yourself may even experienced them from time to time, regardless of your ability. Impairments can be permanent, temporary or even situational. They can affect your perception, your operation, or your understanding. Let's look at a couple of different examples of different types of impairments. A permanent impairment could be color blindness or deafness, whereas a temporary impairment could be something like a broken arm or exhaustion and situational impairment could be things like high glare from the sun, a migraine, carrying a baby, or learning a new language. So it's important to consider accessibility because if you're solving for accessibility, you're solving for your everyday average user. Now there's a lot to accessibility. I'll break down just a couple key elements during this class. The first element to consider with accessibility and designing for accessibility is color. Color is a huge factor in design, it can both delight and enhance the user experience if it's used widely. That said, always ensure that your color is using a high contrast ratio. So you want to make sure that your foreground and your background have enough contrast between them that it's easy for anybody to see, whether you have glare from the sun or whether you're color-blind. For certain impairments, users may use assistive technology. An example of assistive technology is something like a screen reader, which will verbally dictate the elements that a sighted user would see. Another example is keyboard navigation, where the user is able to use the tab, enter and arrow keys to interact with the interface to complete their task. Now this is important for UX designers to understand, both screen readers and keyboard navigation because your role in the project is to help the engineer build and understand all of the components so that they're both dictated correctly and they're put in the right order in the back-end so that as the user is trying to use the assistive technology, they can go through the flow as seamlessly as possible. Now both screen readers and keyboard navigation are best understood experiencing it firsthand. So to try out a screen reader, I suggest that you turn on the assistive support on your phone, blindfold yourself, and try and send a text or order a pizza. To experience keyboard navigation, open up the weather channel in your browser and try to find the five-day forecast for your city with gesture keyboard. How did that feel? Now while you're at it, take a look at your concept that you wire framed. Knowing what you've just learned about keyboard navigation and screen readers, would you change anything in your existing concept? 10. Hi Fidelity Prototyping: Now it's time to get your final concept cleaned up and ready for final presentation by applying visual treatment and final copy. Some companies will have visual designers and they will be your partners at this part in the process. You may have even began working with them a little bit earlier. To start identifying what the button treatments will look like, where typography will live, the type styles that you're going to use, and the colors that you're going to use. If you don't happen to have a visual designer, it's possible that your company may have a visual language. This is a branding guideline that you will follow as you're applying both your type treatment, your color treatment, and anything else visually that you need to keep in mind. If you work with a visual language, this would be the time that you start applying those guidelines to your wireframes and sketch. If you don't have a visual design background, have the opportunity to work with visual design, or even have a visual language. I suggest that you read up and take a class on basic graphic design principles because this will help you understand how to use typefaces and type skills to ensure that you have good hierarchy and scannable text. You'll also want a basic understanding of iconography and color theory to ensure that your designs are comprehensible. As I work around to get you started and for this project, I suggest that you do two things. First off, go take a look at nounproject.com for inspiration on different sets of icons that you might want to use. I also suggest that you start by browsing websites that you admire for color treatment and stick to two to three type styles in order to start applying visual design to your wireframes. What I want you to start off thinking about is the principles of your products. Do you want it to be modern? Do you want it to be classic? Do you want it to be warm and engaging or friendly and informative? Define how you want users to feel when they're using your experience. From there pick two or three colors that you want to work with and one to two typefaces that you want to work with. Start applying hierarchy of text, applying your color, applying any imagery, and any iconography that you may want to use. 11. Crafting a Compelling Story: Your final product is looking great and you're confident in the solution, now it's time to get ready for the big presentation. Theoretically, you would have shared your idea often with your project team up until this point, this would not be a big reveal for them. That said, good presentation skills are fundamental in not only shipping a product, but also in influencing the team to buy into a product idea. Despite the fact that you may have already been sharing your designs with the product team, this is where a big presentation to either other teams, partner teams, or maybe even executive stakeholders may come into play. The key to any good presentation, is to craft a compelling story. Your goal when presenting to anyone is to share the story of the problem and the solution that you're proposing. Like any good novel, your presentation should follow a story arc; it draws people in, it hooks them, and it makes them want to know how it ends. Start off by setting the scene, this is where you briefly highlight the project, the team, and the goal of work. Now it's time to build the drama, tell the audience about the user and the business problems that were observed and uncover it through the early stage of the project, this should be a short story, but help the team understand the value proposition of the solution itself. Now it's time to captivate the audience, don't tell them, but show them the solution through the eyes of the user. You don't need to show every single state of the design, just highlight the incredible user experience you've created. There will most likely be a separate document with all of the various page dates that you've created for development purposes. Wrap up with closing details to show that this is a well-thought out solution, that has been properly vetted with all channels. Now, my top three best practices that I think you should always follow, is to tell a human story, by adding a plot and a character. This is somebody that everybody in the team can rally around and really want to succeed. Second; understand the audience and the type of presentation that you're giving. If you're talking to a room full of executives, the type of tone and the type of language which you want to use, is slightly different than that If you were talking to your core team, who has a little bit more of a background in the understanding of not only the project, but the process you've followed. If you really want to take this presentation to the next level, make it cross-functional, don't be the only one speaking. It takes a village to create a great experience,so ask your product managers and your engineers to help tell the story to cross-functional peers. Finally, practice, practice, practice. The more confident you sound when you're delivering the presentation, the more confidently everybody else will align to what you're telling them, and they'll believe in the story that you're giving. Things to avoid: Don't try and create a one size fits all presentation, this just doesn't work. The tone, the language and the examples that you provide will be different depending on who you're speaking to. Also avoid speaking for the entire presentation, as there will be lots of questions. If you're giving a 30 minute presentation, aim to only present for about 15 minutes and let the rest of the time be dedicated for a conversation with stakeholders. Finally, less is more, show the user experience rather than describing it. It's much easier to put yourself in the user's shoes and you generally will feel more positive about the overall experience. With this in mind, what I'd like you to do is go finalize your project presentation, bringing in any elements of the workflow that you've completed that may be missing, craft that story, see if what you've already completed follows that arc or if you need to go back and revisit any of the activities or steps we've completed thus far. 12. Project Lifecycle and Conclusion: Over the course of this class, we've taken just a brief look at how to be a UX designer. There are more steps and more nuances to the actual job itself. However, this foundational understanding should be enough to get you started. We looked at the iterative design process working through, understand, where we took a deeper look at the market, the user, and by extension, the problem space. We ideated on this problem to come up with the best possible solution. We evaluated our ideas with users, as we went to refine the concept into a final solution. I mentioned in the beginning, that this process can happen as often as needed for any given project. One factor in defining how often you go through the loop is the technical organization that you support, whether it's Agile or whether it's Waterfall. As a UX designer supporting an Agile project, you are doing what is called lean UX design. You will focus on smaller deliveries, and micro enhancements over a consistent cadence of code releases. As a UX designer supporting a Waterfall project, you will most likely be tackling a much larger end-to-end experience for multiple user types, followed by one big market release. Both Agile and Waterfall have pros and cons. Through this class what we simulated was any end to end project, where you completed enough activities to understand the entire design process. Now, just know once again, that there are theoretically more things that you would want to do as a UX designer, delivering either in Agile or a Waterfall process. Another factor that directly impacts the scope of the project, is if you are doing a product enhancement or a ground-up design.You can also group major redesigns or restyles into the later category, as it often requires a lot of rework and re-investigation. A one-off feature enhancement within a large project, may not require a thorough design process, whereas a partial redesign or a full redesign requires a significant amount of investigation and testing. As a UX designer, most of your day is actually not spent designing. It may be when you're a junior designer or you're just getting started, supporting the UX lead, but as you contribute to more projects, your time will be spent between designing, meeting with users, attending critiques, attending project meetings with PMs and engineers, reviewing competitors, storytelling, workshops, collaborating, understanding the back-end technology, becoming a product expert in your industry, and influencing partners. That's a lot. With that, you've just completed your very first UX project. Congratulations and welcome to the exciting world of UX design. I hope you find this fun, and I hope that you found this hands-on approach, a great way to learn about how to advocate for your user, be a UX designer, and contribute to an end-to-end project. I hope you keep going in this journey and I hope to see you in the UX design community soon.