Course 5 – Create High-Fidelity Designs and Prototypes in Figma

Week 6: Testing and Iterating On Designs

GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Coursera Study Guide

TABLE OF CONTENT

Now that you have a high-fidelity prototype, it’s time to test your designs. To get started, you’ll conduct a usability study to test your high-fidelity prototype of a mobile app. You’ll analyze the feedback you receive to come up with actionable insights and iterate on your designs. Then, you’ll learn how to hand off designs to engineers for production. Finally, you’ll turn everything you’ve learned about user research, ideation, wireframes, designs, and prototypes into a case study for your professional UX portfolio.

Learning Objectives

  • Plan a usability study based on project goals
  • Define metrics and success criteria for a usability study
  • Determine how to reduce bias in a usability study
  • Conduct a usability study
  • Review and aggregate usability study data
  • Convert data from a usability study into actionable insights
  • Modify mockups and prototypes based on research results
  • Describe considerations that inform design iteration
  • Explain how designers share design specifications with engineering teams
  • Demonstrate how to document design specifications in Figma
  • List typical parts of a portfolio case study
  • Describe the benefits of portfolio case studies
  • Document a mobile app in a portfolio case study

TEST YOUR KNOWLEDGE ON COMING UP WITH RESEARCH INSIGHTS

1. What is an insight?

  • A step-by-step examination of a group of users and their needs
  • An observation that helps a designer understand the user or their needs from a new perspective (CORRECT)
  • An assessment that allows participants to complete core tasks in a product without direct supervision
  • An assessment of how easy it is for participants to complete core tasks in a product

Correct: Insight is an observation that helps a designer understand the user or their needs from a new perspective.

2. What are the four steps in turning observations into actionable insights? Select all that apply.

  • Find peculiarities in data
  • Find themes in the data (CORRECT)
  • Come up with insights (CORRECT)
  • Gather data in one place (CORRECT)
  • Organize the data (CORRECT)

Correct: Finding themes in the data is the third step in turning observations into actionable insights.

Correct: Coming up with insights is the final step in turning observations into actionable insights. In sequential order, the previous steps include gathering the data, organizing the data, and finding themes.

Correct: Gathering data in one place is the first step in turning observations into actionable insights. Next, organize the data, find themes, then come up with insights.

Correct: The first step is to gather data in one place. Organizing data is the second step in turning observations into actionable insights, the third step is to find themes, and the fourth step is to come up with insights.

3. Consider the following scenario:

During a usability study for a fast-food app, many participants had trouble completing their order. Multiple participants noted that the color contrast of the interface made it difficult to find the “Complete Order” button. Some participants with visual impairments could not differentiate between the different lines, buttons, and negative space in the app. The designers grouped these types of observations under the theme “Color.”

What kind of insight can the designers draw from these “Color” observations, and how can they improve their app?

  • The participants had trouble completing their order because the buttons weren’t responsive
  • The pictures on the fast-food ordering app were not clear enough for participants, so the designers need to replace the images.
  • The participants had difficulty navigating the app because of the color palette. The designers need to make the app more accessible by updating the colors to have higher contrast. (CORRECT)

Correct: The designers didn’t consider using accessible colors. Considering the color contrast also made it difficult for users to navigate the app, it was sensible to reconsider the palette they used.

4. Consider the following scenario:

Designers conducted a usability study for an app they’re developing for a hospital. The app is meant to help patients fill out their paperwork on a computer or from their phone. The designers collected multiple helpful insights to improve their design. One particular insight stood out: The available selection for illnesses and symptoms wasn’t expansive enough.

Based on this feedback, what can the team do to improve their design?

  • Keep the selections as they are, but include an open text box for detailed descriptions of their visit.
  • Include expansive selections and an “Other” section, so patients can accurately describe the reason for their visit to the hospital. (CORRECT)
  • Add selections and symptoms that are common to the region that the hospital operates in.

Correct: The team needs to include a more diverse list of choices for patients when they fill out their online paperwork. The additional choices will help patients accurately record the reasons for their hospital visit.

TEST YOUR KNOWLEDGE ON HANDING OFF DESIGNS

1. Jean-Marie is a UX designer at a design agency. They have just finished their designs. The agency’s lead engineer has requested the design specifications. What can Jean-Marie do to successfully prepare the design for the engineering team?

  • Email an engineer and begin working on the next project
  • Send the engineering team a list of problem areas that are not yet addressed in the design
  • Provide the design system, mockups, prototypes, and specifications (CORRECT)
  • Finalize every aspect of the designs before sharing it with the team (CORRECT)

Correct: To successfully send off the design to the engineering team, Jean-Marie will need to put together the details of the design system, mockups, prototypes, and specifications. It will make it easier for the engineers to start the coding process once they have all the references they will need. They should also finalize every aspect of the design before sharing it with the team.

