GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Course 7 – Design A User Experience for Social Good & Prepare For Jobs

Week 3: Creating mockups and high-fidelity prototypes

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

Welcome to the world of high-fidelity design! In this part of the course, you will create mockups for your dedicated mobile app that incorporate visual design elements and principles. Along the way, you’ll save elements and components in your design system, which you’ll be able to reuse when you design a responsive website in the next part of the course. Then, you’ll turn your mockups into a high-fidelity prototype. Finally, you’ll have the option to plan and conduct a usability study to gather feedback about your high-fidelity prototype. By the end of this part of the course, your dedicated mobile app designs will be complete, and you will be more than halfway done with your portfolio project.

Learning Objectives

  • Understand the benefits of mockups
  • Create mockups for a mobile app in Figma or Adobe XD
  • Assemble a basic design system
  • Plan and conduct a usability study about a high-fidelity prototype
  • Build a high-fidelity prototype for a mobile app in Figma or Adobe XD

WEEKLY CHALLENGE 3: MOCKUPS AND HIGH-FIDELITY PROTOTYPES

1. What do mockups allow designers to do?

  • Identify a target user’s needs and pain points
  • Incorporate complex interactions and animations
  • Bring designs to life using visual design elements (CORRECT)
  • Refine a design’s information architecture

Correct: Designers can build on simple design iterations captured in wireframes and add visual elements like typography, color, and iconography.

2. A designer creates a mockup of a website homepage for a youth services nonprofit. They incorporate elements that add hierarchy to the design, make text easy to read, and add visual style. What visual design element are they using?

  • Layouts
  • Iconography
  • Symbology
  • Typography (CORRECT)

Correct: Typography can help add hierarchy to your designs, make text easy to read, and add visual style. 

3. When conducting a usability study, it’s important to put people first. You should make sure participants are comfortable, thank them for joining, and address them directly. What are the other best practices for conducting a usability study? Select all that apply.

  • Direct participants to engage quietly, and write down their opinions
  • Communicate clearly, and explain the focus of the study (CORRECT)
  • Collect essential paperwork, like non-disclosure agreements and permission to record (CORRECT)
  • Ask the right questions, and encourage elaboration (CORRECT)

Correct: You need to explain the focus of the study and what participants will give feedback on, and introduce the think-aloud method.

Correct: You need to provide and collect essential paperwork. This includes non-disclosure agreements and permission to record, if you choose to record the session.

Correct: Usability studies are all about asking and answering questions. You should ask open-ended questions, address questions from different angles, and encourage elaboration.

4. During a usability study, researchers select a data gathering technique that helps participants turn their thoughts into shared ideas through spoken, signed, or typed words. What is this method called?

  • Think-aloud method (CORRECT)
  • Shared-ideas method
  • Question-and-answer method
  • User-first method

Correct: With the think-aloud method, researchers ask participants to explain what they’re doing while they’re completing tasks.

5. A designer conducts a usability study for a mobile app prototype that helps people locate and reserve available parking spaces. They gather and organize the data in this spreadsheet:

C7W3.1
Coursera UX Design Course Week 3

How can the designer identify themes in this data? Select all that apply.

  • Identify comments with actionable feedback
  • Identify consistent comments from a single respondent
  • Identify rows that contain a lot of 1s (CORRECT)
  • Identify rows that contain a lot of blanks (CORRECT)

Correct: These may indicate a pattern. This is a trend in the data.

Correct: These may indicate a pattern. This is a trend in the data.

6. A Priority 0 (P0) research insight is one that must be fixed. Which of the following usability study examples is a P0 issue?

  • A user that wears eyeglasses needs to zoom-in to review an app’s terms and conditions
  • A user taps a button on a mobile app to submit a form, but the button does not work (CORRECT)
  • A user comments that they are frustrated with an app’s slow download speed
  • A user reports a lag with an app’s in-app map feature, which relies on outside data

Correct: This is a P0 research insight because it must be fixed for your product to work.

7. Imagine a research team conducts a usability study for a social media website design. They identify several themes and work with the team’s engineering and product leads to prioritize insights. Which of the following findings should the team categorize as a priority 1 (P1) research insight? Select all that apply.

  • A user reports that when they click the “share content” feature, the page crashes and reloads
  • A user clicks the back button on the website, and the button does not respond
  • A user needs to manually scroll through snapshots in the “add photo” feature, but would prefer an animated gallery (CORRECT)
  • A user needs to manually select the input language on the “translate post” feature, but would prefer automatic language detection (CORRECT)

Correct: A P1 issue may impact the user experience, but it does not stop a user from completing the main flow. A user preference is typically a P1 issue.

