Transcript for:
Creating and Testing Low Fidelity Prototypes

if you've been taking the courses of this program in order you might remember creating low fidelity prototypes in figma for your app since it's been a while i thought it might be helpful to go through a quick summary of how to build a low fidelity prototype over the next few videos we'll be using adobe xd so the building process will look a little different from what we covered before for some of you this is your first time taking one of our courses if so i'd recommend reviewing our previous videos and activities on building low fidelity prototypes before you move on that way you'll have a lot more knowledge on how to build and test your prototype all of the videos you need to review are linked in the course readings so check them out if you need them okay let's get started i mentioned that prototypes are intended for testing our product ideas before we produce the real thing prototypes are broken down into two categories low fidelity and high fidelity low fidelity prototypes are simple interactive structures that provide a basic idea of how a product will look and behave they're used to communicate big picture design concepts and usually don't include finalized design elements or realistic content high fidelity prototypes however are polished designs that exhibit functionality and closely match the look and feel of the final product once designers test and confirm that a low fidelity prototype works properly they can create high fidelity designs these high fidelity designs will go through their own testing process we'll get into high fidelity prototypes later on in the course but for now we'll focus on building low fidelity prototypes on the surface digital low fidelity prototypes may seem very similar to digital wireframes they're both simple versions of your product and both contain minimal content the difference between the two is that wireframes are just blueprints of the product structure while a low fidelity prototype ties the wireframes together and incorporates functionality and navigation designers build low fidelity prototypes once they've designed a wireframe and want to test whether users can successfully navigate the designs to complete a task testing prototypes is meant to identify and solve problems related to the function of your website so far you've created a basic wireframe for the site now it's time to test how the website works with real people and get feedback that's a wrap on the basics of prototypes coming up next we'll put everything we just reviewed about creating low fidelity prototypes into action in adobe xd and i'll meet you there it's time for you to create your own low fidelity prototype in adobe xd i'll be working right along with you on the wisconsin county library website to show you the ins and outs of creating a lo-fi prototype as we've discussed prototypes allow the user to experience how it feels to use your product prototypes are helpful when you want to confirm your design decisions with real users or share your designs with stakeholders so they can get a better understanding of your product if this is your first time creating a prototype this will be a fun adventure you'll put what you've learned into action if you've created a low fidelity prototype in an earlier course using figma don't worry about using a new design tool adobe xd provides a set of new impressive features to help meet your prototyping goals let's get to it let me open up my project in adobe xd the last time i worked with wisconsin county library website i created wireframes now it's time to convert these static designs into an interactive low fidelity prototype you might notice that i've added a few things to my digital wireframe since you last saw them like the library logo and some text and important buttons this will help users and stakeholders understand critical information that's necessary to move through the user flow when i open my project the first thing i need to do is switch the tab at the top left from design mode to prototype mode the screen may look similar in the design and prototype modes but in prototype mode i can connect individual elements on my artboards to simulate a user flow through the website now i'll click on the homepage artboard a little grey tab appears at the top left of the artboard if i'm zoomed in i'll notice a home icon within this grey tab i want this screen to be the first screen of my prototype since it's the home page so i'm going to click the home icon to turn it on the home icon turns blue which means that this will be the first screen that shows up each time my prototype begins my goal in connecting these artboards is to allow users to move through the flow of my website pages i find the easiest to connect my artboards in the order that users would go through the main user flow so i'll start by selecting the search button at the top of the homepage when i click on the word search here a blue arrow pops up i'll click and drag the arrow to my search page artboard in other words i release the mouse on the screen i want to connect to the button this means that when a user clicks on the search button in the prototype they'll be taken to the search page since i'm working on a low fidelity prototype right now i'm going to use the default settings for interactions in the property inspect on the right side of the screen at this point in the design process our goal is to simply make sure the pages transition but we don't yet need to focus on how the pages transition all right so now i'm on the search page artboard i need to make something happen when a user clicks the search button i'll select the search button and i'll drag the arrow to my search result page artboard on this page there are lots of search results or in this case books there are a few connections i need to make on this artboard i'm going to focus on the third book in the search results list i'll make all of the connections for this book first i'll start with a book image i'll select this book image and drag the arrow to the product description page artboard here's a quick pro tip product description page is often shortened to pdp next i'm going to connect the group of text that includes a book title and author name to the product description page as well finally i'll connect the reserve button to the second search results page i'd repeat this process for every book in the search results but i won't do this now okay so i'm on the second search results art board i need to connect the book image and the group accompanying text to the pdp artboard on the pdp artboard i'll connect the reserve button to the second pdp artboard the one thing that changes here is that the reserve button now says in basket which indicates that the user has selected this book on the second pdp artboard i'll connect the basket button in the top right corner here to the basket artboard and at the bottom of the basket artboard there's a confirm reservation button so i'll connect this to the reservations confirmed artboard all right now a user can search and reserve a book using my library website i'll press the play icon at the top right of the screen to preview the prototype i just made this is where i get really excited because my hard work is coming to life when i click the play icon a preview window pops up and my designs are displayed now i can click on the buttons i connected and navigate through my prototype just like a real user would so notice the mouse changes from an arrow to a hand with a pointer finger when i hover over a component that's clickable you should always double check the prototype is working correctly before sharing it with others and especially before you do any testing like a usability study if your artboard isn't perfect don't worry it takes a lot of practice to know what all the features are that you need and designed to create an effective prototype you can always go back to your iframes and add a missing button text or anything else you may have forgotten that's all part of the design process we're always iterating and improving our designs now you have a low fidelity prototype it's time to test it in the next video i'll help you prepare to test your design and i'll meet you there at this point you understand low fidelity prototypes and have created a low fidelity prototype in adobe xd for your own project it's time to create a research plan to test the main user flow of your website and get feedback from real users if you've been taking the courses in order you'll remember exploring research and usability studies in earlier courses since it's been a while i thought it might be helpful to go through a quick summary of how to write a ux research plan before you start your own usability study if this is the first course of the program that you've taken you might want to go back and review the videos and complete the activities on conducting a usability study before you move forward or even if you just want a little refresher all the videos will be most helpful to you are linked in the course reading okay let's get to it we're ready to review the first step in a ux research study planning the study as a reminder a research plan is a step-by-step examination of a group of users and their needs a ux research plan is made up of seven elements the project background the research goals the detailed research questions the key performance indicators or kpis the methodology the participants and the script for the questions you'll ask to the participants so let's break those down the project background summarizes the situation that led to the need for this research it's basically a brief explanation about why you're doing the research which you can give to anyone who asks your goal when creating the project background is to try and answer the question what led you to conduct this research next the research goals lay out what you're trying to solve with this design or what you'd like the outcomes of the research to be the goals of your research will differ from project to project they'll fit into one of three categories depending on when during the product lifecycle you conduct the research your research goal should answer the question how will the results of the research impact our design decisions after that you'll write detailed research questions for your project these are the questions you plan to answer during the study the research questions should be actionable and specific and you should avoid leading questions but keep in mind that these should not be the literal questions you plan to ask study participants instead the goal is to figure out what questions you need the study to answer next determine your key performance indicators or kpis which are the critical measures of progress towards an end goal in a ux research study you might consider kpis like the amount of time a user spends on a task user's use of navigation functionality versus search functionality user error rates drop-off rates and conversion rates and the system usability scale that's a questionnaire to measure the usability of your designs when determining kpis for your research study consider the question what would indicate that we're making progress toward our ultimate goal next up is a methodology where you'll outline the steps you plan to take to conduct your research including how you'll collect and analyze the data then determine who your study participants will be who do you need to be involved in the research to ensure you're studying the right metrics for example the usability study for my library website might include participants who read often want an easier way to check out books or visit the library as part of their work finally you'll need to write a script for your study this is also known as the discussion guide you'll need to determine what questions you want to ask participants during your research and there you have it the seven elements of a ux research plan hopefully that brief overview refreshed your memory on how to plan a ux research study you should be all set to plan a research study to test the main user flow of your own website if you need more guidance check out the course readings and revisit the videos from the earlier course let's keep going i'm back for a second quick summary now you've carefully planned your ux research study it's time to conduct the research with participants as ux designers we're always keeping the user top of mind after all we're trying to create the best experience for our users that's why usability studies are so important they're one way to get real feedback from a group of participants okay let's jump right in a usability study is a research method that assesses how easy it is for participants to complete core tasks in a product during a usability study researchers observe the participants to understand how they interact with the prototype of the product and complete tasks then ux designers use the insights from the study to make improvements to their designs there are two types of usability studies moderated and unmoderated in moderated usability studies a person guides participants through the study in real time the person who guides participants through the study is known as the moderator the moderator's goal is to assign participants different tasks to complete within the product and watch participants interact with the product plus they collect their feedback along the way moderated studies allow the moderator to ask specific questions follow up in real time and build a rapport with participants on the other hand in unmoderated usability studies the participants test out the prototypes without a moderator present usually the study is recorded on video and the ux team reviews a video footage after the study since participants complete tasks on their own time and in their own space it can be easier to get accurate feedback plus they might feel more comfortable being honest when there isn't a moderator in the room so why conduct usability studies because your product looks and functions differently at every stage you can conduct as many usability studies as you need to to make changes to your design and improve the user experience and you can conduct usability studies at any point in the design process keep in mind that the later in the process you conduct to usability study the more expensive it is to make changes because your design is further along in the design process and more complex that's why it's important to start testing now when you have a low fidelity prototype of your website one more thing determining the size of your study depends on the project but around five to eight participants is a good start it's a large enough sample size to gather real data but it's not so large that the study costs a lot of money or takes a long time and that's it for the second step of ux research study conducting the research as a reminder if you'd like more in-depth introduction to these concepts check out the course readings to find the original videos on conducting a usability study you can also watch a usability study in action there you might remember when we discussed biases and ux research in an earlier course well in this video i want to quickly remind you about some of the biases that may occur when you conduct usability studies as a refresher a bias is favoring or having prejudice against someone or something based on limited information all humans have biases including you and me the key is to identify and become aware of these biases so you can guard against them for that reason you need to be aware of common types of bias you or your participants may have during usability studies we've covered these biases earlier in the certificate program but let's do a quick refresher about implicit bias serial position effect friendliness bias and social desirability bias first implicit bias or unconscious bias is the collection of attitudes and stereotypes we assign to people without our conscious knowledge these attitudes and stereotypes are often negative exclusionary or disempowering when recruiting participants for usability studies any implicit biases you have against a particular user group might impact your expectations for how those participants will interact with the product another bias you may have during usability study is serial position effect serial position effect is a psychological bias that states that when given a list of items people are more likely to remember the first few and the last few while the items in the middle tend to blur be aware that when you're interviewing or watching participants the first and last things they reveal might stand out to you more than the feedback in the middle because of the serial position effect similarly your participants might experience a serial position effect if you give participants a list of instructions they're more likely to remember the first and the last items on the list next up let's chat about another bias which is often experienced by participants friendliness bias friendliness bias describes a tendency of people to agree with those they like in order to maintain a non-confrontational conversation as a moderator if you are too friendly and develop too strong or rapport participants there's a chance participants will want to agree with you in order to avoid confrontation this can stop participants from giving honest feedback the last bias to guard against is the social desirability bias the social desirability bias describes a tendency for people to answer questions in a way that will be viewed favorably by others in usability studies the social desirability bias can cause participants to focus on the positive aspects of their experience with the product and minimize the negative aspects one way to guard against this bias is provide participants with a series of statements that came from other users ask participants which statement they most relate to and emphasize that there's no correct answer each of these biases can have a tremendous impact on the data you collect during usability study so how can we reduce bias well the first step you can take to reduce bias when conducting a usability study is identify and emit your own biases so besides identifying them what else can we do to avoid biases find participants from a representative sample the small group of participants you conduct your usability study with should represent your key user group as well as user groups that are often marginalized next define the research criteria beforehand when you created a plan for your usability study a couple of the key elements you focused on were the research goals and the research questions by establishing research goals before the usability study begins you'll reduce the chance of designer biases fourth phrase interview questions thoughtfully stick to open-ended non-leading questions like how did it go what was your experience like or what worked and what didn't work for you and why remember the goal of usability studies is to get honest feedback from the participants in addition let participants express themselves fully and in their own words during the usability study make sure you understand exactly how participants feel and why finally be mindful of your body language remember the friendliness bias a lot of us are people pleasers if you nod smile or react favorably to something when you're the moderator of a study it might encourage participants to share feedback that will get them more nods or more smiles body language like this can bias the feedback that participants provide and that's it in the upcoming video we'll move on to the next step in a ux research study which is analyzing and synthesizing your research results let's keep going we're making our way through the steps in a ux research study so far we occurred the first two steps plan the study and conduct the research after a usability study we have a ton of feedback from participants what we're going to do with all that information well in this video we'll move to step three of our ux research study analyze and synthesize the results analyzing and synthesizing the results from your research is all about turning observations into actionable insights remember an insight is an observation that helps you understand the user or their needs from a new perspective insights help explain what data means and what to do with it in just four steps we can turn the observations from our research into actionable insights first gather all of the data from the usability study in one place this includes everything from the observations you quickly scribbled on sticky notes to the notes that you took in google docs or spreadsheets be sure to check with your team to gather any notes that may have taken two next organize the data this is where we take the data gathered in step one and arrange it if you wrote your observations on sticky notes you might use a method called affinity diagramming to organize your data which you learned about in an earlier course of this program or if you use spreadsheet note taking to record your observations you've already started organizing the data without even realizing it each of these methods are reliable so the choice of how you organize your data is up to you after you organize your data you're ready to find themes one of the key goals of user research is to identify themes or patterns that are common across participants to do this we'll ask ourselves two key questions what common patterns stand out in the data you collected and what do they tell you about your product design once you recognize the themes it's easier to turn the feedback into something actionable and lastly come up with insights based on the themes strong insights are grounded in real data and answer the research questions that were laid out in your plan your insights should be easy to understand and increase your empathy for the user's experience the best insights inspire direct action and help the design team improve the product depending on the amount of data you've collected you should be able to come up with a handful of themes and insights once you have a list of insights from a usability study you're ready to make improvements to your design this is what we'll cover in the next video iterating on your low fidelity designs i'll meet you there now that you've analyzed feedback from your usability study and came up with insights it's time to iterate on your low fidelity prototype the goal is to improve your designs based on the feedback you've received in this video we'll go over how to make changes to your prototype in adobe xd to incorporate feedback from a usability study while you were working on your own project i conducted a moderated usability study on the wisconsin county library website the study participants provided feedback about the website's functionality and shared some challenges they faced when using the product i gathered all the data and observations from the usability study found themes in the data and came up with a few insights i'll now use these insights to iterate on my designs incorporating feedback to improve your designs is straightforward when you're using adobe xd all it takes is making updates your digital wireframes and creating a new low fidelity prototype that includes the feedback you received why not show you when i open adobe xd my project is right where i left off i need to make updates to the wireframes of the wisconsin county library website so i'll make a copy of all of my wireframes and paste them below my original wires it's also helpful to add a text box to the left of these wireframes and call it wireframes too this will help me keep track of all of my rounds of designs by now you should have a list of insights that came out of conducting your usability study these insights should inform changes that you plan to implement to improve the user experience of your website there are a handful of insights that came out of the usability study about the library website i've been working on for this video i'll focus on two of those insights participants want it to be more obvious when they add a book to their basket on the search results page participants want to be able to navigate to the home page of the website by clicking on the wcl logo let's go through each of these and i'll make changes to my designs in adobe xd first up the search results page during the study all participants did not realize that the book they selected was actually reserved when they clicked on the reserve button on the search results page to improve this user experience i need to make it more obvious that the button next the book changed from reserve to in basket in other parts of my website i've made the in-basket button black and the text white when this happens so there's contrast as other buttons on the page let me make that change here the first thing i'm going to have to do is ungroup my repeat grid to make this change there we go simple as that now i can use these same colors throughout the rest of my mockup second participants want to be able to navigate to the home page of the website by clicking the wcell logo which is in the top left corner of every web page during the usability study three participants were confused that the website's logo at the top of the screen didn't take them back to the website's home page on other websites users can easily navigate back to the home page from any part of the website by clicking on the organization's logo so my website's user experience didn't meet the participants expectations the good news is this should be a quick fix since this insight is about the connections between artboards i need to switch from the design tab to the prototype tab on each of my artboards i'll click the logo in the top left corner and drag the arrow to the homepage artboard now if a user wants to navigate to the home page at any point all they have to do is click the logo okay i've just incorporated two insights that came out of usability study into my low fidelity designs in adobe xd i still have a lot more work to do and many more insights to address in order to improve the user experience on my website keep in mind you will probably get a ton of feedback from participants during usability study especially when you're testing a low fidelity prototype that's completely normal and to be expected you might even need a full rework of your entire design after usability study the goal is to keep iterating on your designs with each round of feedback you get so don't be discouraged now it's your turn to make changes to your wireframes and low fidelity prototypes based on insights from your usability study don't be afraid to make big changes congratulations on finishing this course from the google ux design certificate you can access the full experience including job search help and start to earn your certificate by clicking on the icon or the link in the description below watch the next video in the course by clicking here and subscribe to our channel for more from upcoming google career certificates