Big Picture Questions
How will the user use our product?
Why will the product be useful?
Why will the user be delighted by the product?
Storyboard Types
Two Types of Storyboards
Section titled “Two Types of Storyboards”Understanding Storyboard Types
Section titled “Understanding Storyboard Types”There are two distinct types of storyboards used in UX design, each serving different purposes and focusing on different aspects of the user experience. Like movie storyboards that show how each scene will play out, UX storyboards show how each part of the user journey unfolds.
Big Picture Storyboards
Section titled “Big Picture Storyboards”Big picture storyboards focus on the user experience and think about how people will use the product throughout their day and why that product will be useful.
Purpose and Focus
Section titled “Purpose and Focus”- User-centered: Focus on the user experiencing the product
- Contextual understanding: Help you understand the entire user experience
- Problem identification: Show different challenges, potential pain points, and types of interactions
When to Use Big Picture Storyboards
Section titled “When to Use Big Picture Storyboards”- Early in the design process when presenting high-level ideas to stakeholders
- When you want to get stakeholders excited and bought into your concept
- To focus the team on the user, their needs, and their experience with your product
- To show emotional engagement and demonstrate why users will be delighted
Big Picture Example: Dog Walking App
Section titled “Big Picture Example: Dog Walking App”Problem Statement: Drew is a pet owner in a small town who needs to find and schedule a dog walker because they work the night shift.
Goal Statement: Help users with pets find and schedule dog walkers easily and quickly.
Storyboard Flow:
- User leaves house in evening for work as a nurse, dog looks sad being left alone
- User drives to work thinking about their dog at home, realizing they forgot the daily walk
- User on break at work grabs phone and opens the dog walking app
- App shows faces of local dog walkers eager to meet user’s dog, user feels relieved
- User selects time and schedules regular visits, clicks confirm button
- User returns to work smiling, happy knowing their dog will be well cared for
Close-Up Storyboards
Section titled “Close-Up Storyboards”Close-up storyboards focus on the product and how it works. The sketches in each panel concentrate on the product instead of on the user experiencing that product.
Purpose and Focus
Section titled “Purpose and Focus”- Product-centered: Focus on the functionality and interface details
- Interaction details: Show what happens on each screen and how users transition between screens
- Problem identification: Help identify potential problems with the flow and usability issues
When to Use Close-Up Storyboards
Section titled “When to Use Close-Up Storyboards”- After initial design directions have been explored
- When you need to think through practical ideas about improving the product
- To demonstrate the user flow within the product
- To show how each action within the product leads to the next screen
Close-Up Questions
What happens on each screen of the product?
What does the user do to transition from one screen to another?
What are potential problems with the flow?
Close-Up Example: Dog Walking App
Section titled “Close-Up Example: Dog Walking App”Same Problem and Goal Statements as Above
Storyboard Flow:
- User taps the dog walking app icon on their phone’s home screen to open it
- User enters email address and password to log into the app
- User navigates to settings page to share their home location for dog walker visits
- User returns to homepage and taps clock icon to select time for dog walker visit
- User taps calendar icon to schedule dog walker on regular basis
- User presses confirm button to finish scheduling the dog walker
Key Differences from Big Picture
Section titled “Key Differences from Big Picture”- Less about emotion: Not focused on how the user feels
- More about practicalities: Focused on the design functionality itself
- Screen-specific: Shows specific interactions within the app interface
Combining Both Approaches
Section titled “Combining Both Approaches”In many cases, you might want to create both types of storyboards for a comprehensive understanding of your product. There are also ways to bring both types together:
Flexible Approach
Section titled “Flexible Approach”- You can change focus from user to specific interactions within the same storyboard
- Adapt your approach based on what you need to communicate
- Use both styles to get a complete picture of the user experience
Creative Implementation
Section titled “Creative Implementation”As UX designers, having a flexible and creative approach to explaining your ideas is valuable. Experiment with both styles and find what works best for your specific project and audience.
Decision Framework
Section titled “Decision Framework”Choose your storyboard type based on:
Stage of Design Process:
- Early stage → Big picture storyboards
- Later stage → Close-up storyboards
Audience Needs:
- Stakeholder buy-in → Big picture storyboards
- Technical planning → Close-up storyboards
Project Goals:
- Vision alignment → Big picture storyboards
- Implementation planning → Close-up storyboards
Both types of storyboards are valuable tools that serve different purposes in the design process. Understanding when and how to use each type will make you a more effective UX designer.