Correct: Since Jean-Marie is working at a small design agency, it’s best practice to have every aspect of the design finalized before sending it off to the engineering team. While this might be the case at larger companies as well, smaller companies typically operate like a relay race. The baton needs to be delivered completely before the race can continue, and the next team member takes over.  They should also provide the design system, mockups, prototypes and specifications.

2. Mona just finished their designs in Figma and is preparing to send them off to production. What can she do to successfully deliver them to the engineering team? Select all that apply.

  • Set the file permissions to view only
  • Exclude color schemes
  • Create thumbnails that include hyperlinks, specifications, and requirements for the design (CORRECT)
  • Test and share the prototypes (CORRECT)

Correct: Figma’s customizable thumbnail feature allows designers to include an array of useful information for other team members, including hyperlinks, image or illustrations, and even the file status. Mona should also test and share the prototypes before delivering the designs to the engineering team.

Correct: Mona can test and share the prototypes before delivering them to the engineering team. That way, she can ensure that the files adequately demonstrate the flow and goal of the design. She should also create thumbnails that include hyperlinks, specifications, and requirements for the design.

3. There’s no singular “right” way to send designs off to production. Procedures can vary by company and depend on how teams prefer to conduct the development process. Which of the following is true when you’re ready to deliver your design to the engineering team?

  • Send the engineering team a detailed list of problem areas that are not yet addressed in the design
  • Leave the designs incomplete when you send them to the engineering team
  • Provide the design system, mockups, prototypes, and specifications (CORRECT)
  • Begin working on the next design project

Correct: Nice work! To successfully send a design to the engineering team, you will need to put together the details of the design system, mockups, prototypes, and specifications. It will make it easier for the engineers to start the coding process since they’ll have all the references they will need.

4. An entry-level designer is responsible for deciding how the hand-off process flows for their organization.

  • True
  • False (CORRECT)

Correct: Entry-level designers will generally not be expected to design hand-off protocols for their organization.

5. When design and engineering teams work together simultaneously to complete a product, what is one challenge they might face?

  • Coordinating a project hand-off
  • Slowing down project timelines
  • Identifying areas that have to be redone as they design and engineer (CORRECT)
  • Establishing a project deadline

Correct: Designing and engineering a product simultaneously can lead to team members retracing their steps to redesign or rebuild the product. For example, if a designer wants to change a layout, the engineer building the design would also have to redo some of their already completed work.

TEST YOUR KNOWLEDGE ON CASE STUDIES IN UX PORTFOLIOS

1. Fill in the blank: A case study is a(n) ____ of a design project that typically includes the project goals and objectives, your role in the project, the process your team followed, and the outcome of the project.

  • observation
  • rubric
  • summarized presentation (CORRECT)
  • data-driven report

Correct: A case study is a summarized presentation of a design project. It typically includes the project goals and objectives, your role in the project, the process your team followed, and the outcome of the project.

2. Why are case studies beneficial to have in a portfolio? Select all that apply.

  • Allows UX designers to understand users and their needs from a new perspective
  • Helps designers turn observations into actionable insights
  • Demonstrates a designer’s willingness to collaborate with a team (CORRECT)
  • Serves as a visible demonstration of design knowledge (CORRECT)

Correct: Case studies demonstrate a designer’s willingness to collaborate with a team. If a designer is working at a company or an agency, it takes more than one person to complete the interview process, document data, and create actionable insights from a case study.  It also serves as a visible demonstration of design knowledge.

Correct: A case study is a presentation of a project, which serves as a visible demonstration of design knowledge and demonstrates a designer’s collaborative skills.

3. Harjot is organizing a case study of the website they designed for a local architect. The architect specializes in designing futuristic, eco-conscious homes for clients looking to build from the ground up. What type of information should Harjot include in the case study for their portfolio? Select all that apply.

  • The client’s phone number and email
  • Highlight challenges (CORRECT)
  • A hero image (CORRECT)
  • Goals and objectives (CORRECT)

Correct: Each design project has its challenges. Recruiters and hiring managers want to see the challenges a designer faced and how they overcame them. The case study should also include a hero image, goals, and objectives.

Correct: Since the website displays the types of home designs that are offered, it would be a good idea to include a hero image that demonstrates the features Harjot designed into the website. The case study should also highlight the project’s challenges, goals, and objectives.

Correct: Every design project has goals and objectives, whether that includes a time constraint, themes, and features that are requested by the client. Displaying goals and objectives in a case study allows hiring managers and recruiters to see how a designer approached and accomplished them. The case study should also include a hero image, and highlight the project’s challenges.