Correct: A P1 issue may impact the user experience, but it does not stop a user from completing the main flow. A user preference, or feature request, is typically a P1 issue.

8. Before testing a prototype, why is it important for a designer to confirm that the app meets specific platform requirements? Select all that apply.

  • To ensure the team meets market growth expectations
  • To align with a designer’s platform of preference
  • To design an experience that aligns with platform conventions (CORRECT)
  • To meet the expectations of users on the platform (CORRECT)

Correct: Before conducting user testing, designers should confirm that the app meets platform conventions. If an app is being designed for Android devices and platform-specific interactions, the team shouldn’t expect iOS users to easily navigate it.

9. When building a high-fidelity prototype in Figma or Adobe XD, what do you do once you connect the screen or elements within the screens?

  • Repeat the process for all screens
  • Add interaction details (CORRECT)
  • Lay out the mockups
  • Adjust the animation

Correct: You add interaction details after you connect the screens to create triggers that will cause the prototype to advance forward.

10. Fill in the blank: When creating a design system in Figma, you will use a(n) _____.

  • assets panel
  • button kit
  • sticker sheet (CORRECT)
  • visual system

Correct: Sticker sheets are similar to asset panels. They allow designers to create components that can be used consistently throughout the website.

11. What is the difference between wireframes and mockups?

  • Wireframes are static, high-fidelity designs that closely represent the final product. Mockups are static images that provide an overview of the hierarchy of the webpage.
  • Wireframes are interactive designs that closely represent the final product. Mockups are static images without a lot of detail or color.
  • Wireframes are static designs with visual and UI elements. Mockups are static images that provide an overview of the layout and hierarchy of the webpage.
  • Wireframes are static images that provide an overview of the layout and hierarchy of the webpage. Mockups are static, high-fidelity designs with visual and UI elements. (CORRECT)

Correct: Wireframes provide a basic outline of a design, while mockups provide more visual details of a design.

12. When conducting a usability study, it’s important to make sure participants sign a nondisclosure agreement (NDA) before you ask questions. What is the purpose of an NDA? Select all that apply.

  • Verify parents and guardians have provided permission for their kids to participate
  • Confirm participants’ active consent to record the session
  • Build trust with participants and increase rapport (CORRECT)
  • Inform participants they can’t talk about the product or study publicly (CORRECT)

Correct: You need to keep the NDAs in your records. They can help protect confidentiality and your intellectual property.

13. Strong insights must be grounded in real data and answer the team’s research questions. What are the other qualities of strong insights? Select all that apply.

  • Reflect design best practices
  • Easy to understand (CORRECT)
  • Inspire direct action (CORRECT)
  • Increase empathy for the user experience (CORRECT)

Correct: Strong insights must be easy to understand.

Correct: Strong insights must inspire direct action.

Correct: Strong insights must increase empathy for the user experience

14. Imagine a research team finishes prioritizing insights from a usability study of a responsive website. The researchers identify only four P0 issues, but dozens of P1 issues. What is the best strategy to implement this feedback?

  • Resolve as many P0 and P1 updates as possible, and flag remaining items to revisit in future usability testing
  • Resolve P0 updates now, and then resolve P1 updates one by one, time permitting
  • Resolve as many P0 and P1 updates as possible, and add remaining items into another category: P2 updates (CORRECT)
  • Resolve P0 updates now, and further categorize P1 updates into another category: P2 updates

Correct: The team can further categorize P1 insights. For instance, a team might review a list of ten insights that they initially categorize as P1. They can then identify which to address this month (the P1 issues) and which to tackle next month (the P2 issues).

15. Fill in the blank: Before conducting a usability study for an Android app, it’s important to design an experience that meets ___.

  • stakeholder expectations of market growth.
  • designer needs and solutions.
  • platform-specific conventions and user expectations. (CORRECT)
  • trending iconography and typography ideas.

16. Fill in the blank: When creating high-fidelity digital mockups, you should build them in _____.

  • a different design tool from your earlier design iterations
  • a new design tool
  • the practice section of a design tool
  • the same design tool you used to build your wireframes and low-fidelity prototype (CORRECT)

Correct: You should use the same design tool used to build your wireframes and low-fidelity prototypes to transfer designs easily for a seamless iteration.

17. When conducting a usability study, the researchers decide to record their findings in a debriefing meeting after the session. Is this the best way to collect their observations?

  • Yes. This is a widely used data collection method. Researchers can collect and synthesize their observations directly after the session.
  • No. It is important to record the usability study session. Researchers can use a paper note sheet, screen recorder, video recorder, or audio recorder. (CORRECT)
  • Maybe. It depends on the research goals. Researchers can record the sessions, or collect their observations directly after the session.

