How to Create Big Picture and Close-up Storyboard

An empathy map is an easily understood chart that explains everything designers have learned about a type of user.

• Focus on four main motivations of users: what the user says, thinks, does, and feels.
• Tap into our users’ minds and hearts to help us understand their thoughts and feelings in a given situation. 

Personas are fictional users whose goals and characteristics represent the needs of a larger group of users. Place the users who you’re designing for front-and-centre. By creating detailed user profiles, you can clearly envision potential users that you’d design for.

A user story is a fictional one-sentence story told from a persona’s point of view to inspire and inform design decisions. It introduces the user, lays out an obstacle, and states our ultimate goal.

• The user story expands on the persona and deepens your understanding of a user group.
• Inspire empathetic design decisions by making our approach user-centred
• If you have a lot of users needs to consider, user stories determine which ones are the most critical to resolve. This can help narrow down which user needs to focus on when coming up with ideas for solutions. 

A user journey is the series of experiences a user has as they interact with your product.

• User journeys build off the personas and user stories you’ve already created.
• Help you come up with ideas for designs that truly support the user’s needs and reduce their problems, or what we also like to call “pain points.” 

Together, empathy maps, personas, user stories, and user journey maps help us create a problem statement or a clear description of a user’s needs that our design should address.

• A problem statement includes a fictional user’s name, characteristics, needs, and key insight gained from your research.

A goal statement is one or two sentences that describe the product and its benefits for the user. 

• Provides the ideal solution for the design.
• The problem is defined in the problem statement and the solution is listed in the goal statement.
• Goal statements cover who the product will serve, what the product will do, and why the product solves the user’s needs.

A goal statement describes the product and its benefits for the user in one or two sentences. It’s usually based on the problem statement and should describe a specific action, define who the action will affect, state the positive impact of the action, and outline measurable terms of success.

You can find who is using the information from your persona. The user story can provide the what. And the empathy map and user journey maps will help you answer the why. You may also use the information provided solely in the problem scenario.

A strong goal statement:

• Describes a specific action users can take or what the product will do.
• Defines who the action will affect.
• States the positive impact of the action or why the product solves the user’s need.
• Outlines success in measurable terms.

Goal statement template

Our [product] will let users [perform specific actions] which will affect [describe who the action will affect] by [describe how the action will positively affect them]. We will measure effectiveness by [describe how you will measure the impact].

Goal statement formula

• Start with your product. This could be an app, an object, or anything else. 
• Describe the specific action your product enables users to perform. 
• Describe who the action will primarily affect. This could be the user themselves.
• Describe how the action will positively affect that person.
• Describe how you’ll measure the action’s effectiveness.

A user flow is a path taken by a typical user on an app or a website, so they can complete a task from start to finish.

• Help to picture how users will move through the app or website. You need to determine:
  • What actions will users take in the app?
  • What decisions will users make?
  • What screens will users experience after taking action or making a decision?
• UX designers often outline user flows with common shapes: circles, rectangles, diamonds, and lines with arrows. Each shape represents an interaction the user will have with the product you’re designing. Assigning a different shape to each interaction makes the user flow clear to anyone on the team involved in creating the product.
  • Action: The actions users take when moving through a product design are represented as circles. In other words, circles show steps that must be taken to complete a task from start to finish. 
  • Screen: The screens of a digital product that users will experience while completing tasks are represented as rectangles. Like a homepage or a confirmation page, that users will experience while completing tasks. 
  • Decision: Diamonds represent points in the user flow where users must ask a question and make a decision. The decision users make will either move them forward through the flow or back to an earlier part of the flow.
  • User flow direction: Lines with arrows tie everything together and display the flow of information. Solid lines indicate forward direction through the user flow, and the dotted lines indicate backward direction or returning to a previous page.
• You have to consider the entire journey that users take in order to get what they need from the product. 
• User flow could change based on the needs of users and their circumstances. If your problem statement changes, the user flow will probably need to change too
• Ensure that the user flow you create focuses on the needs that the majority of users will face. 

A user journey map focuses on the end-to-end use case for one specific user type and one specific use case. 

Storyboards are a visual representation of the way that a user interacts with one or multiple areas of your product.

A user flow describes what users see and how they interact with a product as they reach their goal. User flows illustrate all the different paths that users can take to reach their goals.

The user flow demonstrates the steps that users take to get from the entry point to task completion.

• Decide user task: Before you create a user flow diagram, you need to decide which user task to map. Choose a task that is important to the app you’re designing. You can use the goal statement that you developed.
• Outline user flow steps: With the user goal in mind, list the steps for the user flow. 
  • Start with the entry point, which is the place where users initially access your product. 
  • Next, list each step the user would take until they reach task completion. Task completion happens when users successfully complete their goals. 
• Diagram the user flow: use the appropriate shape to indicate whether users are completing an action (circle), landing on a screen (rectangle), or making a decision (diamond), and connect each shape with arrows. 
  • Focus on mapping the quickest and easiest way to get from the entry point to task completion. 