4. How should case studies be presented in a portfolio? Select all that apply.

  • Case studies should include every aspect of the design and the design process.
  • Case studies should be presented as straightforward as possible.
  • Case studies should be visually appealing. (CORRECT)
  • Case studies should be presented in a way that’s concise and engaging. (CORRECT)

Correct: There’s a lot of background work done to make a design project possible, but they should still be visually appealing, concise, and engaging. Much of UX design is visual, so case studies should be presented in a way that appeals to recruiters and hiring managers. Not everyone that will examine a designer’s case studies will be a designer.

Correct: It’s important to display case studies in a way that’s concise, engaging, and visually appealing. They should tell a cohesive story that shows how the designer improved the user experience through their expertise.

5. What questions should a designer consider to determine if their designs are final? Select all that apply.

  • Has the design team used up all of its resources?
  • Are participants or users able to interact with and interpret the designs without extra help? (CORRECT)
  • Have placeholder texts been replaced with finalized assets? (CORRECT)
  • Are the designs a true representation of the intended user experience? (CORRECT)

Correct: Before marking a design iteration as complete, participants or users should be able to interact with and interpret the designs without extra guidance. That means the designer created a design that’s intuitive and easy to navigate. It’s also important to consider if the designs are true representations of the intended user experience, and if placeholder texts have been replaced with finalized assets.

Correct: Before finalizing a design, the designer should make sure all placeholder texts, icons, and imagery have been replaced with finalized assets. That way, the engineering team will have a complete package to bring into production. It’s also important to consider if the designs are true representations of the intended user experience, and if participants are able to interact with the designs without extra help.

Correct: After completing rounds of analysis, tests, and interviews, it’s important to assess if the final designs are representative of what users actually want and need. It’s also important to consider if placeholder texts have been replaced with finalized assets, and if participants are able to interact with the designs without extra help.

6. The app you have created is now in the final stages. You are ready to test it and conduct a usability study. What should you do before you begin a usability study?

  • Write a UX research plan. (CORRECT)
  • Find users to test the app.
  • Evaluate the ease of navigation within the app.
  • Ask colleagues to review the app’s UX design.

7. At what point in your design process should you conduct a usability study?

  • During each stage of the design process (CORRECT)
  • During the low-fidelity prototype phase
  • At the end of the design process
  • Before designing mockups in Figma

8. You are conducting a usability study for your prototype and are guiding users through the study. What type of usability study are you conducting?

  • Pilot
  • Unmoderated
  • Moderated (CORRECT)
  • Mediated

9. You have gathered all of the data from the usability study, organized it, identified themes, and now have actionable insights. Now, you are ready to update your design. Where should you make the updates?

  • High-fidelity prototype
  • Mockups (CORRECT)
  • Wireframes
  • Low-fidelity prototype

10. You have implemented all of the feedback from the usability study and have iterated your designs. You think you are done and are ready to move the prototype into production. What are some questions you can ask to identify when you are done with design iterations and ready to hand off to production? Select all that apply.

  • Do we have enough budget left to continue to iterate the designs?
  • Are all the final assets in place? (CORRECT)
  • Can users navigate through and use the designs without guidance? (CORRECT)
  • Does the design represent the desired user experience? (CORRECT)

11. You have created a custom thumbnail of your design files in preparation for the production hand off. What information would be helpful to include for the production team?

  • Technical specifications (CORRECT)
  • Additional brainstorming ideas
  • Screenshots of the initial wireframes
  • User feedback

12. In preparation for hand off, you have created custom thumbnails of your design files. What actions did you take in Figma to do this?

  • Right-click on the prototype file and select Set as Thumbnail.
  • Right-click on the frame of the design file and select Set as Thumbnail. (CORRECT)
  • Right-click on the canvas of the design file and select Set as Thumbnail.
  • Right-click on the page of the design file and select Set as Thumbnail.

13. You are working on your portfolio and adding case studies to each project. Which factors should you consider when creating case studies?

  • They should be visually appealing and easily skimmable. (CORRECT)
  • They should include only the project start date, end date, and the client name.
  • They should be at least a page long with clear paragraphs and sections.
  • They should outline, in great detail, everything you did throughout the project.

14. You are constructing your case study for a project that will go in your portfolio. How much detail of the research you conducted should you include in the case study?

  • You should include only the key insights from the research. (CORRECT)
  • You should include all of the research you conducted and the corresponding findings.
  • There’s no need to include the research in the case study.
  • You should include all of the empathy interview results and usability study data you collected.

15. You are creating a case study for your portfolio for the app you just designed. Which parts of your design visuals should be included? Select all that apply.

  • Only the final product 
  • Wireframes (CORRECT)
  • Paper sketches (CORRECT)
  • Low-fidelity prototype (CORRECT)