Correct: Researchers should not mention other participants. This helps researchers avoid privacy violations and possibly skewing participants’ answers.

Correct: Researchers should ask the same question from different angles. This gives participants more chances to offer detailed responses, which can help researchers get more accurate insights and useful data.

19. A designer conducts a usability study for a mobile app prototype that helps people locate and reserve available parking spaces. They gather and organize the data in this spreadsheet:

C7W3.1 1
Coursera UX Design Course Week 3

In row 1, the designer identifies a theme. Which statement below best describes this theme?

  • Some respondents had difficulty locating a parking space using the “Reserve a Space” feature
  • The “Reserve a Space” feature may require an update following P0 design changes
  • All participants are able to locate a parking space using the “Reserve a Space” feature (CORRECT)
  • Four out of four respondents report they are able to confirm selection, verify cost, and reserve a parking space.

Correct: Since four out of four respondents agree, the designer states that all are able to locate a parking space; they identify this as a theme.

20. Consider the following scenario:

A researcher is prioritizing insights from a usability study of an online learning app. The researcher identifies a common theme: When users complete a test, they click submit, but they are unable to verify submission until the instructor grades it. How should the researcher prioritize this issue?

  • This is a P1 issue since users cannot complete the user flow
  • This is a P1 issue since this feature request does not impact the app’s functionality
  • This is a P0 issue since users feel tricked by the submission feature (CORRECT)
  • This is a P2 issue since it requires back-end updates, which delay the timeline

Correct: This is a P0 issue that must be fixed. It is a top priority to ensure users do not feel deceived or tricked.

21. Fill in the blank: When UX designers and collaborators want a better idea of the final state of a website or app, they can review _____.

  • Mockups (CORRECT)
  • low-fidelity prototypes
  • case studies
  • digital wireframes

Correct: Mockups offer UX designers and their collaborators a better idea of the final state of the website or app. Mockups are static, high-fidelity designs that are not clickable or interactive.

22. How can designers employ the typography visual design element to enhance a mockup?

  • Organize text and typefaces to make language legible, readable, and visually appealing (CORRECT)
  • Mix, match, and contrast colors and text to communicate a core theme
  • Compile images, shapes, and symbols to create an association with a subject or idea
  • Arrange text and images to organize simple user journeys, and make content easy to find

Correct: Typography can help designers to organize text and typefaces, and improve the readability and visual impact of a mockup.

23. A designer conducts a usability study for a mobile app prototype that helps people locate and reserve available parking spaces. They gather and organize the data in this spreadsheet:

C7W3.1 2
Coursera UX Design Course Week 3

What trends can the designer identify in this data? Select all that apply.

  • Participants may be confused about how to locate a parking space using the “Reserve a Space” feature
  • Participants have mixed feelings about whether the parking locator app is useful
  • Participants may be confused about how to confirm, verify, and reserve a parking space (CORRECT)
  • Participants are able to locate a parking space using the “Reserve a Space” feature (CORRECT)

Correct: In row 4, two of the four respondents confirmed they had issues when completing the confirm, verify, and reserve process, so this may indicate a pattern. This is a trend in the data.

Correct: In row 1, four respondents agree with this comment, so this may indicate a pattern. This is a trend in the data.

24. Fill in the blank: Strong insights must be grounded in real data, which means researchers should base insights on _____.

  • how respondents delivered their answers, not what they said
  • what they expected to find in the research, rather than what they observed in the study
  • whether the research questions have changed since the usability study was conducted
  • what they observed during research, not what they felt at the time (CORRECT)

Correct: Researchers must base insights on what they observed, which helps researchers confirm that insights are grounded in real data.

25. How can researchers identify which usability study insights to apply to their design?

  • Prioritize research insights, from most urgent to least urgent (CORRECT)
  • Prioritize trends in the data, from most actionable to least actionable
  • Prioritize stakeholder input, from most helpful to least helpful
  • Prioritize user pain points, from most common to least common

Correct: It’s helpful to prioritize your research insights from most urgent to least urgent. Project stakeholders can be a helpful resource as you sort out priorities.

26. When building a high-fidelity prototype in Figma or Adobe XD, why is it important to adjust the animation?

  • The animation settings determine the number of triggers for each element.
  • The animation settings establish the main user flow.
  • The animation settings determine how the prototype moves from one screen to the next. (CORRECT)
  • The animation settings establish the timing a user has to advance from one screen to the next.

