Intro to UX: Designing with a User-Centered Approach

1. Introduction: Hi. My name is Cinthya Mohr. I'm a senior UX manager at Google in New York. This is an introduction to UX class, where we want to walk you through the process of designing with a user centered approach. User experience is really about the whole end-to-end experience that the user has with a product or a service. Considering all the different touch points that they go through from learning about the product, using the product, with after using the product. So, you have to think about it as a holistic approach on end-to-end experience for a user. Steve Jobs said, "Design is not just how it looks and how it feels but it's also how it works." This is the core of what we mean in the user experience. It's how the users interact with a particular product, an application, app, a phone or website and that is experience that they have with the product. We're going to start with an overview of what user experience is and go through some examples of what good and bad UX looks like in real life. Then talk about the roles of UX, the discipline, and we're finally going to go through a case study where we want to walk with through the user-centered design approach. This class will be relevant for anybody who's interested in user experience or want to know more about designing with the user in mind. I'm excited to introduce you to the world of user experience design. So, let's get started. 2. What is UX?: So, user experience, it's really about designing a product with a user in mind rather than thinking about what the technology can do. So, if you look at Commodore or like the early UIs that we had in the early 80s or prior to that, they looked like this. Like you would turn on a computer and it would look something like this, which is like the terminal UI today on a Mac or something. There was no user experience. The experience for users was that they needed to learn a programming or like [inaudible] language to be able to interact with a computer, and putting commands in so, you can get to a file or open an application or something like that. That's basically how we have evolved over time, where technology has dictated how users had to interact with a particular technology or an interface, the technologies coming closer to the user to understand how users interact with the world, what their needs are, and then design an experience that would accommodate their lifestyle. That is a major switch about focusing on the user, which is a user-centered approach rather than the technology approach or the business approach, where the technology dictates the experience. In the mid 80s, Apple came out with this revolutionary UI, this user interface that was basically reflecting the actual physical desktop that people had. When Apple came out with this UI, this user interface, it was a huge thing for all users honestly around the world, consumers, students, and everybody. Because, it really transform how people can interact with technology and making it way more useful and easy to use, and delightful because you understand it from the get-go that this is a folder and I can click on it, and I can open, and they're going to be files inside the same whether you have a physical file or folder, and you have all your papers inside all your files. If you don't need something, you can wrap that file and put it in the trash, it's the same thing that you would do on a computer. So, those concepts were already familiar to the user, and that was a really big thing for the industry in general. So, if you fast forward until now, now you have all sorts of UIs writing in different sizes and different platforms, you'll have phones, and computers, and tablets, and really big monitors [inaudible] as you walk through the streets all the way down to a little watch. In order to design for these experiences you still need to think about the user and the context. So, now that you can access all of these type of different platform for technologies and sizes, the job as a user experience designer is to really think about, how is the user going to use this product? However, you design that experience, has to be very conscious and thoughtful about what is the context of use. If you're going to design something where the user is going to be in front of a computer, you can make some assumptions. You can say, "Oh, this user is most likely going to be focused and really like sitting in front of his computer, so, I will have their whole attention." Versus if you're designing something from a watch, it's very different because the watch is always on the user and the user may be doing something completely different like running or driving or walking. So, their attention has to be to the rest, like to the environment rather than they're not solely focused on the watch. So, for a watch, if I'm creating a health app, like to tell me. Okay well, you should be doing a little bit more exercises. What are the right times to tell me, to interrupt me, to tell me that I should be doing more exercises. You need to be understanding the surrounding and the context of the user in order to deliver a good experience for them. We really need to focus on the user intent, which means what does a user want to do? What do they want to accomplish? Really understanding all the touch points that goes through for that end-to-end experience. Because we have so many different type of surfaces and platforms from phones, to tablets, to goggles, and things like that, and as we develop new technologies, it's even more important for us as UX designers and researchers and everybody working on the UX discipline, to pay more attention to the user, and really understanding their needs, and their goals. To talk about this a little bit more, I want to show an example of how to think about a whole end-to-end experience, and the different touch points that we have to think about in terms of user experience. So, let's look at Disney. For example, if you're a family and you want to go and take your kids on a vocation to Disneyland. First touch point is going to be most likely before the trip. You want to learn about Disneyland, like maybe the resort, and the parks, and how much it costs to stay there, to start planning your trip. Therefore, the first touch point is probably their website, and that's where you want to find out more about all of these things. One of the things that they offer in their website is this app, that you can download on to your phone and you can start planning your trip. Let's say you get to the next phase, and the next touch point is to download this app, so you can personalize it and start creating a schedule of what are the things that you want to do for your two, three, four, or five day trip that you already said, okay, this is the amount of time that we want to spend there. Once you get to the trip and you get to Disneyland, you go to the hotel as the next touch point, and then you already have this app on your phone, it's personalized and you've already created a schedule for the two or three days or you're going to be there. So, you already have something in mind already planned, which is a really nice way to get started with something as overwhelming as going through a lot of different parks and with the family. The other nice thing that Disney did is creating this band where you just put it on your wrist, and it acts as a way for you to go through different rights without needing to carry anything, and you can also if you want to purchase the photos that they take on the ride, you can just swipe your wristband and it will automatically go to the app that you downloaded. That is a great example of how technology is just invisible. You don't feel it, you don't need to go and interact with technology, it just works, and that's the best type of experience throughout all of his touch points. Then as you started leaving Disneyland, you're going to walk through all these stores, and what they do is they sell you memories of the data you had at Disneyland. That's where you go on buy the dress or the toy or whatever it is, that it's going to make you remember this special day. If you were tired and you were not allowed to buy something as a kid, they offer this, after the trip, you can go back to the Disney Store and you can buy a memory there. You can just be able to finish that, and that is walking through the whole end-to-end of a journey of what the user would go through when they want to go to Disneyland all the way from planning, to organizing, to actual experience it, and then afterwards when you go home and you want to buy something else. So, those are all different touch points as the designer that you're designing the app or you're designing the welcome kit for the hotel or the website. You not only focus on that particular aspect, but you need to take a step back and look at the whole journey, that all the different touch points makes sense and they're seamless, and they work together as a whole experience, and that is what we call end-to-end user experience. So, just to recap the whole end-to-end experience is to think about the before, during, and after the experience especially for something like Disneyland. This idea of creating experiences is a core task of a user-center approach which we want to go through in the next video. 3. User-Centered Design Process: Now that you have a better overview of what user experience is, let's go take a deeper look into the user-centered design process. So, the user-centered design process is really looking at designing a solution based on user needs, and that is a core part of the user-centered process. It is focusing on the user and what their needs are. So really good framework of four basic questions to think about is, what is the user goals? So, thinking about the goal. What is the user need? What is the context? So, what is the context of use, and then the whole end-to-end which we talked about in the previous video, what are the different touch points that the user needs to have with your product to be able to create this whole end-to-end experience? When you're starting to design a new concept or idea for a product or service, start with these four questions as a way to frame the opportunities and the problems you want to solve. So for example, let's take a look at a watch. A regular watch, not like a smart watch. What is a user goal? I have a really busy schedule throughout the day, and my goal is to be able to always be on time to all the different meetings and events that I have to go to. That's a goal. What is the user need? To really be able to see the time at any given point throughout their day. What is the context of use? So, if you look at a particular user, let's say the professional who's running around like meetings and events throughout the day, you need to understand how are they going to use it, what is the scenario, what is the lifestyle we sit in the city, or in the car a lot, and they like, what are they using, public transportation, are they walking? You need to understand that context. Then the end-to-end for this particular user is really looking at the day in the life of this person. From the moment they wake up, all the way to the end of the day, and they go to bed. That is the whole end-to-end to understand experience of this watch. So with these four questions that you have as a framework, this is really the learning phase. That's one of the key parts, the key stages of the overall product development cycle that you see here, where you have the learning aspect, understanding the user, and their needs, and all the things that we talked about in the previous four questions, and then you go into creating brainstorming ideas. How can you come up with a solution for this particular problem and need that users have. Then after you have a good idea, you normally go into the implementation phase which is the building part, like the engineers and different team members are starting to create this product. Finally once the product is created, you launch it to the public. But what if the ideal was wrong? The main problem is that you've wasted a lot of time, right? Not only in terms of like the time that the team has spent building this wrong idea, but also the time that users are spending trying to use a product that is just not right. That's why we talk a lot about the user-centered process. In this process, we really focused in the learning phase, and the idea phase. We add this third point which is the testing and iteration phase. What is this? So, when we look at this a little bit closer, when we started talking about learning and understanding those four questions on what is the goal? What is the user need? What is the context? What are the different touch points? You really understand a lot about the user. Then you move into the idea phase where you are creating a lot of concepts and design ideas, and with the main addition here is the point to test and iterate. Which means really to evaluate those ideas that you came up with with users getting feedback, and then going back again and iterating on the design. So, you going through this loop of this three things of idea, test, iterate, and learn many times throughout various different fidelities of design. All the way from just paper sketches, to really polish interactive prototypes. That's how you refine and you refine an idea, before the team is ready to actually implement it and build the product. So, when you look at the products that I have got with all these different points of learning, ideation, implementation, and launching, you really want to focus on the user center design process which is an iterative design process of learning, ideating, testing, and iterating again. So, let's take an example to go through this process. Let's say that we learned that an elevator is too slow and so therefore, the CEO decides that they need to rebuild the elevator, and have a faster engine. But, before actually trying to go into this implementation approach, it will be interesting to learn more about the user and talk to people who are waiting in the elevator and maybe you find out different things. Maybe the elevator is not that slow which is the way is too long to get to the elevator. So, you can find different solutions for those pinpoints of the way being too long and you can just put in better music, maybe you have like little benches or something where people can sit and making more comfortable for the weight rather than spending a lot of money in trying to create a faster elevator, because that was not the problem. So normally, we are very solution-focused, and we try to focus on what the solution could be without really understanding what the user problem is. That is the main difference with user-centered approach is to focus on really learning those user needs, and being able to ideate and go through that iterative process where you keep learning and learning more about the user, and their aspirations, their needs, and different insights. Now that you have a good understanding of the process, let's take a look at some examples of good and bad UX. 4. 10 Rules of Good UX: In the years that I've been working in the user experience discipline, I found around 10 rules that are really good to keep in mind for defining what good UX is. So, let's start with the first one. The first one is familiarity and intuitiveness. What this means is that when you think about a product, the product that you're designing is to speak to the user that you're designing for, and what's their language, how they're going to interact with this? The concepts that you are going to put on that product should be familiar to that user, should be very easy and very familiar to them. Remember the example that I talked about, the new user interface with a desktop computer, that was a huge hit because it was very familiar. It was very intuitive for users. That is a really important rule when you're designing something. So, the second rule is clarity and simplicity, but the really hard part is to boil it down to what is the core thing that this feature is going to do. It actually takes a lot of courage and determination to really strip down to the core because you feel like you're missing something, but at the end of the day, your users don't really need to have all these bells and whistles. So, here is an example of how Google search using voice works. In the left, you can see that the entry point, it's still a very simple search page, where you not only have an input box now, but you also have a button with a microphone, which tells the user "Hey, you can speak." Then when you click on it, you go to the next screen, the middle one, where as you're talking, the UI is pretty simple. It's just white, and it just starts forming the query that you're speaking. So, whether in New York City, and actually, the gray part is telling you how to auto-complete it. Then you let go of the button and you move to the third screen, where it gives you the results. It's almost a little uncomfortable as the designer to say, "Okay. The experience is just going to look like this, right?" On the second screen is just a button and a white screen. You could add a lot of bells and whistles here, but it's really just focused on the task and keep it really clear and simple. The third rule is around responsiveness and feedback. This one is around making sure that the system, the technology that you're using is providing the right type of feedback to the user at every step of the way, so they know what's happening, what are the inputting, what are they doing to make sure that the system is responding and giving them feedback on the actions they're taking. So, an example here is the sign-up experience for Twitter, which is great. As you start typing and filling in this input boxes for your name and email address and your password and username, it actually starts telling you on the right side, "Yes, the name is great," or "The username is available," "It's not available." This is really important for users because the system is giving the user feedback real-time, saving them time and making the experience way more efficient for them. Rule number four is consistency and standards. This one put the load on users to make sure that they understand the different words or concepts mean the same thing. So, always try to strive for consistency and leverage platform standards or different system standers. As an example here, if you look at different mail applications, either if it's an iOS on the left or on Android on the right, you still see some consistency in some patterns. For example, if you swipe right, you mark as unread for an email or if you swipe left, you want to move it or delete it and so forth. This consistency in patterns and behavior is super useful for the end user because they don't have to learn and relearn these different concepts every time they use a different mail app on their phone, whether that's an iPhone or an Android or whatever that is. They already know this behavior, and it's just much more easier for them to start using it. Rule number five is external consistency and holistic brand voice. What this means is that the visual appearance of that brand or the product should indicate what is the purpose of this brand, what do they want to do beyond the actual products. So, if you take a look at Coca-Cola, which is, it's a drink, right? But Coca-Cola, it's, as a brand, goes beyond the product. It's an iconic bottle that you can see it and you can see it in different shapes. You can actually see in the bottle itself. You look at the color red and white and you see the shape of a bottle and you know it's Coke, 100 percent. You also see how the brand goals to talk about its purpose in terms of like how much they care about the community and giving back to the community. This is an example of how they want to use their bottles to be able to recycle and re-purpose the use of the bottle itself, which is great. It's a great purpose for a brand. When you see the bottle, you not only think about the drink, but you think about all the different things that the brand stands for. That is the voice that you want to have externally as well. Rule number six is focused on the user. Even when you're creating a product, you want to be able to represent the user because the user is not going to be there in that meeting or that room when you're making decisions. You want to be able to make sure that the user is represented throughout the whole product cycle, making sure that we don't lose track of who the user is and what the needs are, and what are the opportunities for these user. How do we make this much more delightful for them? That's our core job as a UXer. Rule number seven is collaborate. This is one of the most important ones that I always talk about because there's nobody who's a genius that works in a silo and comes up with this amazing design idea that it has no flaws, and it's ready to be implemented. That just doesn't exist. The process of creating a good solution, a good product or service, is to really collaborate with a lot of different disciplines within UX, outside of UX. The stronger the different point of views are, the better solution is going to be because you talk about it, you go through pros and cons, you test it, you validate it. This collaborative process is super important to make sure that the end solution has been thought out from beginning to end and through many different points of views. Rule number eight is testing and iterating. Successful UX is when you are coming up with some ideas, some assumptions, based on things that you've already learned, and then being able to test them with users and making sure that they're validated, that the assumption that you had about this great sign-up experience for your new product is actually really useful. The only way to understand it is by testing it with user and validating that assumption. Rule number nine is to have a clear product strategy. What that means is to really understand what is the value that you're adding to users, how are you going to deliver this experience and what is the goal of the product? What do you want to achieve? Without having the answer to this question from the get-go, you're not going to have a real clear process to be able to deliver on that strategy. No matter how beautiful the design is, if your design is not based on the answers to these questions, it's most likely that users are not going to use the product. The final rule is to make it delightful. So, it not only should be beautiful and useful and easy to use, but it should just be fun and delightful to experience. Let's take a good example here. Look at Facebook. When you are pushing the thumbs up, you have this really delightful kind of animation to make it grow. It's just really fun and cool to see. As a baseline, it's important in any experience that you create is useful, adds value and it's easy to use, but truly great user experiences are also delightful, and that's when you create a memory, right? You remember that when you push that button for a thumbs up, which basically is just communicating, "Yes. I like it," it actually was fun and you remember how it actually it make it bigger and bigger and bigger. That is a memory that you will take with you and it's delightful. Now that you have a good overview of the 10 rules of UX from my perspective and a few examples in the real world, try to keep this in mind as you try and use different products and services. This is a great way to get started with getting familiarized with the user-centered approach. Next up, let's unpack the user-centered approach with a real case study. 5. Case Study: Google Classroom: Now we're going to go in detail through the user-centered design process by applying it to a case study, a project I worked on called Google Classroom. So, let me give you an overview of Google Classroom. When we started this project, we wanted to understand what are the key problems that are happening in the classroom today. Classrooms have really not changed that much in over 70 years or even more. That is terrible. If you look at how many different environments have changed like an operating room or even an office space of change, they've changed dramatically with the use of technology and all the advances that we have, but not in the classroom. You take a look at this picture of 2018 and 1940, pretty much looks the same. So, we went into classrooms to observe how teachers and students were interacting with each others. We saw a lot of things, like creating an assignment took a lot of time, teachers spending a lot of times on the photocopy machine, distributing papers and collecting them, and so forth, which has not changed in decades. That's how it used to be when I went to school many, many years ago. The other example here is, we saw this poster or this set of posters in the second grade class, the teacher trying to explain to students how to use Google Drive. That hit us pretty hard, knowing that it was so hard for a student to use Google Drive. When observing all of this problems, what we realize is that teachers and students we're spending a lot of time doing things that were not about teaching or learning. They we're doing things to explain how to use technology, figure out how to use technology, and that was the main thing. How do we help teachers and students save time, so they can focus on teaching and learning? That's how Google Classroom came about. With Google Classroom, what we were able to do is to allow teachers and students to save time and be more efficient, instead of trying to, like the teacher, going to the photocopy machine and printing, distributing, collecting, grading, and sending back to their students. Now, with one click away, they could just upload a digital copy and create copies for all of their students through classroom. No more time wasted in doing all of these tasks. For students, it was also saving them time by just finding everything that they need to do for a class in one location. What you saw was the end result of what a Google Classroom came to be. What we want to focus on the next videos are the different phases of the iterative design process, mainly the learning, ideation, validation, and iteration process. 6. User Research: The first step for the iterative design process is learning which is about user research. Why is user research important? Because it drives change and product direction. It opens new horizons for innovation. It provides context and understanding. It challenges assumptions or validates them. It supply solutions for disagreements on points of views. And it test the usability of the product. There's a lot of research methodologies to go throughout the product development cycle but what I want to focus on today is on the one-on-one interviews, which is a really good methodology even if you don't have a research background to understand how to talk to users one-on-one and be able to understand their user needs and pin points. So, let's talk about the user interview script, which is basically a document that you create to be able to guide you through this one-on-one interview with all the different participants. There are things that you want to have there that are important, so you don't forget, and then you know how to actually go question by question. You're fully prepared for every single type of questions that you might want to have in this interview. You want to have things like, what is the goal of this study? What kind of questions that you want to answer at a high level? Like an example of classroom, how are teachers spending their time in the classroom that are not teaching moments? What kind of tasks are they doing? How much time they spending on this? So, you want to create this interview script that will help you guide the conversation with the participant and making sure that you address any concerns and any questions that they have. So, let's take a look at an example that we did for classroom. So in this example, this is a guide that we use, an interview script that we use when we first started to understand how are teachers spending time. So, you want to have something like, what is the purpose? Outlining what is the purpose of this document and what are the guidelines and you should be following. Then it goes into the next section; the introduction. How much time should you be spending on introducing yourself? What are the things that you should be saying? Thank you for your time, what is your role? And so forth. Then, you move on to the general questions, and you also want to time it. This is probably going to take around 10 minutes and you have some notes or the past participant feels a little nervous or uncomfortable, then you should do this or you should do that. Then, you start asking whether there's some icebreakers and like, hey, tell me more about you? What do you do? And so forth. Then, you can move into a little bit more of the questions that are more detail. Like, for example, if you're talking to a teacher, what are the type of questions that you want to ask? Maybe some of them are more general, some of them are around a specific thing, like assignments. How are they distributing assignments to students? How are you grading them? And so forth. Then, you finally have a conclusion. Give the participant time to be able to ask your questions as well. Do you have any other comments? Do you have any questions for me? And so forth and thanking them for participating in the study. One thing I wanted to note about the questions as you write them and if you take a look at these examples here, all of the questions are open-ended and they're not leading questions. Please try to avoid asking questions that have yes or no answers. You always want to have open-ended. You'll allow the person to explain and talk as much as they want. That's where you want. You want it to be able to hear them talk about their experience doing a particular thing or whatever it is that you're trying to find out. The more open-ended, the better because they're going to share more insights with you than through a leading question that is just a yes or no or I don't know answer. The goal of having this one-on-one interviews is to be able to identify patterns for these questions. As they share things, you start noticing patterns of things that they talk about or they seem to have a very similar pinpoint every time that they have to create an assignment. Or, they're losing a lot of time every time they're collecting all the assignments. The script is also very important because as you go through many one-on-one interviews, you will be able to have a consistent approach. So, you start seeing patterns of things that all of these different participants are experiencing and therefore you start clustering themes, right? Those are the themes that are going to help you identify these are really important problem we should be solving, we should be focusing on or this is an opportunity space for us to create something better. That's the main reason of the research, the one-on-one interviews and then being able to analyze it to identify patterns. Through research, you gain a lot of insights that you may have not thought about before when you started. So, for example, with classroom, we said, "Okay. Yeah, we need to talk to the teachers and the students." But as you talk to a lot of teachers, you realize there's other roles within the school that are very important in their daily lives. Like, the school admin or the teacher assistant and so forth or principal or the parents. You start identifying all of these new roles that exist for this environment which then help us understand who is the primary target audience and the secondary target audience, which is what we want to talk about in our next video. 7. Target Audiences: Now let's focus on the target audience. The goal here is to be able to identify who is your primary audience and then your secondary and tertiary. As you are designing an experience, you want to focus first on your primary audience and make sure that all the user flows and the experience for the audience are flawless and very seamless. Let's go through an example with the iPhone. We all know the iPhone, and we know it's targeted to consumers. The consumers is a huge amount of people it's a big category. So how can you start thinking about what is the primary audience for them, within consumers? A good way to approach is to try to understand, like certain segments within that primary audience. For example, within consumers, you have the music lover, the person who really uses a phone for a phone, but they also want to have all the music there and be able to listen and access it and organize it at any time. How do you design an experience that is optimal for this type of consumer, that really cares about music? Another type of a consumer is the mom. What do moms care about? Moms are also really big audience but there are certain patterns of qualities and values that they prioritize and those are the things that we want to understand when designing experiences targeted to moms. Then, you also look at students. What do students care about? Besides of course the basic and the foundational things that a phone needs to have, what other things do they care about besides taking great selfies so they can post on social media? So, you start thinking about this and what their priorities are and then you can start identifying what are the top things that we should be thinking about when designing this experiences for them on the iPhone. Let's look at Google Classroom and the users that we have. For us, the primary audience when we started with classroom was teachers. The reason why we focus on teachers, was because they were the ones that had the most burden to really organize and perform basically in front of a classroom. They need to be able to be on top of their things every single second that they have in the classroom. So we focused on them and trying to help them save time so they can focus on teaching and that's what we focus on them as a primary audience and all the different experiences that we created for classrooms, were designed for them first, to make sure that the teacher can easily create a classroom, they can create all the things that they need to do, how do they communicate with students? How do they create assignments? How they retrieve assignments? How they create multiple copies in one click for all the students? How can they reach students directly? All of those things we're with the teacher in mind, that was our primary audience. Our secondary audience were students. We wanted to first focus on the guide, which is the teacher like creating this experience for their class and the students that's okay they're participating in this class. What are the important things that they need to be able to complete and achieve as the daily task that they need to achieve? The teacher was allowed to create a class. How can the student join a class? If the teacher was posting an assignment, how can the student find the assignment easily? A third category are parents, especially when we were designing for K to 12 which is a mark that we started with. Here parents, You know I'm a parent I have a little daughter, and we're opinionated. We want to know everything that is happening in their schools, but they're clearly not the most important users. We didn't really, think about addressing their needs for the first launch because that was not the main thing. The main thing was making sure the teachers and students had a really good experience. Above all, understanding who your target audiences helps you prioritize the features and the sequence of launches that you want to have. As you define the target audiences for your product, it will help you tremendously to create the user journeys for those audiences. Which is what we're going to talk about in our next video. 8. User Journeys: So what are user journeys? At its most basic, user journey are the steps that the user have to take in order to accomplish a task or a goal when using a product. User journeys are important because it helps you identify what are the core task and be able to prioritize them to make sure that you are defining every single step of that core task in a very seamless way for the user. There are two types of user journeys that we use at work. One are the critical user journeys and then the toothbrush journeys. The critical user journeys are,what we call of course critical flows for the user to be able to use your product. They don't happen very often, but they're critical for the them to be able to use a product successfully, and the toothbrush journeys are things that the user is going to do on a daily basis with your product. They will probably do it off many times during the day. As an example is, G-mail. You're going to be like checking your e-mail multiple types a day. That's a toothbrush journey versus signing up to use G-mail. That's a critical user journey. A critical user journey on classroom will be creating a class. So, as a teacher you will come in here and do your Google Classroom homepage. If you don't have any class created you would just see this empty state, and we give you a little hint to Scylla. He create or join your first-class and point at the little plus icon. So, this is very critical because if they cannot create a class, you won't be able to use a product, and here, I'll walk you through the steps, I click on the plus icon, I get this little pop-up window and l create a class with four different fields that I need to fill, and boom I created a class, and then after I click create, I land on this page where it's my new class and you can start using the product right away. That is a critical user journey, because it doesn't happen very often. But, if they don't, they're not able to complete it, they're not going to be able to use the product, and because it's so critical, we spend a lot of time designing this flow. What is the minimum amount of information that you need from a teacher to create a class? What is the optimal landing experience when you create a class, what do you want to see, what do you want the teacher to focus? So, those were all lot of things that we consider a lot, and we change and iterate it a lot to be able to land on what you see right now. An example of a toothbrush journey and Google Classroom is something that happens on a daily basis. So, as a teacher I want to post an assignment. Teachers are posting assignment on a daily basis, every class, everyday. So, it has to be very simple, very easy to do it. So, here was of course is the main entry point. We just started with one line and say, like, "What do you want to share with your class?" Then we started thinking about the other things that are important when you're posting an assignment. Maybe you want to attach something, maybe you want to just, also post this across different classes that you teach. So, you start gaining insights and you start making the design more robust, but you still need to think about the simplicity of it. The reason why we have toothbrush journeys and critical journeys as two different bucket is because, most of the times we start right away fleshing out the toothbrush journey. If I use G-mail, the main thing I'm going to do, is check e-mail, write email and reply to email. So you design that experience in and out all the time, like I just said. Just posting that assignment we iterate it so much in it, and then we sometimes tend to de-prioritize the critical journeys, because it's like, "Oh, yeah well it's go in the settings and changing the time zone and how often do you do that." So, you may not focus on that as much but they are critical because it's important for the user to be able to, easily find them and be able to successfully accomplish that task. User journeys help us understand what are critical journeys and what are toothbrush journeys. Which is a great way to start identifying, what are the top things that we should be fleshing out in the design phase. How do you start sketching and what are the top ones that we should be focusing on? Which is what we want to look in our next video. 9. The Iterative Design Process: The goal of the design phase is to really go into the details. What is the experience that you are creating? With a user journeys, you help prioritize which was used to design first. Let's go through the different design phases that we used when we were designing Google Classroom. When we started, we started with paper prototyping, and you see this example where we were just trying to figure out what are the important elements that a teacher would like to see when they're creating a class and when they're posting assignments. We knew that those are important user journeys. So when you start designing the user interface, you want to play with different layouts, different hierarchy of elements, but you really don't need to look into all the different details. If you see here, all these pieces of paper are cut into different modules. You can actually use the paper as the actual UI and you can test it with users by putting them on a table or something, and then you move pieces as they interact with the interface. It brings them to that mindset that they are actually interacting with an interface regardless of the fidelity. This is paper, super cheap, but it's really easy for us to be able to test concepts, and also not get attached to a different concept that you have because as we talked about previously, sometimes we get attached to an idea that we put a lot of thought into, you're putting a lot of different ideas out and testing them. So it's easy to toss them out and not get attached to things. Once you have tested many ideas on paper prototypes, and you've learned a lot of insight, and you're like okay now I think that design and the layout for this particular user flow should look like this. Now you are ready to move on to the next fidelity, which is wireframing. The example that you see here has a little bit more detail, but the basics are still there. Like here, we were trying to define what do you see on the navigation if I click on an app? What or like how do you see that on the homepage, and then when they go into one of the classes, how do I see the main input which is being able to communicate to my students? I think there's a message versus an assignment. So we were trying to define the two differential points for this box and just calling out at a few of the most important things that we wanted to do. Normally you wouldn't use color. I'm showing that the this example because, we just wanted to test this with users and see if we could get a different reaction by adding a little bit of color, but you should be able to test it without having color. For wireframing, there's a lot of really simple tools that you can use that will allow you to just put boxes and instead of texts you could put little rectangles. I've used PowerPoint, or Keynote, or Slides whichever tool you're most comfortable with. They have a lot of really good ways to just be able to use a layout and they even have templates and so forth. It's really easy to just get started and putting ideas out there so then you can test them. Here you have more confidence that the user flows that you've been creating, and you've been iterating after study and studies with the teachers and so forth. You can move on to now we want to start thinking about the actual visual hierarchy, and how do we start defining different guidelines and systems for this product. For us, it was very important that each class would have its own personality. So it's very easy for the teacher on the homepage, which are the squares that you see on the top, to easily recognize, oh this is my class for like third period versus fourth period and so forth. For the students to be able to say this is my biology class, this is my math class and so forth. So we wanted to create themes and we wanted to create a color palettes that would help them visually identify which class is which, and adding the visual elements here is really to add another dimension for understanding. Like I said, talking about creating a really good visual system to identify classes really easily, and giving some personality to a particular class. If it's about astronomy, you want to make sure that you can be able to theme it accordingly, or versus it's an art class, or music class, or and so forth. So we wanted to accommodate for those things, so each class has a personality as well. As you're getting started, it's important to really start with sketching. I think that's important pen and paper and really just sketching ideas. You could use post-it note, along post-It notes are great when you're trying to design for mobile because it's like the right size. So just sketch and just put it out there and just put it out on a table, on a wall, and try to see, what is that flow looking like? What can you see, gaps where you can make it easier, where you can take and remove a stack, or maybe add a step that is valuable, but that is a very important phase, and then once you feel good about it, you can move into the digital format. If you want to start with wireframe it's great, but you can also start defining it a little bit more, with higher fidelity if you want, whatever tool you're comfortable with, but just remember that the important thing is to really, to validate and test each of those assumptions that you're coming up with, to make sure that you're going in the right direction. That's the most important to be able to get feedback on those ideas that you're exploring. 10. Final Thoughts: So, that's it. In this class, we covered an overview of the UX process, examples of good and bad UX, and a case study. I hope you were able to get a better understanding of the UX process, and a deeper understanding of what it means to design with the user in mind. If you have examples of good or bad UX, please feel free to upload them, share them with us on the project gallery. Thank you so much for joining the class. I hope you enjoyed it. 11. Explore More Classes on Skillshare: way.