Week 1: Storyboarding and Wireframing
Storyboarding and Wireframing INTRODUCTION
Wireframing is an essential element in the entire UX design process, and Coursera’s Google UX Design Professional Certificate Program offers a solid introduction to what this skill involves. Storyboarding helps organize those interface component parts and makes the wireframe effective. In this course, you’ll learn to derive your ideas from research into storyboarding and two storyboards: big picture and close-up.
You’ll also learn to draw your very first wireframes and refine site conceptions into real user needs. You will be able to understand the advantages offered by wireframing and how much better you can design a solution that your users will find satisfying.
Learning Objectives:
- Formulate a objectives statement for your design project.
- Map out the steps a user would take to outline user flow.
- Draw up big picture and close-up storyboards to understand each’s purpose.
- Explain low-fidelity versus high-fidelity designs.
- Differentiate the role of wireframing in design process. Learn the essentials of drawing to make your wireframes.
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)
It is accessibility in design, particularly in equity-focused design, that takes into consideration the whole product approach so that it can really be accessed and has equal fairness to people of different gender, race, and ability, especially among historically underrepresented groups.
Correct: Access in design is something that will benefit practically everyone, irrespective of having a disability or not. For instance, a person with a temporary disability or situational ones and those without any permanent disabilities can benefit from a product designed here. For example, closed captioning, zoom-in text, and magnification tools created by organizations are examples of product usage to make the experience better for all kinds of users.
Correct: It is widely understood in both the community of people with disabilities as well as UX designers that, according to the social model of disability, disability occurs when society organizes itself or products are designed in a particular way rather than by an individual’s ability or difference. Just like many things are designed for right-handed people, and not so many for left-handed ones, the design would have taken into account how the product could be used in a different perspective to benefit the very underrepresented groups.
2. Which phase of the design sprint helps the team find solutions to build on?
- Understand
- Test
- Ideate (CORRECT)
- Decide
- Prototype
Correct: As the team sets itself to explore possible solutions, having established the build-up from the Understand phase, the Ideate phase starts-off with the imagining of possible solutions and brainstorming towards developing creative solutions that are then to be further developed.
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: To understand how much of an insight user needs, wants, and issues they face in finding solutions, researchers have to empathize with users. This knowledge is critical for building the effective and positive user experience.
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)
Alteration: An example of a financial pain point is when the user is compelled to offer sensitive personal information without valid cause.
Alteration: This is an illustration of a product pain point because this is a usability issue and it hinders the user.
It seems like Your last sentence got cut short. Shall I complete that thought?
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: The concept of personas in UX design is fictitious representation of a population that considers the needs, behavior, and characteristics of a larger set of users. Through this understanding, designers can create empathy for a deeper understanding of the user needs. In examining the patterns of the personas, some shared pain points that might exist in the user behavior might be inferred, leading to the addressing of such design solutions effectively.
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: Well, as a user, I can schedule upcoming appointments with a doctor, and this is going to help me ensure that I don’t forget appointments and that it’s easier to plan my time with them. A user story has a type of user, an action, and a benefit, and when put together, it’s an entire user story. A complete user story keeps the problem user-centered, actionable, and clear.
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: This approach focuses on a problem the user is facing, but it is also valuable for other users of the product. It presents multiple designs that fit different needs, such as those of users with disabilities or those from historically underprivileged contexts and integrates such considerations so that a solution could improve the experience of yet another intended user as well as many other people, improving the overall accessibility and inclusivity of the design.
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: There, the user has been defined in terms of name, characteristics, need, and reason as to why that need exists, which is a very clear picture of understanding the user’s context in guiding further design processes.
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: It’s best to brainstorm a whole bunch of possible solutions and then write them down to develop a relatively well-filled pool of options. With a diverse team, you are able to come up with very different perspectives, while filtering out the less effective solutions. Then you can evaluate and narrow down to the best ideas according to what is best from your users’ needs. In this way, you would ensure that a lot of solutions are considered before settling upon the most suitable ones within this ideation phase.
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 comparative audit is a report that shows how different organizations do better with their products and where some fall short. These strengths and weaknesses combined show you what to do to improve your own product such that it fills gaps or needs not addressed by your competitors.
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)
Correct: Besides the plot, which describes how a storyboard illustrates the benefit or solution of the design, the other key elements include scene, character, and narrative.
Correct: The scene in a storyboard allows designers to think through the user’s environment. Other key elements of a storyboard include plot, character, and narrative.
Correct: The narrative of the storyboard describes the user’s issue and how the design will sort it. Other key elements of a storyboard include plot, scene, and character.
Correct: The user in a storyboard is that character. The other key elements of 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: This case is best represented by a big picture storyboard, since it deals with the actual use of the product during the day and reflects the wider context in which the product will become useful in everyday life.
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: Wireframes, based on the skeletal diagram of a page, provide a basic structure for a page. They represent the layout, navigation, and other key elements without the details of design such as color or images.
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: Design basis mainly low fidelity. These quite no hassle draw up and iteration of an idea without worrying excessive level of detail. That helps in visualizing ideas in terms of layout, structure, and function.
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 will help focus and prioritise the user needs that will be addressed first when developing early solutions. They ensure that the team works on important features that will deliver value to the user by providing clear and actionable focus.
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: By mapping out user journeys, storyboarding is an essential visualisation tool in generating possible solutions for user problems. It reinforces research findings with user experience flows and enables much clearer communicating of ideas and solutions with stakeholders. It adds a clear narrative structure in demonstrating how design can address specific problems or needs.
5. Big picture storyboards focus on the how and the why, while close-up storyboards focus on the _____.
- when
- what (CORRECT)
- who
- where
Correct: On the user experience, big picture storyboards mainly involve their how and why with regards to the interactions while close-up storyboards are for zooming primarily on the product as such, what it is-the exact features and functions, and the details of the product that will respond to the user needs.
6. What type of storyboard focuses on the user experience?
- Quick view
- Close-up
- Big picture (CORRECT)
- High-fidelity
Correct: A macro-vision storyboard will address large user experience questions such as: How will the user interact with the dog walking application? In what ways is the application of value to the user? What aspects of the application would delight and engage the user? It is this visualization that tells the greater overall journey and emotional experience that the user will have with the product.
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: They represent the layout and structure of a page or a product but do not need great drawing skill for the purposes of organizing and communicating information in clear design. Wireframes allow the development team to focus on the important aspects of the flow without getting distracted by pretty graphics.
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)
True: Wireframes are basic prototypes to keep stakeholders focused on layout and structure as well as keep them from worrying about the littler details. This ultimately allows for quicker decision making and early detection of possible issues by the designer.
True: Using wireframes allows designers to pinpoint disorganized or missing elements of a project prior to the final design take shape. It also provides stakeholders with the ability to take an overall view of the structure, enabling informed decisions to be made early.
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
Fantastic! It sounds as if you are ready to really immerse yourself in wireframing and UX design. The Google UX Design Professional Certificate Program on Coursera actually builds a very strong foundation for learning what it takes to design a user-centered product. As you have learned, wireframing and storyboarding are key steps in the overall process of transforming ideas into effective, usable designs.
Therefore, from researching insights into storyboarding techniques, you’re already moving along well toward building designs that solve actual user problems. Go ahead, and take the next step in your design journey and sharpen your skills in wireframing, and then some, today with Coursera!