Transcripts
1. Welcome: user experience sign is so much more than building beautiful interfaces. It's really about creating experiences and products that are well suited to what your user is trying to accomplish. That could sound like really daunting task for a lot of new designers, but I found that the best way to become a better designer is to do projects and to really put yourself out there in this course, What you're gonna learn is the key techniques that user experience designers use every day to build products. The way we're gonna learn these is by doing real projects or new three projects. Let me walk you through them. The 1st 1 is an app critique of your favorite at. I'll teach you how to create personas that represent different users, visually mapped the user journeys of these users and identify areas to improve the problem . The second is a usability test. Testing products with real users is an essential part of the design process. I'll teach you how to structure the agenda of the test and how to organize feedback useful ways. Finally, I'm gonna show you how you can design the wire frames for your first. We'll start with some brainstorming. Hop on over either PowerPoint or keynote to create wire frames, and we'll finish by adding interactions into your application. These skills are fundamental for successfully building any app, and I'll give you an introduction as we move forward. So if you want to start building riel projects and learning skills, let's get started.
2. What is User Experience Design?: before dive again. We should probably ask ourselves, What is user experience design? So you exercise can broadly be defined us how somebody interacts with an object. So in the background, we're looking at this door here, and it's pretty rusty looking door down. I can imagine there's an experience interacting with that door in the door. So when he grabbed it and I feel rusty when you open it, it might be kind of jammed. You open up further. A creek says it open, you go through. It slams on your weight shut. So basically there's a whole experience and interaction with that door, and this is a physical object. But I'm sure the context you may have heard of with you exercise is more digital. We'll look at what that might look like. So us designing, then user experience design is creating. Those experiences here received bold a fiscal project, so this woman seems so put on a headset, and she's probably experiencing a VR experience, a virtual reality experience. So both those air considered user experience. Now let's break those down. First of all, putting this headphone over headset on Rather is putting on a strap over your head is fastening into the back, potentially making sure it fits moving around. Does it feel luxurious? Does it feel like a plastic wrap? What is the experience with a physical object event when it turns on whatever experiences listening, watching in virtual reality, there's a whole another set of experiences that take place there. UX design is creating experiences, and British look at more of the digital context. That's important because digital experiences are becoming increasingly prevalent, friendly, intuitive. You might not think of the home page of an iPad isn't experience, but really, is the idea of swiping between different pages or different page adapts. Reminds people of a book on the iPad. Kind of looks like a book. And so it's powered boring, different types of experiences that exist elsewhere. So we're gonna look at creating user experiences specifically for digital context. So let's let's divert it
3. UX vs. UI: you may often hear the term user interface or you I use anonymously with user experience or you X. You may even see job tales that say things like you excuse my designer, while the domains of user interface and user experience can sometimes overlap, do you? I the user interface and the U X, the user experience are very different things. Simply put, the user interface is how things look, while the user experience is how things work. So what might this look like? So this picture here, I believe it's from the Microsoft other Windows seven or Windows eight Start menu. You see all these different tiles that were laid out there. That's that organization. Ski the colors is really the user interface. It's more simple to grasp these Aaron face. It's what the tiles look like. It's the physical design that they have. It's the color scheme, the typography. The layout is essentially what it looks like, so if that's obviously you, X is a little bit more abstract. So he's your experience. Design is how people interact with the device or the application. How will people go between different screens? If they click something, how will it open into a new app. How will they get back to this? It's basically a lot of, you know, charts like the one you can see here indicating which, you know different screens will open up. I also noticed that it doesn't have a lot of colors, and it's very much about organization rather than the visual appeal. So, really, it's how people engage with nap or product or experience. Another big category within you is extreme science interaction, design Howard. Different items within the application interacted with. So we're gonna focus on UX design in this course. But we'll touch on user interface a little bit, and some of the key idea is there.
4. Career Paths in UX: before diving into the projects themselves. Let's look quickly at what different career paths can exist for. Someone who practices or studies US design. So there's many, and it really can be applying toe any field from practices you'll learn here. But there's really three main categories I find. The 1st 1 and the one you might be interested in is user experience. Designer. So what you're doing here is building the experience that end users will interact with. So again, this has elements of the user interface, so you might be looking at the different color schemes and the different icons you'll be using. However, it often is. What is the different flow? What does the organization information architecture look like? So this might include tasks like wire framing, considering task flows and prototyping different generations. Another one that might be a little less known is the user experience researcher. They spend their time qualitatively and quantitatively analyzing user needs. I'm threes ability. Tests here is tick analysis and or a B testing. Really, what you're trying to here's understand the user experience and communicate that to different teams within your company or within your team. So you want to understand how, what people are clicking on what they really like on your application, what they like from other applications, understand their needs a little bit more. So you communicate that to either designers or engineers with whoever is interested in your company. Finally, it's the role of a product manager. So product manager sits at the intersection of design, technology and business. It's really an interesting role in the sense that you're trying to lead on and execute the product vision. So you want to understand what the and gold looks like. You're gonna be a little bit more high level than what the U X designer might be looking at . And you want to rope in different teams to different expertise from the design, technology and business teams. So all of these roles require the knowledge of user experience, design and, more specifically, human centered design practices, which is what user experience sign is all based around
5. Introduction to Project 1: App Critique: Okay, Project one. Let's get started. Project One's gonna be an APP critique. This first project is gonna be about critiquing the user experience of your favorite mobile app. Now, this is a really comment project that UX designers and UX researchers do in both the job in their day to day roles as well as during the interview process. So definitely something to get familiar with. So go on your phone and choose any app that used regularly for me. I'll be using Spotify. Just pick something I'm familiar with and hopefully you're familiar with two. But don't worry. If you're not, what we're gonna be doing here is using human centered design methodology to dissect great experiences. So that seems like a lot of mumbo jumbo with a lot of big words. But don't worry. I'm sure you practical steps that we're gonna need to do to go right through that. Let's look at why. How? Why, what we're doing in this project. So why we're gonna be learned why experience is built the way they are? I chances are you are using an app frequently. It's because you like the experience with it. Let's understand the lessons that we can glean from there how we're gonna use foundational users can design tools like task flows, personas and user journeys to understand how users interact with the experience. And what, of course, choose nap of your choice. I'll be using Spotify on and just got a recent new redesigned so actually haven't looked at it too much, so I'm excited to look into that a little bit more. Now let's look at our approach, this project. So let's start the goals of purpose. It's really important to understand where the company is coming from for building the experience that they did. So three things will look at or the mission of the company. What is their overarching goal? The metrics that they might track. They might care about to understand what they're trying to move, and finally, what other business line? So what are the key actions they want to be looking at? Second, we could go to user personas. I'll teach you how to go through a big list of people that could be using the app and focusing on key demographics also, then map out the user journeys of those user user categories. This is how someone might interrupt for the project who comes from that different user group. This will be in the form of task flows as well, so we'll see how they accomplished their tasks. Finally, after all that, we might analyze some frictions where some areas we can improve in the app. Don't worry. I know it's kind of crazy. Think we're gonna be critiquing your favorite app or to suggest suggestions that we can improve? But that's we're going to, So let's died in.
6. Understanding an App's Purpose: when analysing user experience, it's always a good idea to start the purpose and goals of the application. This will help to rationalize why certain decisions were made on day when using the frictions when identified. The frictions. At the end, we can identify frictions between the goals and purpose of the application and the goals and purpose of the user. So good place to start. Almost always, I like to start the mission. Often these big, bigger companies tend other mission posted on the website. I'm sure you can find it if you can't on application you are currently using doesn't have a mission statement public. Just think about what it might be. And Spotify Skase. Their mission is to I'll just read it to you is to unlock the potential of human creativity by giving a 1,000,000 creative artists the opportunity to live off their heart and billions of fans the opportunity to enjoy and be inspired by. So I've already highlighted it, but this mission statement tells me, really entering things to that. I concede one. So the 1st 1 is 1,000,000 of creative artists and billions of fans. Are there two different user groups that would be important for understanding who are the different people who might use the application. And secondly, we can understand what are their purpose. So millions of creative artists want to live off their heart. That is their main purpose. To essentially make money through the application and billions of fans to enjoy and be inspired by music. So already give me the user groups as well as what their key intentions might be. Now every app tracks a few different metrics. So you can imagine google dot com I search. You know, my care a lot about the number of searches better performed every day, potentially the number of their auto complete. Or, you know, when you search something, start typing something Google. Different suggestions pop up. How many of those you end up clicking to see the accuracy you might even see. Do they go from google dot com into other Google properties like Gmail or Google photos. So, looking at Spotify, or look at any application, think about what the at the things they might track are, you know, for applications like mobile abs, there's three categories. They're pretty comment. I'll go ahead and list them off on the side here. So engagements AKI one. Do users use the app a lot? Do they engage with the content inside the APP? What features did they like the most? So engagement can really be thought of as a proxy for value. So how, if they engage a lot with one feature that probably received a lot of value from that feature? For example, if I always go to My Discover Weekly playlist on Spotify, that might be the future I like the most about Spotify really important thing to track, and I'll look at that wouldn't consider Spotify. I think it might be applicable to Europe as well. Another categories. Retention. Do you just keep coming back to the APP, which features in the most sticky and what type of users tend to stick around? So just the stickiness part that's basically is there. One piece keeps getting me to come back to the application again. If I love Discover weekly, that might be the stickiest feature for me. I examples of this might be notifications. You want to come check your notifications to make sure you're not up to date? It might be messages, so Facebook Messenger for example, might be the reason you keep going back to Facebook. These are all different areas to look at what comes to retention and 1/3 category. Here's conversion. Is the AB able to make freezers pay for a subscription? Are their premium subscribers paying for many months or churning after their child ends? So conversions all about How many people are we converting toe? Are paid plant, or how many? How much money are we making from a different user or a different group of users? This is obviously important one to track a revenue sick. It's also important to understand how and who are the people who want to use that more. And one unlock those premium features. The idea of churn is another one that's often tossed around. It's basically if someone is a paid user or just user. In general, turning would mean they leave. They're no longer paintings. They're no longer user general. This might be an example of if you use a three month trial, which I believe Spotify has, and you leave right after you. For your turned user, they would like you to stick around. So that was her three. There's tons of different metrics. You contract, Have a look at this and see if they're important to you or your for your application. Finally, it's important. Understand? This is objectives or revenue sources so great you're designers. Don't only think about the users using the application, but also one of the goals of the company and ideally, how do we make those work well together?
7. Creating Personas: now, the really important thing that user experience designers do is empathizing with the user. One tool that's often used in the situation is the use of personas. Let me tell you a little bit more about what that means. So there's in Sparta Vice case millions of people who use the application and you can imagine they have all different types of needs. You may be a hard court rocker, and you just want to listen to rock music. Or you might just listen with your significant other. Potentially, you like to listen while you're running. Or maybe your Apple music user, who is trying out Spotify and see if they could switch obviously very different purposes. It's really hard to empathize with the user. There's so many different categories because you don't know what a generalized move might be for each individual users. So common way to approach is is focusing in on few made user groups. So I'm using Spotify but encourage you do this with your application. What are three different main user groups they can look at for me? I might look at music lovers. This I'm gonna describe music lovers. They listen music for over two hours a day. They subscribe to Spotify Premium. They discovered new often, and they share their playlist with friends. Uh, if you can imagine, there's probably millions of people who fit into that category. So while I'm generalizing based on a specific category, I'll be able to understand how they might generally use it, as opposed to looking at a crawl across all different user categories. At the same time, another group might be casual. Listen, listeners, they listen to music for under four hours a week. They listen while doing other tasks. They like a small set of music and doesn't they do not discover music regularly. And finally we have artists. So this other one, those mentioned in our mission and they want to post music to their fan base. They wanna look to earn income through royalties. These air their goals, and that's what they want to do. So, at this thes three categories, I think I might have 60 for 70% of Spotify asshole music base covered in generally these different categories. So while I'm not covering everyone, it will be impossible to cover everyone. It's important to focus on different groups and think about how you can prove it for those groups. Now let's choose one of these user groups to focus in on, and we'll go ahead and understand them a little bit deeper. Let's start with the music lovers. So this is a common phrasing that might be helpful. Understand the desires of that persona. So as a music lover, I want to imagine what they want to do. It might be discovering your songs before they go mainstream. They might want to share music with my friends, their playlist, text messages or CDs. And they might want to stab today with my favorite genres, falling artists and curated playlists. So think about what your persona might want to do what more your user group might want to do. This will be important. Understand what they're trying to accomplish. Another tool. The UX designer Arsenal, is the persona, so it's a common one. You might have heard of it, but basically it's all about is trying to give a more fleshed out profile toe one of your user categories. So I'm to continue, go with my music lover persona here, Um, and this is where I'll start with the name and a picture. This helps me understand what this person might look like, what who they might be. But in my act like answer easier for me to refer in the future, I might ask myself, Is this how Jake might use the project? Or is this how you know Jake will want to accomplish this task? So the name is a good place to start. Could be arbitrate depends on what you want to make sure fits kind of vibe that you're going forward for the profile you're trying to fill out. Now let's Philipson information about Jake, so demographic information is a good place to start to. He's a 32. He lives in Boulder, Colorado. His income is $45,000 a year, and his occupation is a radio technician again. These are quite random, but I'm trying to flesh out a profile of what a typical or what an example of user for my music lover category might look like. Just think of different elements that might be associated with the category you're looking at. Another category to look at after demographics is what is their behaviors. So Jake might listen to music every day goes to two different concerts a month, throws House parties. He uses iPhone and desktop to listen music so importantly, being a little bit more specific than what my user category might have been. So the concerts people wasn't mentioned when I talked about music lovers and house parties is imagine, either. But as you can imagine, there are probably people who fit into this general persona. So I'm trying to narrow down so I could understand a little bit more about what they might use. By nearer you down, I'm able to specify my solution or specify my analysis with this type of person. A month after behaviors might want to look at what other desires so Jake might want social connection being social important. I want to move to New York again. Specific, potentially specific tested, This fictitious portfolio you must engage critically with music, maybe wants understand what's all about. So that's three desires that could be associate with Jake. Another one is his needs and goals. You might want to create playlist for different occasions. You might want discover new music. I want to find unique concerts. You might want to share music between friends and he might want to also get updates from his favorite artists. So this what persona looks like you can imagine. Now I have a little bit more information on what the user I'm looking at. What the user I'm trying to analyze the application for might be interested. In importantly, while this information is kind of fictitious and just brainstorm, you could again imagine that there are probably people fit into this category. The important secret of us signed improving applications is that you can't do it for everyone and honestly can't do it for a broad, broad sweeps at the same time, either. It's often helpful till we get a very small case and it build up from there. So let's move forward with Jake as a music lover persona in mind.
8. Mapping Task Flows: awesome. So we have a little bit of a better understanding of who the different user categories are for application as well as a detail person out what one user might look like. So let's move a step further and understand the user journey of these users with task flips another framework tool that could be added to the U. S arsenal. So fundamentally, What we're asking is how do users move through the APP? And importantly, it's all pinned down by what is their goal with the application with no sign of two different people here, you'll remember the picture of the top is our casual listener, and the bottom is Jake are persona. Let's think about how the casual user might attract the application so our casual listener might have the objective of just shuffling playing a song before they go for a run. So how would they get to this point of the application? So first, all they may open the app, probably gonna open the app. They'll go into the home page from the home page. They might see a tab that says, You're heavy rotation. This is Spotify specific, but that might be what they click home because, like identify previously, they like a handful of songs that keep using. Finally, it might go ahead and hit Shuffle play. Shelf play is their angle. They may click it, put in their pocket and go for their run. That might be one different user journey or task flow, rather about how casual listener might use the application. So, Jake, we have a little bit more of a flashed out port profile here, so it might understand what he's using as well. He might start with opening app again. He's probably gonna go to the home page, but he might have multiple different things he wants to do. One of them might be he wants with his premium tab because he has access to that hits races most value. He might be a ship in finding a new song, so goes to his Discover Weekly and Promise Discovered Weekly. He actually finds that new song. So in the same vein of how our casual listener found the shuffle plays or end task, playing a new song might be the end of the task for Jake. In this situation, however, there could be a different route. He takes he might go to my library. So this is the essentially. I think you hit search due to my library. You're the genre tab because remember, we previous identified that he likes a few genres. He likes to keep playing. The genre's I find the genre is interested in, and he might play jazz, and that would be the end of his task flow. So right away here, you can see that there is differences amongst different users, and you can also hear there's different objectives that they might have. Let's take it a little further on Jake, so let's look at all the different task list you might have, or rather, the most common ones he might have so again discovered playlist that they like might be a common task flow for this user before diving here, it's must think about the most popular task close that your user might have again for the sake of his exercises. Doesn't matter. They're completely accurate. It's matters that you think about the different process that goes through. What we want to do is identify frictions that might exist in their task blow and hope to improve it in the future, so the safety exercise. Choose three different task falls they might have and dissect them step by step. So again, home discover playlists it might go to search, which is where you find all the new John Ra's. So in this leg genre town, you might go to select a playlist. Okay, Selecting a playlist might seem like the end, but it isn't. It's really platelets that they like, what is like. It looked like they might follow that playlist, so that might be one task another one. Maybe start a song, radio plus like or dislike a song. So evaluate a song. The Russo Radio play a song might be where it starts, because there's that's where the radio flow might start. They might click the button. There's a dr dot, but in where they can either take actions on the site, are on the song on the radio to play radio, go to the player itself so after the radio and finally might like or dislike. So that's a little bit more convoluted, but it's a good example of how they might go about doing it, and convolution might be a new area to fix a different way. They could do this exact same processes going to browse first, go into the radio tab, going to the player again and liking disliking. So I want to put those two. They're in different sections to see that one is more efficient than the other. Potentially, there's there's a different way to optimize this, but there's clearly two different ways they can do the exact same past. So listen, discover Weekly and save songs that you like. What might this look like? I might start home, go to their library. They might then select Discover Weekly so they could get through that way Or they could go through it a different way from home. Might search and they go to sleep, discover weekly. Both ones end up, discover weekly. From there they might shuffle play. They might click about it, and then they might save us on. So the button again is that dr dot type. But in where you click it and you can have more actions, which from shuffle play, they might also go ahead and swipe to save. I didn't know this, but apparently could just swipe to save. You don't have to click to buy them or they might go to the player, uh, go next. They might save it from there. So three different ways to get the same job done here at the end and also the start might go from home to library, home to search. So looking at the screen right now, there's many different flows that the music lover might want to take. Um, so we might think about where these are odd that these flows exists or pension where they're my view. Redundancies. Let's look at what that might look like just on the screen itself. So I took the Discover the players that they like. This is what it looks like. These air screenshots I took. So you go from home to search, which is what that second screen looks like might select the gene drive. Chose indie, um, find the playlists. You know, there's the shuffle playing that I follow the playlist by Harding. So that's how that's how it works. Looks like, and this is a good way to do it just to make heavy screenshots available so he don't refer back to that flow. Potentially find other things through. Interesting. While you're doing that
9. Identifying Frictions: awesome. So we've identified your user groups. We've gone ahead and empathize with one with a persona. And we've credit task flows for a user category to understand how they accomplish in different tasks. That's great. So it's good to analyze. But let's go ahead and identify the frictions and understand the rationale for those frictions in other critiques. You might want to, you know, or you can also do it with this critique. Go ahead and extended. Suggest suggestions to improve the frictions you've put out there for. For the sake of this learning exercise I lived. Just understand the rationale for some of these decisions. This will be more helpful for understanding why frictions exist. And again, we're trying to learn from great experiences. So let's understand the rationale from those great experiences. So therefore, questions I like to ask or I like you to ask yourself after analyzing your application first, is what is a confusing task flow for me. I found that the Discover features have been bucket ID into the search tap, which may be an intuitive I know is that intuitive for me housing for discover for a little while. But then I saw that they were in search now. So where is their redundancy? I identified it, or I mentioned it when we're going through the user journeys. But there's three different ways to save a song. Even either swipe it, you can do the button press and then save. Or you could just save directly from the player kind of confusing for me, and I thought that was a little pretended. And so where's the flow? Unclear. It's unclear to me that the heart I up con indicates following a playlist. Those were three old challenges that I had with it. Now again, you feel free to suggest suggestions, so you might want to fix these problems. But I'd like instead or in addition to ask, why were the above choices made? This is an effort and understanding why those experience had made the way that were, because it's probably intentional. Toe have either the confusing, unclear or redundant float. So let's do in order. So what? What is it? Confusing task vote to discover future. So it's probably bucket into search, I think, because it want oversimplify, the application are really make it streamlined, and the way I understood this is by looking up online. You know the redesign. They recently did a Spotify redesign. So go ahead and search online to see if there's explanation for a new task flow or something that you're confused about the redundancy side. So three different ways to save us on so redundancies and this example is a good one are often used to indicate to be useful for different categories of users. Swiping to save the song might be used for power users. Power users are defined as users who used the AB in a very heavy way, and they like to have secrets that they know that make them accept access and use the application more. So you might think of. This is like hot keys, for example, when using a computer program. People who know the hockey is normally love that they know these secret hot keys, and they also help with their efficiency. That song heard these not song. The application so but impressed my Peter for a different group of audience and say from player might be for a different type of audience. So what? Where is their redundancy? Understand why those redundancies exists? Finally wears the flow unclear unclear, the heart icon indicates following a playlist. So again, I did a little bit of research on this, and for a spot of ice case, the heart is now the only kind of follow or like or anything metric. So it seems like they're really trying to streamline their metrics. They're really trying to streamline their interaction. So if you like something, you heard it that will let you follow it. And I imagine it's to get you falling more things and interacting with more things, all with just one easy to understand heart. But that's why those choices were made. This is helpful for understanding. One of the application experience is what is even though it seems, a little audit for clients.
10. Wrapping Up Project 1: Let's wrap up Project one with some key takeaways. So there's really four things I think I take away from this, but hopefully to get more first is to start with. Why understand the goals and purpose of experience are key for understanding why certain decisions are made. It's really challenging to just go in blind and say, Hey, I don't understand this. It's really key to start with what they might be tracking, what they might care about, as well as the mission of the company. So second, empathize with personas like we discuss. It's really challenging to design a solution that better serves every user of an application. Go ahead and dig in and zoom in to a specific user, understand what their needs, behaviours and desires might be. And then you can understand how you can improve for that specific category. To further understand is map out the task flows hypothesize how each user of various categories might interact with the experience. This will be zoom in two different areas of improvements. It would be really challenging. Identify some of those frictions by speaking very generally about the user base and finally , and every good critique, ask the question. So what? So make sure you're looking at the things you've identified, neither rationalizing why those things took place. Why those frictions existed. Redundancies existed. We're suggest improvements if you like. Really? What? You're trying to glean insights from your research here. You're really trying to understand why those decisions were made and how you can improve. So that's project one.
11. Introduction to Project 2: Usability Test: people have to have a misconception that you exercise all about making APS this neglect one of most important parts of the whole process. And that's testing with rail users. That's why for projects to we're going to a usability test. So usability testing is a technique to evaluate a product by testing in our riel users. Yep. You heard that, right? We're gonna actually interview a really user and bring them into the process. So a usability test involves watching a representative user attempt to achieve a certain goal with the product. Understanding how people use an application or the application you've chosen is an essential part of building experiences for real people. So this that we're going to approach it first, we're gonna go ahead and create a screener test screen test is essentially uses a survey to figure out if the person you want to test is the right person for the test. So they around. If they meet category that you're looking for seconds making a task list you want. Essentially identify what you're hoping to test, what actions you're interested in observing and what success looks like. You want to be unambiguous and close ended so you can see if success was achieved as well as what problems they had along the way. Now 30 going to conduct the test? Yep, here to recruit a real person, we'll get the right tools in place. We're gonna want to record this the audio and video, and we wanna conduct tests in person, over or over a video call. If you're unable to meet somebody, person. Finally go ahead and synthesize the results. Like I mentioned before you, all the tools we use here are useful, but without synthesis and without summing it up into an important report at the end, it's pretty useless. So let's go ahead. And since side the results of breakdown to user journey and identify frictions slash points of confusion that occurred now for this project, you can go ahead and use the same app you used in Project one I'll be using Spotify is an example on moving forward, but go ahead and choose another happy if you'd like. The only thing you'll need to do is to identify the user types for that different application as well as what task those your types might be looking to do so ideally you want be choosing an app where you could say that this user type wants to accomplish this task because that's what you'll be able to test. So if you want to diversify your portfolio a little bit more, choose different app. If you just want to learn, go for the same app. All right, let's dive in.
12. Screener Tests: so the first step have any usability test is finding the right participant, and we're going to that is with a screener test. Explain that a second. But finding the right participant right here means representative of the user type you want to test with, as well as someone who completes the actions you're hoping to test with. So these are three things you should really do your preliminary assessment of who the right type of person might be. So if if into the user type your incident, they conduct the actions that you're hoping to test, and they went to the business category that you're looking for. They might be a generally a good person test, so a screener test will dig in a little further on and ask certain questions that helped to identify in an unbiased way if they fit the exact persona you're looking for. So the criteria you're testing with your screen test should be quantifiable, and questions in your test should be advised. So your screen test is essentially survey that perspective participants might fill out that helped you evaluate whether or not they meet the criteria for your test. So on the left here, you'll see that I have my criteria. So listen to over seven hours of music per week. I could ask the test. Do you listen to seven or more hours per week? Yesterday? Oregon say, do you listen more than six hours a week? Those are fine for some surveys, however, with screen request chest. That's kind of telling you what you're looking for. And if they want to participate, I will just say Sure, you know, I listen over six hours of Music Week. So Compass Mawr options and make sure it's not obvious what category you're looking to test with. So I'm translating that criteria over to about how often do you listen to music and I have for different, mutually exclusive but collectively exhaustive categories. So that's that's one seeks out new music at least once per week. Same thing subscribes to pot Spotify premium. So again, I'm not asking, saying I want a premium user, but I'm saying, here are the three different categories you can fit into. So go ahead and create your screener test in a online service like Google Form or surveymonkey, basically anything that people can respond to easily and do a free service because you don't need something to sophisticate. I aim for about 56 questions. It's also important here to include some logistical questions, So some good examples of this are. Are you available for 20 minutes in the next few weeks to meet? Do you have any accessibility combinations that you require? What is your email? Asked them if they have permission if or if you have permission to have their phone interactions, audio or video recorded. So these are important things. Ask to make sure that you get a diversity of people and make sure you comedy for different things. So include the questions I just listed, as well as about 2 to 3 other questions to make sure they into your representative category .
13. Creating Task Lists: The next step is to specify a task list for a usability test, and a task list is exactly it sounds like It's a list of different tasks that you like your person that you're testing to complete during your usability test. So how she goes about things about which tasks are important for them to complete, I encourage you to go back to your persona. Or, if you chose a new app, think about what their needs and goals are for a specific user group. In this example, I've already identified the needs and goals of this individual person, which might help me understand what tacit, like, complete. So let's go ahead and translate those needs and goals into different tests. So here, for it just took, knows the blue text there from my persona previous flight, Um, and I just specify them into attacks. So, for example, Creek players for different occasions, my task, just a special specify the kind of a different additional context is to create a playlist for an upcoming party you plan on hosting the type of party music attendees is all up to you, so I want them to have some autonomy here It's not very prescriptive. It just gave them some extra context. That is it again, indicative of the percent of the another one might be shared these with between friends. Tasks share song you like with a friend. What might that look like? It's per purposefully ambiguous. They might just text it to a friend. They might send them via Spotify that might create a playlist and share it with a friend. I'd like to understand how they go about doing it. So created a list of tasks based on the user's expected behaviour. The last thing is to set up the tech necessary to record your testers screen action in audio during the test. So the reason we want record these things is to understand how they're using it. Are they hesitating while they're about to do something? Are they, you know, narrating their thoughts and their confused about different things? We won't collect everything we can, so I can't list out all the different expects you need for every different phone. A computer configuration. But here's what I can tell you So on recording your screen most APS of most android iPhone , APS, thes date or phones. These days have a nap to record different screen actions. I believe in both the new IOS and the new Android operating system. There is ability to start directly recorder screen. So just Google that for whatever phone he would be recording through on the actions, I recommend, just using your laptop camera or webcam if you need. It doesn't need to be overly sophisticated, just something that's watching them using theatric, ation and audio. Go ahead and use either the phone that they're using itself. If you're able to record during the while, you're also recording the screen. Or just use a laptop or computer you're using to record the actions as well. Terms of software I know I'll be using a Mac and also using iPhone, and so I will be using a quick time so quick times really good for recording those things. So go ahead and Google whatever you need. For whatever your configuration is, make sure that the audio's video and screen recordings are available
14. Conducting the Usability Test: All right. The day's come. You ready to go? Here are some things you should know why you're conducting your usability test. Make sure to ask them to narrate their thoughts. This is gonna be really important for understanding where they're getting stuck or where they're having problems. So just say, Hey, can you please narrate your thoughts while you're working through the task? That would be really helpful. So on number two, don't help them just write down their questions. So they say, I don't know what to do here. Just let them struggle for a little bit right down there. Question. Feel free to prompt him with something like, Why do you Why do you say that? Just get more information, but don't say okay, just do this. Unless it's a question about the task that they're asking or any parameters of the test. So Third, ask them to reflect after a chance. So once they've completed their tasks, say Okay, what were your general thoughts on that? Do you have any questions? Do you have any concerns? And of course, there Do you favor so thank them for their time. So I hope it's going well
15. Bonus: My Usability Test: Sarah. Thanks so much for joining us. All right, Great. So we're going to his ability test today. I just want to check if you information with you for so that's okay. Okay. Great. So we I already gave you the screener test, but just love to verify some information before and first off, you have Spotify users. Okay, Great. Are you a premium subscriber to spot? Yes. Okay. Great. And how much? On average of hours of music do you listen to a day? Um, two hours. Okay. Great. That's really so let's just jump right in that Thank you again for coming. So I have a list of tasks written on the screen over here. I'm gonna actually complete each one of those tasks using your phone. They hear that sound. Okay. Okay. Go ahead. There. And just before we started 11 other note I'd really appreciate if you narrated your thoughts. So you're saying like, I'm gonna open up this screen, I'm gonna go to browse. Just go ahead and marry that. We'll be able to help you very much, but feel free to ask any questions. If you can just go anywhere, you're confused. So just gets you started on task number one. Okay, great. Whenever you feel ready, go ahead and have been just narrate your thoughts, right? So, yeah. Open, empty. Uh, but if it, uh, now I'm going to, you know, browse, paying, browse the top bro's. Yeah, the tab brows. It's loading. Uh, says my top genres, but the task is finding new artists. So I'm gonna go to maybe releases. Can I ask you where you are looking for while you're scrolling there? So I mean, the tacit if I knew order. So I assumed, you know, find somebody that I have again it basis. So for new releases, Okay, um, since his bashing releases, so what? Oh, uh, yeah, there's this person called bad Child. Okay, How would you go about understanding if you like them or not? Uh I mean, all the previous tab tells me what my top donors are. Her indie rock, pop and electric dance. Which agreement? But hard, sir. Thanks so much for your time. I really appreciate taking the time to do this usability test. Okay, great. We'll go ahead and type of these notes. You concede some here, but I'll make it a little bit more formal. I'll send it over to you and thanks so much. Okay,
16. Synthesizing Results: great. So you've conducted your usability test. That's really exciting. Congratulations. It takes a lot of people a lot of time to build up the courage to actually speak to someone . So congratulations there. So you probably got some great information is probably an exciting experience. Let's go ahead and synthesize your results. A simple report here goes a long way. So what I'd ask you to do is identify three different pieces of information. The 1st 1 is what were some priority issues. There were some things that you saw recurring or some things that seem like they're overly problematic. Go ahead and identify the main challenges on and what would require immediate action here. Go ahead and prioritize based on what you thought were most dire. Also list other findings. So go ahead and figure out where some minor bugs or fixes that you could you found. And any ancient comments that are worth communicating to a member of the team. So top heard issues are the highlight. The big things that potentially keep recurring are very drastic. Other findings are Just think they're minor on just general comments around the application . Also definitely a great place to put some annotated screenshots. Where were the bugs? Where the priests of your video that caught on interaction that went wrong or it was confusing. He's a really good toe have and also good toe having a portfolio. If you do choose to put this in a portfolio so simple, report was a long way.
17. Wrapping Up Project 2: All right, let's wrap up Project to and congratulations again on your first usability test. So let's like it with key takeaways here versus the euro would find the representative user recall that representative is someone who is in the user and business categories they interested in by testing. With this type of user, you'll get really responses that might simulate a real user in that persona group, So seconds have specific task to accomplish. The objective usability test is to really simulate typical user task flow and by setting task for this representative user to accomplish, you'll really be emulating the real thing and we'll do your test. I hope you were able to really listen to the questions, ideas and thought narration of your user. That deal here is to really empathize with the user and understand why they made the choice that they did, whether they were concerned about and where they were stumped. Finally, a simple report was a long wait. So just go ahead and sympathize or since synthesize your top priority issues and other findings
18. Introduction to Project 3: Your First App: all right. Project three designed your first. So hopefully this will be a capsule of everything we've learned so far. And I'll also introduce you some new concepts like wire framing and interaction design that it really important for overall being a UX designer. But for their let's think about what we're gonna design. I'd encourage you to look back on Project One or project to the critique or the usability test and think about a problem you notice there or a gap in the application your, uh either critiquing or conducting a test on. I'm sure there's an area there that you thought, you know, this would be great if this, uh, this application have this feature because it addresses this problem that's a little abstract. I'll give you a little bit cool, more Cocked Creek examples as we move forward. But think about a problem that you identified with the application you were looking at on. We'll start with a problem in terms of building under solutions and then wire framing all good applications or good experiences. Rather start with a problem. So with that problem mind and once you've identified it, this will be our approach. So we're gonna go ahead of brainstorm solutions to the problem that we've previously identified with. Yet I'll use Spotify, his example just for continuity sake. And I'll show you without brainstorm might look like on the exploring design paradigms step . What we're gonna do is look, it's what typical solutions or typical applications look like in our category. So let's say we're building a photo sharing app. What are the common paradigms that exist for photo sharing abs like Instagram or Flickr or Facebook? We're gonna study those paradigms and see what we can leverage next one actually design wire frames. So we're gonna happen to either PowerPoint or keynote, depending on what your PC or Mac user your And when you simple shapes and things that anyone could do to create an outline of your application Once that's gonna be our wire frames. And once we have the wire frames, we're gonna go ahead and had interactions. So when someone clicks on this, but what is the next transition look like, I'll show you how we can go ahead and do that. So that's our approach. Let's dive right in
19. Brainstorming Solutions: so the first step of designing applications brainstorming solutions in the physical world or with a team that might look like these sticky notes here on the background. And you go ahead and do that, too, if you like, get some sticky notes. Colors make, the better you can organize them. But that might it's what what it might look like. I'll do the on screen, but I'll simulate the experience just so it's easier to follow. So like I mentioned before, brainstorm should really be based around user needs or frictions that you've identified. So when I did my usability test and even won, as did my critique, I found out my music lover persona really had difficulty sharing with friends. It wasn't something that was especially easy for them. So that's just an example. We're gonna go ahead and choose anything that you found during your test or critique so important for the brains from any idea to come to your mind of something that could address this problem, go ahead and stick it up their um, it doesn't matter, no point judging the things that come out of your mouth, put it out there and you can find some brilliant trick trends once you have them all up there. So let me go ahead, OK, Simultaneous listening parties might be one example. I can have a friend. We can watch a song together, listen to a song Together we are live concerts with strap on a headset and go ahead and watch The artist together can have listen to chat APS, kind of like MSN, where you saw what people were listening to. And you can talk only about music. I'm Mrs Song sharing. Maybe it's an application built inside I message. Maybe there's a genre chat room. Second, hop into the jazz chat room. See whatever it's chatting about. Maybe I can translate for music to English. I could even Mawr connectivity with my friends who speak other languages Do fandom chat. So maybe we all love one direction and we want to chat with those artists or you want to create a radio station that we all collectively contribute to. Maybe it's Google Doc style playlists, and so my screens looking pretty full here. But here's just some ideas. So by looking at these, you might notice if you think one easy solution or an easy way of thinking of solutions. Don't think technologies that excite you so I have might be our live concerts. VR school on virtual reality is pretty interesting. And pairing that with my problem couldn't call, put some interesting solutions. I also you notice I did things like Google doc style playlists. Think about other solutions out there and see how you can apply them to your field or to your problem. Um, yeah. So these are just examples of ways to brainstorm again. Put anything you think up there and go ahead and get them all out there. Now, what I think is important here when designing an app sight something that addresses the user need but also excites you but something that you want actually work on. So don't just build something that you're not excited about. You probably won't finish. You probably won't be excited sharing it. That's what I would suggest to out of your list of ideas. Which one sounds kind of cool. So listening to chat app sounds kind of interesting. And when I think of a chat up a paradigm that I'm interested in or an application that I think does well Snapchat so I have snap. Shut up Here. Um, so I'm thinking now already. Okay, listen to chat up. What might that look like? Let's go ahead and explore some design paradigms and even come back to Snapchat.
20. Design Paradigms: now, whatever your building, there's probably someone who's built something similar in the past. And, like we mention with the critique, that was a good idea to understand what existing paradigms are out there so you can leverage them for your own applications. So there's tons of existing patterns that exist for different types of maps. So there's traditional dashboards or leaderboards, chats, platforms, shopping cards to browse some of these design paradigms. I'll show you two different resource that I use. The 1st 1 is you. IPad. You'll notice that they have different patterns for everything from dashboards to activity streams to friends lis really great resource to check out. And they have some of the best design products out there. Everything from Facebook to instagram to Twitter is featured somewhere on this list. Another one in a little bit more tactical is lucid charts. They have a great few examples of what, uh, typical mobile wire frames look like, as well as what e commerce wire frames looked like and mobile wire frame. So check out both these before diving into your next project, important the way you're asking, as well as what APP is serving. A similar function as your proposed solution. So I already mentioned Snapchat, and I think I'll go back to that. Snapchat's really trying to get people to connect over experiences, memories or content. So even slinging this, I'm seeing three different screens. Ailing three screens and snapshot. Um, and I kind of like that model, so maybe I'll base something off that. So thinking about how people use the application of similar to yours might give your ideas about how you should build your applications well, so again, go ahead and explore its out there to see if you like any ideas and think about which ones you want to bring to your solution.
21. Wireframing: one of the most important and time consuming task that we use. Their experience designer is designing wire frames, so this image of the back represents a wire frame. But let me dig a little bit mawr into what it means. So the act of wire framing is away. Designing websites service at the structural level, so you might often think of design as adding in buttons, colors functionality. But really, it's important to lay out how the information is gonna be structured. So where will images go? Where will the links lead to, um, understanding how the information is going to be laid out? It's known as information architecture, and that is found deeply in the wire framing process. So how we think about wire frame, really, I think about it in four main steps. First thing is that a wire frame is meant to create information structure. So like I mentioned before, you're gonna want to lay out the key elements of your application in two ways that are easy to communicate. I'll show you some examples in the next few slides. Second, it's important to not add colors or any visual flares. The design and the information layout should be able to stand on its own without adding in things that catch people's attention. So a good rule of thumb here is. Keep wire frames in gray scale so you can still differentiate between different layers but don't rely on any visual elements. Another one is to use Onley. Simple shapes, squares, rectangles and circles are all year old need for low fidelity wire frames. I'll explain the concept of fidelity in a second, but basically ideas don't rely on any non traditional or non standard shapes when wire frame. Lastly, the point of wire frames is to convey the overall direction of the design, not the final product. So the wire friends are generally the first step in designing and application. I'll show you how that process might look. So here's an example of a wire frame. This is for a YouTube or someone Box it up for what you 2 may have looked like a while ago . Um, so what it is is it has different square boxes. You can't see those things with X in, um, or just mental image place holders. You'll notice that they have text in there, like recommended, and this is a video title toe. Understand how information might be laid out, but there are no images. There are no additional pieces of information there. So really is. Just show you what the Leo might look like and also giving an idea of what type of functionality website might be handled. So is one example. This is another type of example. You'll notice that this is using hand drawn, you know, icons and things, and that's took perfectly okay. If you like to use your sketching skills, go for It's also showing interactions so you'll see that first screen there is the app from the home screen. Um, it's showing you when you click on that app, you're taken to this page. That's a really helpful thing to understand. Rather than do with arrows. We're gonna actually do with interaction so people can click on different elements of your design to see the interactions. Just another way of people might go ahead and do wire friends. Now, I mentioned the idea of fidelity before, but this is a really good example. I found that shows what it might look like. The first screen is what we would consider a wire frame. It's annotated, but it's just showing you what Ah was different icons spite represent and showing you things that might appear in the information structure. You'll notice that we're moving from a very, you know, rough sketch to a final product or something that looks like a final product to the end. Those air moving from low to high fidelity. I also noticed I mentioned at the bottom there it's it really transition from you x to you I The final Polish is always user interface, and the starting off point is the user experience. I like I mentioned at the top of the video. We're gonna be focusing on the U ex portion here, so don't worry too much about doing the interface. Great. So I have now described what wire friends are. Let's go ahead and build. So let me get back to building the wire frames for the apple and building for this project . I know that I want to do it like Snapchat, so I'm just gonna three different screens. Let me just go ahead and put those in here. Um, I know that three screens will also have a different purposes, so might be helpful. Just put those And now on the oil needle log in screen our friends list and also need chat . So that's how I'm gonna designed to do my I'm doing very simplistically, but feel free to do your wife a little bit more complicated. Good day approach announced A look at what each element of your application is gonna need. So, for my log in screen, what am I gonna need? I know this is gonna be and I don't just Spotify um and it's gonna revolve around music, so might be helpful to just have a log in with Spotify, but it you wouldn't put that there. You know, I could add a great, beautiful, splashy image in the back, or I can make really cool, uh, icons. But again, for the sake of wire frames, I want to keep it simple. Solo needed some sort of tax at the top, just knowing what it's there. You know, that doesn't need to be finalized, but ah, I just wanna have a placeholder there for text. So see what your friends were listening to seems fine for me. Let's move on from the log it, you'll notice it's very bear. That's all I really want. Those of the key elements for one other friends list. This is now gonna be inside my application when someone's logged in. So let me just go out in the top header barn for navigation purposes. No. Added to the chat sections. Well, well, there. You know, I can use that for, you know, Ford or back or settings in the future. But let's build at the friends list tab now. So what might need? I'm gonna look at that paradigm that I personally previously looked at for friends lists. And in that one, it had, ah, friends idle at the top and then start to list out different contacts. So this one I'm gonna put down, I know that the two piece of information that I care about are the name of the person. So I'm just gonna have their first name. And also what song they're listening to that again goes back to the original idea. Um, and the only other element a lot is a circle there which represents the face. You'll notice those Those were the three different information pieces. I want to have available my wire frame again. Not adding an image or adding fancy texts, but basically just wanna have it laid out as such. So I have the information is necessary. Let me go ahead and populate in the rest of that list. Just copy and paste and switching things. So you get the idea that it is different friends and different songs, and that's my friends list. I'll just leave it at that again. Step Very simple, very minimalistic. Now what? My my chat interface Look play. I'll go ahead and look at Paradise for chat, and I find that they always seem to have a name of the person at the top, as well as just chat bubbles with the text of the inter field bottom. Let me imitate that. But at it Ah, at elements from my unique case where we're talking about songs to the chat application. So Dan is there will also add in the song, and I was listening to, um, right there, I'll add a divider just for, you know, information of hierarchy purposes, and then I'll add in a little chap are at the bottom. So that's just an idea of what a chap are Is that circle representing potentially emojis or gifts like Nap and then for this show that it is a conversation. I'll just out in chat bubbles. So that's my wire, friends for an application. That's all I'm gonna have there. It shows the key elements that I'm gonna need a swells where information is gonna be located.
22. Interaction Design: the last thing I'm gonna do for my wire frame. This is gonna be adding interactions to the design. Adding these in Keynote PowerPoint is really simple. It's just a little confusing at first, so I'll just show you how to do it. So first off, I'd recommend creating different slides for each one of your screens in your wire frames. For me, it's going to be 3% with three screens and placing the screens of the exact same location on the slide. I'll show you what that looks like for me in second. Once you've done that, think about what things you want people to be interacting with. So, in my example, it's gonna be a lot of the buttons. So any of the buttons or any of the things that should lead to another screen, I want to go ahead and what L call animate. So this is how it's done in keynote. It's pretty, an identical processing power point. Basically, when you want to do is go to the element that you want people to click on and lead to another slide. Go ahead and right click it so it's this one over here. The screenshot number one going to go ahead and add link, go to slide. And basically what's going to do is, once you click on that element during the presentation mode of your keynote or PowerPoint, that will take you to the slide that you've chosen in screenshot number two and to determine what the interaction looks like. You're have the ability to add in transitions between slides, and this will help you to understand if it's a slide that was gonna happen or a dissolve. Are you going to do some big fancy animation you'll be able to add in those transitions that show what those interactions look like? So let me show you what mine looked like. So this is ah, what I was referring to before having your your screens on the center of the slide and one screen perks like. So I go ahead and interact with this. I can click on this log in with Spotify button, and that will take me to the next page. You'll notice that kind of looks like an app itself. So it feels like kind of like I am locked this friends list after locking in so in here to get to another ah, screen. I might click on when these friends don't wanna chat with them. So I'll click on Dan. You'll notice I didn't another interaction there. I just want to show that that's what the interaction might look like between the different screen. But one a chat here. I might go ahead and add my It'll just take click there, um, and a chap bubble there as well. And I can't even go back to my friends list again. Took Petrus and I can hop back in just a show again. So that's a good way of imitating a real interaction design within your first wire frames.
23. Wrapping Up Project 3: Okay. Congratulations on finishing your first wire. Friends of interactions. Let's go ahead and wrap up this project and talk about some key takeaways so before things I hope you take from this project is that you show us. Start with a problem, not a solution important to base your designs on riel and inter problems rather than thinking about what potential problems could exist. I'm just in your own head. Do you better if you get an actually user or person who, as the intention of using the application to tell you about their problems or their frictions with the application, Another one is toe leverage. Existing design patterns As a new designer, be challenging to think about different ways of reinventing the wheel when it comes to different, you know common paradigms like friends, lists or liking. But I encourage you to look at existing design patterns and leverage what you can from there. When it comes from wire framing, less is always more. Keep wire frames simple by leaving out colors and icons and stick to gray scale. Focus on the information structure there to make sure that you clearly communicate What the intention of the application will be. Finally, go ahead and mock interaction so you can actually put your wire frames in front of a real person and see how they might use the application. This is helpful for informing, even at the low fidelity stages, what your application will look like.
24. Congratulations!: Okay. Congratulations. You finish this course. I hope you learn some skills and added some techniques and frameworks to your designer toolkit. Um, if we look back on that, you connect on three different projects. One was in app, critiquing one was in usability testing, and one was designed the wire frame through your very own application. That's no small feat. So congratulations. Three projects under your belt. I hope you continue to develop as a designer, continue building new experiences and ship great projects.
Will Lawrence, User Experience Designer