Correct: Adjusting the animations is important because it determines how the prototype moves from one screen to the next. Designers need to complete this step before testing the prototype and collecting feedback from users

27. Fill in the blank: When creating a design system in Adobe XD, you will use a(n) _____.

  • button kit
  • asset panel (CORRECT)
  • sticker sheet
  • visual system

Correct: Assets panels are similar to sticker sheets. They allow designers to create components that can be used consistently throughout the website.

28. How can you improve mockups for users?

  • Make elements highly interactive and clickable
  • Add visual design elements, like typography, iconography, and layouts (CORRECT)
  • Remove color and icons to keep the user from getting distracted
  • Align elements within the app based on their size

Correct: These elements will help to make it easier to map out the user flow and can help UX designers visualize the user journey in a more dynamic way.

29. How does a design system benefit designers?

  • By offering a place for designers to list any questions they have about the overall design.
  • By allowing them to easily reuse visual elements from the design system in their new designs. (CORRECT)
  • By helping them keep track of one visual element.
  • By allowing them to explore different styles for one design project.

Correct: Having a design system to pull from saves designers time. With a design system, designers don’t need to make new decisions about visual elements each time they update a mockup.

30. After mockups are laid out according to the user flow, what is the next step to create a high-fidelity prototype?

  • Adjust the animation
  • Add interaction details
  • Play the prototype
  • Connect the screens (CORRECT)

Correct: Once your mockups are in order, you can start connecting the screens.

31. A designer creates a mockup of a website homepage for a yoga studio. They incorporate elements including images and symbols associated with health and wellness. What visual design element are they using?

  • Iconography (CORRECT)
  • Typography
  • Layouts
  • Symbology

Correct: Mockups typically include icons; Iconography refers to the images or symbols associated with a subject or idea.

32. Imagine you are leading a usability study for a prototype of a responsive website designed to make it easier for older adults to book a rideshare. You are having a hard time interpreting feedback from one of the participants. What can you do?

  • Thank them for their response, and move on to another participant
  • Take a break from asking questions, and check the video recording
  • Summarize the participant’s idea, and repeat what you think they mean (CORRECT)
  • Revise the study method, and ask participants to write down and submit their ideas

Correct: If you’re ever unsure about participant feedback, try to summarize their ideas for confirmation. Repeat back what you think the participant means, and allow them to correct or confirm the statement.

33. Fill in the blank: Strong insights must be supported by _____.

  • outliers in the data
  • design best practices
  • multiple pieces of data (CORRECT)
  • research team opinions

Correct: Insights are strongest when they apply to multiple study participants, instead of just one.

34. If a developer is creating an app specifically for iOS mobile devices, is it important to test an app experience on all common mobile platforms?

  • Yes. Since these platforms together reflect the needs of most mobile users, it’s important to test this app on all common mobile platforms.
  • No. The designer should test the app experience on the platform the app is designed for. (CORRECT)
  • Maybe. It depends on the results of usability testing.

Correct: When a designer creates an app for iOS devices and its platform-specific interactions, there’s no need to test it on Android phones or with Android. Not only may the users be unable to easily navigate the platform, it’s not a practical use of a team’s time unless they plan on releasing the app for Android users later.

35. Which of the following situations indicate a Priority 1 (P1) issue in a design?

  • A user is prevented from completing the main user flow
  • A user is unable to access a part of the design
  • A user feels tricked by a part of the design
  • A user completes the main flow, but notes a convenience pain point (CORRECT)

Correct: A P1 issue may impact the user experience, but it does not stop a user from completing the main flow. A convenience pain point is a P1 issue.

36. What is the first step when building a high-fidelity prototype in Figma or Adobe XD?

  • Adjust the animation
  • Lay out the mockups (CORRECT)
  • Add interaction details
  • Repeat the process for all screens

Correct: The first step in building high-fidelity prototypes is to lay out the mockups in the order of the main user flow.

37. What elements in a mockup give designers a better idea about the final state of the website or app?

  • Navigation and transitions (INCORRECT)
  • Triggers and motion (INCORRECT)
  • Visual and UI (CORRECT)
  • Functionality and sound

38. Fill in the blank: When creating a design system, you can download a _____ to help get a head start on your designs.

  • prototype template
  • UI kit (CORRECT)
  • color checker
  • style locator

Correct: Downloading a UI kit allows you to leverage an external organization’s design system to build your design faster.

39. What should high-fidelity mockups include?

  • Clickable and interactive components (INCORRECT)
  • Front- and back-end site code
  • Digital and paper-based wireframes (INCORRECT)
  • Visual and UI elements (CORRECT)
Previous – Week 2
Next – Week 4

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe