Week 1: Storyboarding and Wireframing
STORYBOARDING AND WIREFRAMING INTRODUCTION
Wireframes are very important in the UX design process. And this Google UX Design Professional Certificate for Coursera introduces you to this whole craft. And then organization through storyboarding can work to build the elements of the user interface and create excellent wireframes. This program would teach you how to use research results to devise the ideation in your storyboards and also create two storyboards, one big picture and one close up.
You would also learn how to make your first wireframes, by shaping design ideas as per real user needs, and eventually you should start having some understanding of benefits enjoyed by form wires and wireframing.
Learning Objectives:
- Build goal statements
- Outline a user flow
- Create both big picture and close-up storyboards and identify when to use each type
- Distinguish low-fidelity from high-fidelity designs
- Explain what wireframing is in the design process
- Use the basics of drawing
TEST YOUR KNOWLEDGE OF PRIOR CONCEPTS
1. What are some key benefits of considering accessibility in UX design? Select all that apply.
- Ensures underrepresented and excluded groups are taken into account (CORRECT)
- Creates solutions that often help everyone (CORRECT)
- Addresses societal structures and products rather than a person’s ability (CORRECT)
Accessibility in design takes on a new meaning when it pertains to equity-focused design in the arena of products that access and fairness to members of multiple genders, races, and abilities among which historically underrepresented groups fall.
Design for accessibility does benefit every single person, regardless of whether it affects those with apparent disabilities. It is there to use those having temporary disabilities, situational impairments, or a permanent disability, which very often has a solution beneficial to all, like closed-circuit television, large fonts, and magnifiers.
The social model is a frame of disability accepted by the disability community and UX designers. The disability in this context is brought about by society-organizing product designs rather than the ability or difference of individuals. Much like most products thus favor right-handed users relative to left-handers, designers also try to incorporate the use of products for underrepresented needs.
2. Which phase of the design sprint helps the team find solutions to build on?
- Understand
- Test
- Ideate (CORRECT)
- Decide
- Prototype
Correct: The phase between the Understand stage and the Ideate one is focused on coming up with good solutions and refining them, as it follows successfully starting the design sprint with the Understand phase. Therefore, this phase promotes team brainstorming and the building of ideas for creative and collaborative development of effective solutions.
3. What can a researcher learn when they properly empathize with users during user research?
- The hopes, dreams, and assumptions of their users
- The wants, desires, and fears of their users
- The needs, behaviors, and motivations of their users (CORRECT)
- The opinions, feelings, and biases of their users
Correct: When researchers empathize, they are able to grasp the users–at last fully understand their needs, motivations, and processes. Such insights really cast a shadow over the entire experience one might have when actual users are dealt with with respect to positive feelings and significance.
4. Which of the following are examples of pain points? Select all that apply.
- Completing the checkout process for a food delivery app
- Being asked to submit credit card information when no payment is required (CORRECT)
- Struggling to interact with a button on a mobile app’s homepage because it’s extremely small (CORRECT)
- Receiving the same response to three different questions from an automated chatbot (CORRECT)
This serves as a financial pain point example since the user is required to furnish confidential personal details with no justification.
This is a classic example of a product pain point, demonstrating a usability issue leading to user dissatisfaction.
This is a classic example of a support pain point, in which users are unable to find the answers required.
5. Which of the following statements about user personas is true?
- UX designers should avoid creating backstories for personas
- Personas are modeled after the characteristics of the UX designer.
- Personas can help identify patterns of behavior in users. (CORRECT)
- A persona is a real user who provides real reviews on a product.
Correct: A persona in user experience design is a fictitious representation of a user that denotes the goals and characteristics that encompass larger audience segments. It becomes handy in pointing out patterns of behavior and facilities that determine some of the shared pain points among users, aiding designers in providing better user-centered solutions.
6. Which of these user stories includes a type of user, an action, and a benefit?
- As a yoga instructor, I want to create a consistent class schedule so that my clients know how to confidently plan their weekly exercise. (CORRECT)
- As a scientist, I want access to my colleagues’ published research.
- I want a bookshelf so I have somewhere to store my book collection.
- As a chef, I want access to the freshest ingredients and the highest-quality cooking utensils.
Correct: It has all the components of a user story: a person type, an action, and a benefit. The full user story also makes sure that the problem is user-oriented, actionable, and easily defined, which makes it much easier to meet the user’s needs.
7. Fill in the blank: Designing products with accessibility and inclusivity in mind ensures that you _____.
- create an identical experience for all users
- include solutions that benefit specific individuals, which improves the user experience for all users. (CORRECT)
- create a different solution for every single user.
- focus on creating one solution for as many people as possible
Correct: While this answer addresses a specific user’s problem, it serves several other users of the product. A range of design solutions, targeted to diverse users, including those with disabilities or people from traditionally marginalized backgrounds, not only benefits the intended user but also improves usability for everyone.
8. Which of the following is a complete problem statement?
- Angelo needs a toolbox and shingles to fix the leak in their roof.
- Bella is a dance choreographer who needs to create a practice video because some of their students have school during the day and can’t attend lessons in person. (CORRECT)
- Hakim is an accountant who needs to collect expense reports from their coworkers.
- Akiko is a construction consultant who is building a skyscraper.
Correct: This is a complete statement on the user’s name, their features, the need of the individual, and the reason for the need.
9. Identify the steps of the ideation process in the correct order.
- Brainstorming, documenting ideas, focusing on quantity, gathering a diverse team, questioning obvious solutions, and evaluating the ideas. (CORRECT)
- Gathering a diverse team, brainstorming, documenting ideas, questioning obvious solutions, focusing on quantity, and evaluating the ideas.
- Documenting ideas, brainstorming, focusing on quantity, questioning obvious solutions, gathering a diverse team, and evaluating the ideas.
Correct: First, brainstorm all possible solutions, collect them to get a large pool of ideas, then convene a group of people to add perspective into what can be eliminated as obvious solutions. With the narrowed-down list of possibilities, go through and see which ones best meet your users’ needs. Then finally, this would give the wide scope of solutions before settling on the narrow-most effective ones.
10. You’re a UX designer working on a gaming app in a competitive market space. You want to figure out what your competitors’ strengths and weaknesses are, and how to create a better product. What should you do?
- Contact each company directly
- Conduct informal research online
- Create a marketing plan
- Conduct a competitive audit (CORRECT)
Correct: A competitive audit report assesses the positive and negative aspects of rival products. That would mean that finding out what they do have and what they do not have, hence giving you perhaps a better way to improve your product by filling gaps that competitors have not realized.
TEST YOUR KNOWLEDGE OF STORYBOARDS
1. What are the key elements of a storyboard? Select all that apply.
- Theme
- Plot (CORRECT)
- Scene (CORRECT)
- Narrative (CORRECT)
- Character (CORRECT)
A storyboard tells all about the advantages or possible solutions that a design can bring. Other essential elements of storyboard would include scene, character, and narrative.
The scene will help the designers imagine the user’s environment. Other important elements of a storyboard plot, character and narrative.
The storyboard narrative tells about the user’s problem and the solve of the design. Other important elements of the storyline include plot, scene and character.
The user in a storyboard is the character. Other key elements in a storyboard are plot, scene, and narrative.
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. (CORRECT)
Correct: That situation would require a macro storyboard, as it concerns how people will use the product along the day and underscores its broader value and usefulness as an item.
TEST YOUR KNOWLEDGE OF DESIGN FIDELITY
1. Fill in the blank: Wireframes establish the basic _____ of a page and serve as an outline of a digital experience.
- text
- images
- functional specifications
- structure (CORRECT)
Correct: A basic groundwork for a page is laid by wireframes. It gives the blueprint of the layout and functionality of a digital experience. A wireframe outlines the needed pages, serving as a guide to pave the way toward design.
2. Which of the design fidelity types would you use if you need to get ideas out quickly while leaving room open for exploration?
- Medium-fidelity design
- High-fidelity design
- Low-fidelity design (CORRECT)
Correct: Very elementary and less detailed in nature, low-fidelity designs permit very rapid sketching and conceptual development without concerning much with the aspects of refined visuals or functionality.
3. Identify characteristics of a low-fidelity (lo-fi) design. Select all that apply.
- Personas
- User journey maps
- Empathy maps
- User stories (CORRECT)
Correct: User stories prioritize and narrow down which user needs to target first in the early development of solutions. This ensures that the most important issues find their way into the design process as early as possible.
4. What is the goal of a storyboard?
- To write a unique problem statement
- To explain in a brief paragraph how a user interacts with a product
- To identify research goals and convey them in a visual format
- To visually describe and explore a user’s experience with a product (CORRECT)
Correct: Storyboard might be used as a means of visualizing possible solutions against the user’s problems-the visible link between the research insights and the entire flow of the user experience. Storyboarding can create a way to communicate more effectively, as well, in another sense-from ideas into reality of ideas for potential employers.
5. Big picture storyboards focus on the how and the why, while close-up storyboards focus on the _____.
- when
- what (CORRECT)
- who
- where
Correct: If the large-scale picture storyboard illustrates the general UX-in-the-what and why-above, closed-on-the-product bright blue picture storyboard on what’s and specific interactions.
6. What type of storyboard focuses on the user experience?
- Quick view
- Close-up
- Big picture (CORRECT)
- High-fidelity
Correct: A broad-stroke storyboard on the entire user experience would ask such questions as: How will the user engage with our dog walking application? Why will it be worthy of the use to the user? And in what ways will the app surprise and delight the user in their experience?
7. What is a characteristic of a good wireframe?
- Good wireframes are organized and communicate information clearly. (CORRECT)
- Good wireframes require advanced technical skills.
- Good wireframes require extensive design experience.
- Good wireframes are based on the designer’s ability to write.
Correct: Good wireframes do not require advanced drawing skills. They are all about organizing and communicating information clearly to the team implementing the design.
8. What are some benefits of creating wireframes? Select all that apply.
- Wireframes allow designers to iterate slowly to allow for more ideas throughout the process.
- Wireframes inform the color and text so stakeholders can see the layout of the design.
- Wireframes get stakeholders to focus on structure so they can make decisions on it early. (CORRECT)
- Wireframes can help designers catch problems early. (CORRECT)
Stakeholders are not held back by the minor details because wireframes include simple lines and shapes. They can help stakeholders rapidly make decisions regarding the structure and help designers identify potential issues as early as possible.
Wireframes are used not only by designers to point out what elements need to be moved around, rearranged, and integrated, but also by stakeholders to concentrate on just the structure of the design, which allows them to make early decisions about the design’s construction.
9. You advise your client that your next step is to create a user flow for the app you are creating for them. The client asks what is included in the user flow. What do you tell them?
- Shapes that represent interactions (CORRECT)
- Polished content
- Navigation with active buttons
- Sample images and icons
10. 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. (CORRECT)
- They represent an action and are steps that users take to complete a task from start to finish.
- They represent a connection between screens and show users’ progress forward or backwards through the app.
- They represent a decision point and show where users should ask a question or make a decision.
11. You are at the point in the design process where you have identified the problem to solve. You have brainstormed potential solutions. Now, you would like to visualize the potential solutions. Which tool would you use to do this?
- A sketch
- A storyboard (CORRECT)
- A wireframe
- A prototype
12. You have transitioned your big picture storyboard into a close-up storyboard. What questions might you ask yourself to re-focus the storyboard into a close-up version? Select all that apply.
- How will potential stakeholders react to the app?
- Why will the app be useful?
- What happens on each screen of the app? (CORRECT)
- What do users have to do to transition from one screen to the next? (CORRECT)
13. 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 (CORRECT)
- They establish the basic structure of a page. (CORRECT)
- They help establish clear functionality. (CORRECT)
14. You tell your stakeholder that the next deliverable will be wireframes for the app you are designing for them. They are unsure of what you mean by wireframes. How would you explain what a wireframe is?
- An interactive prototype through which users can click around and see how the buttons work
- A drawing that includes basic elements that represent parts of the design (CORRECT)
- A detailed drawing that includes colors, content, and imagery
- A prototype of the app that is used to gather user feedback
15. 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 serve as an early guide for the team so fewer revisions are required later on in the process. (CORRECT)
- 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.
16. At what point in the design process should you create a close-up storyboard?
- The middle to end of the design process (CORRECT)
- After the usability study is complete
- The beginning of the design process
- Before the big-picture storyboard
17. Your client is asking for a high-fidelity design. You know you are not yet there in the design process. What can you tell them about when high-fidelity designs will occur in the process?
- A high-fidelity design begins after the storyboarding phase and iterates until the very end of the project.
- A high-fidelity design comes right after the brainstorm session.
- A high-fidelity design will come after the wireframes are approved.
- A high-fidelity design happens at the very end of the design process and allows users to test the design. (CORRECT)
18. 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?
- Narrative
- Plot
- Scene
- Scenario (CORRECT)
19. You have presented your storyboard for your app to the client. You outline the components used in the storyboard—character, scene, plot, and narrative. What part does the narrative play in a storyboard?
- It describes the benefit or solution of the design.
- It describes the user’s environment and how they will use the app.
- It describes the user’s need or problem and how the design will solve the problem. (CORRECT)
- It describes the users and the information you gained from the empathy interviews.
20. A colleague tells you they have prepared a low-fidelity design. What does this mean?
- The design is more polished but has lower complexity.
- The design is less polished but has higher complexity. (CORRECT)
- The design is more polished and has higher complexity.
- The design is less polished and has lower complexity.
21. You tell your stakeholder that the next deliverable will be wireframes for the app you are designing for them. They are unsure of what you mean by wireframes. How would you explain what a wireframe is?
- An interactive prototype through which users can click around and see how the buttons work
- A prototype of the app that is used to gather user feedback
- A drawing that includes basic elements that represent parts of the design (CORRECT)
- A detailed drawing that includes colors, content, and imagery
22. You are mentoring a UX design student, and they ask why wireframes are important. What is one benefit of wireframing?
- Gives end users a way to test the product
- Provides a solid path for navigation
- Provides a quick prototype for stakeholders to look at
- Allows for fast and frequent design iteration (CORRECT)
23. You tell your client the design process is moving along nicely and you are ready to storyboard. The client asks you to skip this step to decrease the project timeline. What can you tell your client about how they can benefit from a storyboard?
- They can review all of the content that will be included in the final design.
- They can see the visual connection between the research stage and flow of the experience, in addition to viewing solutions to potential problems the user might encounter. (CORRECT)
- They can see the finished designs in full color.
- They can see the iterations of the design to this point and clearly see the progress.
24. In the user flow you are creating, you have used shapes including circles, rectangles, diamonds, and lines to convey interactions. Which shape indicates decisions points users make that moves them forward or backward through the user flow?
- Diamond (CORRECT)
- Line
- Rectangle
- Circle
25. You are in the early stages of writing a storyboard for your app to share with stakeholders in an upcoming meeting. You want to introduce the app’s idea at a high-level to stakeholders and get them excited about what you’re creating. Your storyboard focuses on the user experience, how the app will be used, and why the app will be useful. Which type of storyboard addresses this focus?
- Close-up
- Instructional
- Big picture (CORRECT)
- Strategic
26. You want to get a design idea out quickly so your stakeholders can review it and provide high-level feedback. What design medium would you use?
- Prototype
- Portfolio
- High-fidelity wireframes
- Low-fidelity wireframes (CORRECT)
27. You are beginning wireframing for your app and want to follow the industry standards to indicate page elements. What are some industry standards that you may use? Select all that apply.
- Use stars to convey buttons.
- Use circles or rectangles to represent calls to action. (CORRECT)
- Use a circle with an X overlapping it to represent an image or icon. (CORRECT)
- Use horizontal lines to represent text. (CORRECT)
28. You are beginning your big-picture storyboard for the app you are designing. What is the purpose of a plot in the storyboard context?
- It describes the solution that the design provides. (CORRECT)
- It describes the problem and how the design will solve the problem.
- It identifies the user.
- It describes the user environment.
29. You are writing a big-picture storyboard. At this point, you have established the user. Now you need to identify the users’ environment. What is this called?
- Plot
- Scene (CORRECT)
- Situation
- Narrative
30. A stakeholder asks you what the point is of spending time on wireframes. What can you tell them about the benefits of wireframing? Select all that apply.
- Wireframes provide a glimpse of the finished product.
- Wireframes map out how the elements will look on each page. (CORRECT)
- Wireframes can save time and effort. (CORRECT)
- Wireframes help catch issues early. (CORRECT)
31. 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.
- Build out a quick prototype to a rough version of the interaction.
- Add additional panels to the storyboard.
- Add captions. (CORRECT)
32. When you are creating the user flow for your app, what should you reference to ensure your designs will address the users’ needs?
- The goal statement
- The design specifications
- The problem statement (CORRECT)
- The statement of work
33. 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
- Sitemap
- Wireframes
- User flow map (CORRECT)
34. You are ready to design the user flow map for your app. What do you need to know before you can design the user flow? Select all that apply.
- The technology aptitude of the users
- The wireframes the users will experience in the app when they make a decision or perform an action (CORRECT)
- The actions the user will take in the app (CORRECT)
- The decisions the users will make in the app (CORRECT)
35. 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 user flow
- The goal statement (CORRECT)
- The scenario (CORRECT)
- The problem statement (CORRECT)
36. 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 text and images
- Basic shapes and lines to convey the new ideas (CORRECT)
- The hamburger menu listings
- The colors and typography as identified from the brand guidelines
37. Your client is unsure of the design process and would like to know when you would use low-fidelity designs. What would you tell them?
- When you want to get ideas out quickly (CORRECT)
- When you want to finalize the navigation
- When you want to identify the pain points users experience
- When you want to give the development team a look at the navigation menu
38. 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?
- Why will the app be useful? (CORRECT)
- Why will the user be delighted by the app? (CORRECT)
- How will the user use the app? (CORRECT)
Storyboarding and Wireframing CONCLUSION
From understanding the fundamentals of wireframing, it is time to indulge yourself. Wireframing is an essential skill for a designer, and it can be mastered with help from Coursera. The Google UX Design Professional Certificate Program on Coursera features an exhaustive introduction to storyboarding and wireframing.
This week, you learned how research can inform ideation in the design process and how to create two different types of storyboards: big-picture and close-up. Are you ready for the next step? Join Coursera today to start learning how to build wireframes that really address your user needs!