Building Low-Fidelity Prototypes

Course 3 – Build Wireframes and Low-Fidelity Prototypes quiz answers

Week 3: Building Low-Fidelity Prototypes

Google UX Design Professional Certificate

Complete Coursera Answers & Study Guide

Building Low-Fidelity Prototypes INTRODUCTION

In the Building Low-Fidelity Prototypes course offered by Coursera as part of the Google UX Design Professional Certificate, you will begin to move from concept to prototype.

Building on the empathy, definition and ideation stages, you’ll develop a paper prototype for your mobile app. This will be followed by transitioning to a low-fidelity digital prototype in Figma that captures basic features and functions of your design. It is important during this process to take measures to avoid bias or deceptive patterns in your designs.

The Building Low-Fidelity Prototypes course provides an opportunity for learning how to recognize potential bias in your work and developing strategies for preventing it.

Learning Objectives

  • Create a paper prototype
  • Define the difference between a wireframe and a prototype
  • Explain the path from digital wireframes to a digital lo-fi prototype in Figma
  • Build a low-fidelity prototype in Figma
  • Recognize and avoid implicit bias in design
  • Identify common deceptive patterns in UX design
  • Understand how to avoid the effects of deceptive patterns

TEST YOUR KNOWLEDGE OF LOW-FIDELITY PROTOTYPES

1. You demonstrate an early product model’s scrolling and click functionality to stakeholders before it goes to engineering. What are you demonstrating?

  • A prototype (CORRECT)
  • A design type
  • A storyboard
  • A wireframe

Correct: Demonstrating what a design idea can do in a prototype gives designers an opportunity to receive feedback and make improvements accordingly.

2. What is the most significant difference between a wireframe and a prototype?

  • Fidelity
  • Interactivity (CORRECT)
  • Time
  • Cost

Correct: As designers transition from a wireframe to a low-fidelity prototype, the most significant difference is the level of interactivity, or ability to “click” from one screen to another.

3. What is the goal of creating a low-fidelity prototype?

  • Make it easier for engineers to value the design
  • Create a complex and interactive design that’s ready for development
  • Make designs testable to collect and analyze feedback early on (CORRECT)
  • Create a complex and static design to show stakeholders

Correct: Low-fidelity designs are simple, interactive models that provide a basic idea of what a product would look like. Whether it’s in paper or digital form, the goal is to make the designs testable so the team can collect and analyze feedback early on.

4. Why is it beneficial to build paper prototypes? Select all that apply.

  • Easy to interpret
  • Allows rapid iteration (CORRECT)
  • Inexpensive (CORRECT)
  • Low commitment (CORRECT)

Correct: Due to the nature of creating paper prototypes, it’s easier to create prototypes and ideas quickly. They’re relatively low -commitment and inexpensive too.

Correct: Since paper prototypes only require a writing or drawing tool and paper, they’re relatively inexpensive to create. For the same reason, they’re easier and less painful to eliminate if they don’t meet user needs, and they allow for rapid iteration

Correct: Digital prototypes often take a lot longer to create, so when it comes time to eliminate ideas that don’t meet user needs, it may be tougher to part ways with them. Paper prototypes, on the other hand, are relatively inexpensive and quick to create, which makes them less of a commitment.

5. In which situation is building a paper prototype most useful? Select all that apply.

  • Remote collaboration
  • The define stage of the design process
  • Brainstorming sessions (CORRECT)
  • Early product testing (CORRECT)

Correct: Creating paper prototypes during brainstorming situations is also useful because designers can quickly draw and compare multiple ideas. They’re also useful during early product testing in order to provide visual portrayals of potential solutions.

Correct: Paper prototypes are great to build during early product testing, especially if there are ideas that need to be clarified with visual portrayals. Paper prototypes are also useful during brainstorming sessions.

6. To begin prototyping in Figma, what is the first step you need to take?

  • Change to the Inspect tab
  • Change to the Layers tab
  • Change to the Prototype tab (CORRECT)
  • Change to the Assets tab

Correct: To begin prototyping in Figma, you need to change from the Design tab to the Prototype tab. This changes the options for what designers can do with each of the wireframe screens.

7. How do you access the presentation view in Figma?

  • The inspect tab of the design panel:
UX Course 3 Week 3.1
Coursera UX Course 3 Week 3
  • The blue share button in the upper-right corner of the toolbar:
UX Course 3 Week 3.2
Coursera UX Course 3 Week 3
  • The play button in the upper-right corner of the toolbar (CORRECT)
UX Course 3 Week 3.3
Coursera UX Course 3 Week 3
  • The outlined square button in the upper-left corner of the toolbar:
UX Course 3 Week 3.4
Coursera UX Course 3 Week 3

Correct: To access presentation view, navigate to the play button. It is located in the upper corner of the toolbar, and it’s represented by an outlined triangle pointing to the right.

8. What is an example of implicit bias?

  • Lian interviewed a candidate for an upcoming position and forgot to write down why they’d make a great addition to the team. When it was time to meet with her colleagues to discuss the likeliest candidate, she could only remember the first and last things the candidate mentioned.
  • Justin is new to the pacific northwest region of the United States and wanted to make friends. After playing a pick-up basketball game with a group of men from work, Justin asked each of them about what it’s like dating women in the area. (CORRECT)
  • Leonard wants to adopt a dog at a shelter. He was introduced to a litter of twelve puppies but, after meeting each of them, he opted to choose the first one he saw.

Correct: This is an example of implicit bias, which is a collection of attitudes and stereotypes we associate to people without our conscious knowledge. Justin assumed all of his new friends were heterosexual based upon his previous life experiences and stereotypes.

9. What is the forced continuity deceptive pattern?

  • Creating an unwanted situation for a user that’s difficult for them to get out of
  • Charging a user for a membership without a warning or reminder (CORRECT)
  • Shaming a user when they opt out of an offer
  • Adding extra expenses into a user’s shopping cart

Correct: Correct! Charging a user for a membership without a warning or reminder is the deceptive pattern of forced continuity.

10. Identify an example of a deceptive pattern that produces physical effects on the user.

  • Alberto receives an email notification to remind him of an upcoming energy bill. He panics and immediately goes online to pay.
  • While browsing a website, Ingrid receives a notification prompt in the bottom-right corner of her screen asking “How may I help you today?” It seems suspicious and they immediately exit their browser.
  • While doing some casual online shopping, a large, red notification badge keeps alerting Angeline of a limited-time sale happening this week. They appear in the middle of her screen every few minutes with advertisements on exclusive offers. This makes her feel anxious. (CORRECT)

Correct: This is an example of a deceptive pattern and the physical effects it can have on the user. The website is bombarding Angeline with messages to funnel her into browsing the sale. The use of frequent and large, red notification badges compound to bring a sense of urgency.

11. You advise your client that the low-fidelity prototype will have interactivity. How much interactivity will it include?

  • It will be a fully functional prototype, with all interactivity included.
  • It will show the hamburger menu, with all of the categories in the menu populated.
  • It will show the buttons on each screen, along with a brief description of the actions for the buttons.
  • It will connect the wireframe screens so you can click from one screen to another. (CORRECT)

12. Your client has been offering new ideas and lots of feedback at every stage in the app design so far. You are ready to move from wireframing to a low-fidelity prototype. You let the client know you will be starting with a paper prototype. What are the benefits of this? Select all that apply.

  • A paper prototype can be scanned and built into a digital prototype very quickly.
  • Paper prototypes are low commitment, and it’s no big deal if you or your client do not care for them. (CORRECT)
  • A paper prototype allows for rapid iteration with low risk. (CORRECT)
  • A paper prototype is low cost. (CORRECT)

13. You are adding connections to your prototype in Figma. You select the presentation view and only see one frame from your prototype. How can you see all of your prototype frames in the presentation view?

  • You will need to add connections to all of your frames. Figma only includes frames with connections in the presentation view. (CORRECT)
  • You will need to go back to the prototype panel and, in the interaction details, make sure “Add connection to Frame” is selected.
  • You will need to double-check the coding with the engineer team and ensure they have transferred it over to Figma correctly.
  • You will need to go back to the design panel and ensure that all of the connections are correct.

14. You would like to conduct a usability test on your Figma prototype. Which mode is the best mode to do this in?

  • Feedback mode
  • Observation mode (CORRECT)
  • Suggestion mode
  • Comment mode