16. You are writing the UX research plan in preparation for the usability study you will conduct on your app. You need to write key performance indicators (KPIs) to measure certain elements in your app. What are some examples of key performance indicators (KPIs) that you may include? Select all that apply.

  • A list of what users should be able to do in the app
  • Amount of time a user spends on a task (CORRECT)
  • Use of navigation functionality compared to the use of search functionality (CORRECT)
  • User error rates (CORRECT)

17. You have started to transition your observations from the usability study into actionable insights. To start, you have gathered and organized the data. What should you do next with the data?

  • Create a list of insights based on the common themes.
  • Update the prototype based on the user data.
  • Ask users for another round of feedback.
  • Identify common themes or patterns. (CORRECT)

18. You have finished implementing feedback from the usability study. You have iterated your designs. You feel that you are ready for next steps. What should you do with your designs next?

  • Make the product live.
  • Double-check your designs one more time.
  • Hand them off to the production team. (CORRECT)
  • Ask a colleague to do a final review.

19. You have been working in Figma for the majority of your app creation. You have collaborated with numerous partners throughout the design process. Who are you most likely to have collaborated with? Select all that apply.

  • End users
  • Copy editors (CORRECT)
  • Developers (CORRECT)
  • Project managers (CORRECT)

20. You have shared the design files in Figma with several groups. You have given the project manager viewer access. What does this access allow the project manager to do within the design files? Select all that apply.

  • Change out stock images
  • Preview frames (CORRECT)
  • Select layers (CORRECT)
  • Make comments (CORRECT)

21. You have finished the project and have added it to your portfolio. You need to add case studies to your portfolio. Which projects in your portfolio should include case studies?

  • The first project in your portfolio
  • All portfolio projects (CORRECT)
  • The largest portfolio projects
  • The portfolio projects that are the most complex

22. Based on the usability study, you have made revisions to a few pages in your mockups. What should you do with the outdated pages from your mockups?

  • Keep them where they are so you can refer back to them at any time.
  • Move them to an archive folder.
  • Remove them from your design. (CORRECT)
  • Minimize the pages so they are still available if you need them.

23. You have handed off your designs to production. When will you iterate on your designs again?

  • After the product has launched (CORRECT)
  • Never; you are done with the product
  • Before the production team finalizes the coding
  • After the engineers have prepared it for final delivery

24. You have provided some of the production team viewer-only access to the Figma design files. What can they do with this type of access?

  • Export assets (CORRECT)
  • Swap out an icon
  • Update content
  • Move a connection

25. You have added your designs to your portfolio. Now, you need to add case studies to each portfolio piece. What should your case studies include? Select all that apply.

  • Project scope and budget
  • Process (CORRECT)
  • Project goals and objectives (CORRECT)
  • Project outcome (CORRECT)

26. When you are writing a case study for your portfolio project, it is a good idea to tell a story. Which is the best way to structure the story?

  • Ensure there is a beginning, middle, and end to the story.
  • Use the five steps of the design thinking framework as a guideline. (CORRECT)
  • Weave the 5 C’s of storytelling throughout your case study—circumstance, curiosity, characters, conversations, conflicts.
  • Incorporate your personal experiences into each section of the case study.

27. In the case study you are writing for the portfolio project, why is it important to include the results of the usability testing you conducted?

  • It is a way to add more content to the case study and ensure it looks substantial to readers.
  • It can prove that your designs were accurate from the beginning.
  • It is a way to show what you learned from the research. (CORRECT)
  • It is a way to prove that you actually did the research.

28. You are in the midst of writing your UX research plan. You have already identified your research goals. Now, you will write the research questions. What types of questions should you write?

  • Yes or no questions
  • Rhetorical questions
  • Leading questions
  • Actionable and specific questions (CORRECT)

29. After the usability study is complete, you have gathered and organized the user feedback. Then, you have identified common themes that were prevalent in the user feedback. What should you do next?

  • Prep the prototype for final delivery.
  • Create a list of insights based on the common themes. (CORRECT)
  • Make changes to the prototype based on the user insights.
  • Conduct a second usability study to validate the first group’s observations.

30. You are ready to hand off your Figma design files to production. What can you do to help orient new collaborators or the development team to the files?

  • Create custom thumbnails to orient users to your files. (CORRECT)
  • Conduct a conference call and walk everyone through the files.
  • Tag team members in each file and direct them to look at the files and ask questions, if needed.
  • Take a screenshot of each file and add in comments explaining each element.

31. You are almost finished with your designs and are starting to think about showcasing them to hiring managers. When should you update your portfolio?

  • At the beginning of the design process
  • At the end of the design process
  • At the midpoint of the design process
  • Throughout the design process (CORRECT)