Module1 Knowledge Check

Module 1 Knowledge Check & Challenge

Test Your Knowledge of Storyboards

Question 1

What are the key elements of a storyboard? Select all that apply.

• Scene ✓
• Character ✓
• Theme
• Narrative ✓
• Plot ✓

Answer: Scene, Character, Narrative, and Plot are the four key elements of a storyboard.

Question 2

Which of the following scenarios would be most appropriate to use a big picture storyboard?

• You create a new homepage for a news site. You need to show the details of the product and what happens during each step of the user experience.
• You create a tool that connects auto mechanics with local auto parts stores to check product availability in real-time. You want to test the app for possible connection issues.
• You start the design process for a new grocery delivery app. You want to pitch some ideas to the team about how the user could use it and benefit from it. ✓

Answer: Starting the design process for a new grocery delivery app and wanting to pitch ideas is perfect for big picture storyboards.

Test Your Knowledge of Design Fidelity

Question 1

Fill in the blank: Wireframes establish the basic _____ of a page and serve as an outline of a digital experience.

• structure ✓
• images
• text
• functional specifications

Answer: Structure - wireframes establish the basic structure before visual considerations are added.

Question 2

Which of the design fidelity types would you use if you need to get ideas out quickly while leaving room open for exploration?

• High-fidelity design
• Low-fidelity design ✓
• Medium-fidelity design

Answer: Low-fidelity design is used for quick ideation and exploration.

Question 3

Identify characteristics of a low-fidelity (lo-fi) design. Select all that apply.

• Low-fi designs use simple shapes and lines ✓
• Lo-fi designs are highly refined and polished
• Low-fi designs are often used to get ideas out quickly ✓
• Lo-fi designs include graphics and images

Answer: Lo-fi designs use simple shapes/lines and are used for quick ideation.

Module 1 Challenge

Question 1

You have researched your users for the app you are building and are clear on their needs and how they will interact with it. Now, you need to outline the process of how they will interact with the app. What will you create next?

• Information architecture
• User flow map ✓
• Wireframes
• Sitemap

Answer: User flow map shows the path users take to complete tasks from start to finish.

Question 2

You are presenting the user flow of the app to your client. They ask what the rectangles mean on the user flow. What do you tell them?

• They represent screens and show the associated screens users will experience while completing a task. ✓
• They represent a decision point and show where users should ask a question or make a decision.
• They represent a connection between screens and show users’ progress forward or backwards through the app.
• They represent an action and are steps that users take to complete a task from start to finish.

Answer: Rectangles represent screens in user flows.

Question 3

You are storyboarding and have run into some challenges showing a particular screen. The interaction is difficult to portray in the storyboard sketches. What might you do to help portray the interaction?

• Draw more detailed sketches.
• Add additional panels to the storyboard.
• Build out a quick prototype to a rough version of the interaction.
• Add captions. ✓

Answer: Captions are useful for interactions that are difficult to sketch visually.

Question 4

When you are writing a big-picture storyboard for your app. Which questions should you consider to help inform you of the direction of the storyboard? Select all that apply.

• What does the user do to transition to different screens?
• How will the user use the app? ✓
• Why will the user be delighted by the app? ✓
• Why will the app be useful? ✓

Answer: Big picture storyboards focus on how, why useful, and why delightful - not transition details.

Question 5

You are ready to move your app design from storyboard to wireframes. What are the benefits of creating wireframes? Select all that apply.

• They help users test the prototype.
• They help get teams on the same page early in the project. ✓
• They help establish clear functionality. ✓
• They establish the basic structure of a page. ✓

Answer: Wireframes help with team alignment, functionality clarity, and page structure.

Question 6

You are creating wireframes for the app you are designing. What constitutes good wireframes?

• Good wireframes show the brand identity.
• Good wireframes clearly organize and communicate information. ✓
• Good wireframes are the final and polished screens that explicitly demonstrate how the experience will work for users.
• Good wireframes display the content outline and image choices for the design.

Answer: Good wireframes clearly organize and communicate information.

Question 7

You tell your stakeholder that wireframes can save time and effort. They ask for more details on this. What would you tell them?

• Wireframes mean you can skip directly to a low-fidelity prototype.
• Wireframes offer an opportunity for approval of navigation and content early in the design process.
• Wireframes provide a means to sign off on style and branding early in the process.
• Wireframes serve as an early guide for the team so fewer revisions are required later on in the process. ✓

Answer: Wireframes serve as early guides reducing later revisions.

Question 8

You previously created a big-picture storyboard, and now you are moving into the close-up storyboard phase. As you are designing the close-up storyboard, which elements can you leverage from your big-picture storyboard? Select all that apply.

• The goal statement ✓
• The scenario ✓
• The problem statement ✓
• The user flow

Answer: Goal statement, scenario, and problem statement carry over from big picture to close-up storyboards.

Question 9

Your client has some additional ideas for a screen in the app you are designing. You create a new wireframe that incorporates the ideas. What does your wireframe include?

• The hamburger menu listings
• Basic shapes and lines to convey the new ideas ✓
• The colors and typography as identified from the brand guidelines
• The text and images

Answer: Wireframes use basic shapes and lines, not detailed visual elements.

Question 10

In a short sentence, you establish the context of the story by helping others understand the user and the problem you are tasked to solve. What is this called?

• Plot
• Scene
• Scenario ✓
• Narrative

Answer: Scenario establishes the context and helps understand the user and problem.