15. You are creating an app for hairdressers and want to ensure your own unconscious implicit bias doesn’t affect the integrity of the app. Which tools would you use to ensure you know about the end users? Select all that apply.

  • User images
  • Identity indicator
  • Personas (CORRECT)User journey maps (CORRECT)

16. You are reviewing an app that promotes skin care for aging skin. The claims in the content are amazing, and you are directed to the purchase screen of the app. You then realize that the claims cannot be realistic. What is this type of treatment in UX design called?

  • Distorted patterning
  • Deceptive patterning (CORRECT)
  • Misinformed patterning
  • Ambiguous patterning

17. Your phone dings and you notice that you have a DM notification from one of the social media apps you frequent. That little red flag notification makes you feel happy, and you receive a natural chemical response in your body. What chemical is released in this instance?

  • Dopamine (CORRECT)
  • Keratin
  • Creatine
  • Thalamine

18. Your UX mentor discusses deceptive patterning with you and asks for examples of how you could avoid forced continuity, or the notion of charging a membership without a warning or reminder. What examples could you provide? Select all that apply.

  • Decrease the pressure on the user to commit to the membership.
  • Notify users before their free membership trial expires. (CORRECT)
  • Ensure the buttons are clearly labeled. (CORRECT)
  • Make it easy for users to cancel their memberships. (CORRECT)

19. You are at the beginning stages of creating your wireframes in Figma. You need to choose the device you are designing for. How do you do this?

  • Select File and then design the device frame you will design for.
  • Select the Prototype panel and then select the device.
  • Select the Preview button to see the devices to choose from.
  • Select the Frame tool and then select the device that you will design for. (CORRECT)

20. As you work on the app for your client, you want to ensure you are considering users’ attention economy. What are some UX design best practices you can use to accommodate this? Select all that apply.

  • Employ soothing colors and imagery.
  • Avoid deceptive patterns. (CORRECT)
  • Use goals and metrics. (CORRECT)
  • Share your design choices with your colleagues. (CORRECT)

21. You have decided to move into the prototyping phase for the app you are designing. You recommend starting with a paper prototype first. Your client asks you to explain the disadvantages of a paper prototype. What might you say? Select all that apply.

  • A paper prototype requires refined drawing and sketching skills in order for the end product to be understandable.
  • A paper prototype can only be tested in person. (CORRECT)
  • A paper prototype can be difficult to interpret and requires a lot of imagination to picture what the end product will look like. (CORRECT)
  • A paper prototype makes it difficult to collaborate with a remote team. (CORRECT)

22.  You are in the prototype mode in Figma and ready to make connections between your wireframe screens. What are the three parts that make up prototype connections? Select all that apply.

  • The menu that shows all of the pages in the prototype
  • The destination (CORRECT)
  • The connection, which stores the interaction details (CORRECT)
  • A hotspot where the connection begins (CORRECT)

23. You have designed a mapping app for a large city. The app provides travel directions only for walkers. You did not account for automobiles, public transportation, or bicycle transportation. Which type of bias did you exhibit with the creation of this app?

  • Unconscious bias
  • Confirmation bias
  • Implicit bias (CORRECT)
  • Expectancy bias

24. You are booking travel through a travel website. When you get to the checkout page, you see that your flight and hotel are in the shopping cart as you indicated. But, you also notice that trip insurance is in the shopping cart. You did not add that trip insurance and remove it from the shopping cart. What type of deceptive patterning is this considered?

  • Sneak into basket
  • Confirmshaming (CORRECT)
  • Forced continuity
  • Proactive sales

25. You are shopping for trousers on a clothing store app. You add a tan pair of trousers to the shopping cart and select the checkout button. When you get to the cart, you see recommendations for a shirt that many customers have paired with the trousers. You end up buying the shirt as well. Why are deceptive patterns harder to ignore than traditional forms of advertising?

  • Deceptive patterns are in place so you disclose your personal financial information.
  • Deceptive patterns seem like they are innocent and intended to increase your satisfaction.
  • Deceptive patterns are designed to be difficult to identify. (CORRECT)
  • Deceptive patterns are designed to be a friendly nudge toward an action that seems fairly benign.