A storyboard is a series of panels or frames that visually describe and explore a user’s experience with a product. Storyboarding is a tool for making a strong visual connection between the insights you uncovered during research and the flow of experience.

• Should focus on just the most important parts of the user’s experience with a product.
• The four key elements of a storyboard are the character, the scene, the plot, and the narrative.
  1. Plot:  describes the benefit or solution of the design.
  2. Narrative: describes the user’s need or problem and the design will solve the problem.
  3. Scene: helps a UX designer imagine the user’s environment.
  4. Character: describes the user in the story.
• The scenario is a short sentence that helps us understand the user and their problem we’re solving. 
• The visuals guide us through the user’s experience with the app or service. This is where you’ll actually sketch.
• The captions combine the visuals and scenario by describing how the user interacts with the product. Basically, it’s the text that describes each frame of the story. The captions are useful for interactions that may be difficult to sketch out.

Two types of storyboards are called big picture and close-up.

A big-picture storyboard focuses on the user experience.

• Think about how people will use the product throughout their day and why that product will be useful.
• Helps you understand the entire user experience, including the different challenges, potential pain points, and types of interactions the user will encounter.
• Show the emotional engagement that a user will have with our app or with any product.
• Focus on the how and the why: 
  • How will the user use our app? 
  • Why will the app be useful? 
  • And why will the user be delighted by the app?
• Focus on what the user needs, their context, and why the product will be useful to the user. Big picture storyboards are often used early in the design process when designers are trying to get stakeholders to support their ideas.

In a close-up storyboard, the sketches in each panel focus on the product instead of on the user experiencing that product.

• Focus on the what
• What happens on each screen of the product? What does the user do to transition from one screen to another? And after you’ve created the storyboard, what are potential problems with the flow? What are some assumptions we are making about this experience? What are some potentially complicated interactions or pain points that will need to be addressed?
• It is less about emotion since we’re not focused on the user. Instead, it is focused on the practicalities of the design itself.
• Concentrate on the product and how it works. They’re best used in the middle to the end of the design process.

How to decide which type of storyboard to use? think about this stage of the design process you’re in. 

• If you’re early in the design process, you might want to present your high-level ideas to stakeholders to get them excited and bought in. In this case, a big-picture storyboard makes sense. So your team can focus on the user, their needs, and their experience with your product.
• A close-up storyboard is more useful after your initial design directions have been explored. A close-up storyboard focuses on the details within your product, like screens of an app, this type of storyboard can help you think through practical ideas about improving the product.

As UX designers, it’s good to have a flexible and creative approach to explaining your ideas

Big picture storyboards and close-up storyboards differ in step five when you draw each panel. Remember, big picture storyboards focus on the user, while close-up storyboards focus on the product.

Create a big picture storyboard

1. 1. Start with a problem statement. This will help establish character and set the scene for your storyboard.
   2. Create a goal statement. Your goal statement helps you determine a plot (the benefit or solution of your design) for your storyboard.
   3. Set up the storyboard. 
   4. Add the storyboard scenario. write a sentence that sets the narrative for the storyboard. Thinking back to the problem from the problem statement and the solution from the goal statement, write a short, clear sentence that describes the user and the problem your design solves for them. Consider the end result that will solve the user’s problem.
   5. Draw one idea per panel. The first panel is used to set the scene for the story. Then with each additional panel, think about actions that push the story forward and how the user feels in each panel. Remember that big picture storyboards focus on the user experience. The storyboard should show how people use your product and why your product will be helpful to them. Because big picture storyboards are about the user, it’s important to include emotion by using a sad or happy face, for example, at different steps of the journey to make the storyboard feel human and relatable.
   6. Expose pain points for the user along their journey.
   7. Include the user goal or conclusion in the final panel.

Create a close-up storyboard

1. Start with a problem statement. 
2. Create a goal statement. 
3. Set up the storyboard.
4. Add the storyboard scenario.
5. Draw one idea per panel. think about which product details you want to draw attention to on each panel and why. You want to demonstrate the user flow within the product and how each action within the product will lead to the next screen.
   • Oftentimes when designing an app, one panel of a close-up storyboard will focus on how a user begins their journey when they first open the app.

A big picture storyboard should meet the following guidelines:

• Sketches should focus on the user.
• Sketches should indicate the environment or context where the user is located.
• Sketches should focus on the specific need or pain point experienced by the user.

A close-up storyboard should meet the following guidelines:

• Sketches should focus on the product instead of on the user experiencing that product.
• Sketches should indicate the interaction that a user may have with the product by depicting sample screens.
• Sketches should indicate any transitions between screens or states that the user may need to perform.

A design solves a real problem that users are experiencing. And a strong design always puts the user front and centre.

In UX, fidelity means how closely a design matches the look and feel of the final product.

Low fidelity design

• Has a lower amount of complexity and is less refined or polished
• Call low-fidelity designs lo-fi for short
• When we want to get ideas out quickly and leave room for exploration.

High fidelity design 

• Means it closely matches the look-and-feel of the final product and is more refined or polished overall.
• Call high-fidelity designs hi-fi for short.
• When we want to test a design that looks like a real product and get more specific feedback from users.