26. You have created your wireframes in Figma and are ready to move them into a low-fidelity prototype. What tab should you choose to start this transition?

  • The prototype tab (CORRECT)
  • The design tab
  • The device tab
  • The connection tab

27. The app that you are designing uses various notification noises and bright colors. How might these elements negatively impact users?

  • They may feel happier that they can better hear and see notifications.
  • Their attention to messages may increase.
  • They may feel distracted or anxious. (CORRECT)
  • They may respond faster to texts or emails.

28. Your client asks you to explain what a low-fidelity prototype is. How might you explain it to them?

  • A low-fidelity prototype gives users the ability to connect the screens in the order that makes the most sense to them.
  • A low-fidelity prototype is the sequencing of screens with the app that you are creating.
  • A low-fidelity prototype is a fully interactive model that showcases the full functionality of the product.
  • A low-fidelity prototype is a simple interactive model that provides a basic idea of what the product would look like. (CORRECT)

29. You have shared the Figma prototype with your team and would like to watch how they interact with it. Which mode should you be in to do this?

  • Viewing mode
  • Observation mode (CORRECT)
  • Monitoring mode
  • Study mode

30. You are ready to build your low-fidelity prototype in Figma. What should you consider before you start? Select all that apply.

  • The colors and imagery
  • The order actions are performed (CORRECT)
  • Common user flows (CORRECT)
  • The buttons and corresponding actions (CORRECT)

31. You are establishing the frame connections in Figma for your prototype and are ready to select the triggers for the transitions. You want to identify if the transitions from frame to frame will be from a tap, click, or hover. Which panel in Figma can you do this from?

  • Layers panel
  • Assets panel
  • Interaction details panel (CORRECT)
  • Navigation panel

32. Your client has asked for multiple prototypes so they can choose the one they like best. How do you keep multiple prototypes organized in the same file?

  • Create multiple menus within the same file.
  • Create multiple pages within the same file. (CORRECT)
  • Create multiple frames within the same file.
  • Create multiple panels within the same file.

33. When you first arrive at a health foods website, a pop-up appears asking if you want to save 10% when you enter your email address. You select “No” and then a message appears saying, “I guess you don’t want to lose weight.” What type of deceptive patterning is this?

  • Confirmshaming (CORRECT)
  • Scarcity
  • Urgency
  • Forced continuity

34. You are shopping for a new computer that will really help you excel with UX design. A lot of your UX designer friends have recommended it. You are researching it online and notice that one website mentions there are only two left in stock. Which deceptive pattern is this?

  • Confirmshaming
  • Scarcity (CORRECT)
  • Urgency
  • Hidden costs

35. Your UX design mentor reviews your designs and suggests that you should be mindful of your implicit bias. What are they referring to?

  • Your ideas and how they are flushed out in multiple frames in Figma
  • Your attitude and the stereotypes you associate with people without your conscious knowledge (CORRECT)
  • Your allegiance to your designs and reluctance to iterate
  • Your view of the world and how you communicate that to your colleagues

36. Your UX design mentor asks you to double-check your app design to ensure that you do not include elements that encourage addictive behaviors or negatively affect users’ lives. Which ones are examples of UX design that work to prevent these issues? Select all that apply.

  • A setting on a website allowing users to chat with others while shopping
  • An app that sends immediate notifications of likes or favorites
  • A mobile device that pauses or silences notifications while driving (CORRECT)
  • A setting on a mobile device that puts the device to sleep until the morning (CORRECT)

Building Low-Fidelity Prototypes CONCLUSION

Prototyping is an essential step in the app design process as it allows your design to be tested and iterated on before its final product is realized.

You’ve now gone through each of the four stages in the design process, with a greater comprehension of how you can use creative techniques, recognize potential bias in designs, and avoid deceptive patterns in the development of your app. Prototyping gives you control over how your design evolves by testing and reacting to data that leads to improvement. Through this process, we hope that you have learned more about prototyping and feel better prepared for developing your mobile app concept into a reality.

We thank you for being part of this journey with us and wish you all the best as you continue to work on creating something meaningful! If this blog post has inspired you to learn more about pursuing a career in design app development, why wait? Join Coursera now!