Storyboards in user experience design (UX design) are visual representations of a user's journey through a product or service. These sequences of images outline the user's actions, thoughts and emotions at each stage. Designers use storyboards to understand user experiences, identify pain points and design solutions that enhance usability, satisfaction and more.
An example of a UX Storyboard, in this case to invite a user.
© Interaction Design Foundation, CC BY-SA 4.0
When designers use storyboards, they create a tangible and visual representation of target user interactions. This not only aids in the design and development process. It also ensures that teams keep user needs at the forefront of product development. Storyboards have served the film industry since the early days of cinema. However, they’re also highly effective tools in UX design because of how they:
Storyboards allow designers to anticipate how users will interact with a product over time. When designers visualize these interactions, they can identify potential issues and user needs early in the design process.
These visual tools play a critical role as they communicate the user's journey to team members and stakeholders who may not be familiar with the intricacies of UX design. This makes it easier to align the team’s vision and understand the user's perspective.
Storyboarding is not just about prediction; it’s also a method for ideation. It provides a creative framework for brainstorming new solutions to user problems for design and development teams. Teams can rapidly modify storyboards to reflect changes in the design approach.
While storyboards provide a narrative visual representation, teams often use them in conjunction with other UX tools like user journey maps. Storyboards add a visual layer to the textual information in journey maps. They enrich the overall understanding of the user experience and help guide design decisions.
Watch as CEO of Experience Dynamics, Frank Spillers explains how to journey map for a service design:
© Interaction Design Foundation, CC BY-SA 4.0
Each storyboard begins with a scenario that outlines the context and the problem the user faces. This scenario often has a persona or a specific role as the basis. This helps teams to tailor the design to meet user needs and expectations.
The visuals are a series of drawings, sketches or images that depict each step of the user's interaction with the product. These visuals serve as a graphical representation of the user's journey. They illustrate actions, environments and potential obstacles.
Captions accompany each visual. They provide a textual description of what’s happening in the scene. They explain the user’s actions, emotional states, environmental conditions and interactions with the device. Captions are crucial as they add depth and understanding to the visuals. They make the storyboard a comprehensive tool to capture how users feel, act and more throughout a sequence.
© Interaction Design Foundation, CC BY-SA 4.0
A storyboard is an effective tool at any stage in a design process. For example, early on, it can offer the big-picture perspective when design teams want to win support from stakeholders. A close-up storyboard in UX design is a powerful tool for a design team later on, where they can examine the practicalities of the user flow in fine detail. In any case, here are the main uses of storyboards:
UX designers leverage storyboards primarily during the initial stages of the design process. After designers conduct user research, storyboards help to visualize the information gathered. They also help set the stage to define problems and ideate potential solutions. This visual representation lets designers prioritize user needs and facilitate collaborative brainstorming sessions.
UX Strategist and Consultant, William Hudson explains the importance of user research:
During the design phase, storyboards continue to play a crucial role. They guide product decisions and illustrate how users might interact with a product or service. They help map out the user journey, showing each step a user takes. This is essential for teams to empathize with the user and ensure a user-centered design approach. This step-by-step visualization also helps communicate the design to stakeholders and team members. This ensures alignment and understanding across the board.
See why empathy is a vital ingredient in design:
Storyboards are also instrumental during usability testing and feedback sessions. As they pre-visualize a sequence of interactions, they allow designers and product managers to test and validate ideas with users, gather feedback and make necessary adjustments. This iterative process is crucial to refine the user experience and enhance the product’s usability.
© Interaction Design Foundation, CC BY-SA 4.0
Storyboarding in UX design offers a myriad of benefits that significantly enhance the design process, making it more efficient, user-centered and communicative. Namely, storyboards:
Storyboarding serves as a powerful communication tool that bridges the gap between designers, stakeholders and team members. It provides a visual narrative that helps all parties involved clearly understand the user journey and the design intentions. This clarity is crucial to ensure that everyone is on the same page. It therefore facilitates more informed decision-making and reduces misinterpretations.
Visual simplicity: Storyboards convey complex user interactions through simple visuals. They make it easier for people from non-technical backgrounds to grasp the concepts quickly.
Unified vision: As storyboards present a visual story, they help align the team’s vision. This ensures that all members understand the product's direction and user interactions.
At the heart of UX design is the ability to empathize with users. Storyboards excel in fostering this empathetic understanding. When designers visualize the user's journey, they can better grasp the user's needs, emotions and challenges. That way, they can design more effective and tailored user experiences.
User perspective: Storyboarding encourages designers to think from the user’s perspective. This promotes a user-centric approach throughout the UX design workflow.
Emotional connection: Visual stories help designers and stakeholders connect emotionally with the user scenario. This enhances the design’s effectiveness in solving real user problems.
One of the strategic advantages of storyboarding is its ability to identify potential design issues at an early stage. This proactive approach not only saves time for product teams. It also significantly cuts down on the costs associated with making changes at later stages of the product development cycle.
Problem detection: As storyboards map out the user journey, they can highlight usability issues, gaps in the user experience or bottlenecks that might not be evident in textual descriptions alone.
Iterative refinement: The visual and editable nature of storyboards makes it easy to iterate on designs, allowing teams to quickly address and refine user issues as they arise.
Images tell a story in a more profound way than words can, especially when people who aren’t visual designers see them. Pictures in storyboards build a stronger connection with team members in this way. They help them feel empathy for the users in the scenarios that they show. Team members can also remember images more easily, which helps them build towards more user-centric design solutions.
Storyboarding promotes an environment of collaboration and creativity among design teams. Storyboards keep the ideas that teams need to consider visible. When pictures that are easy to relate to are out in the open, it encourages the sharing of ideas and facilitates iterative feedback. This is essential for teams to refine and perfect the user experience.
When teams integrate storyboarding into their UX design process, such as design thinking, they can leverage these benefits to create more engaging, user-friendly and successful products. The visual, communicative and collaborative nature of storyboards makes them an indispensable tool.
This UX storyboard example is for a seed catalog: a “big picture” storyboard (left) shows a user (“Bill”) in a setting and focuses on emotion and motivation; a “close up” storyboard (right) shows the actual interactions with the app screens.
© Rachel Lang, Fair Use
Several digital tools are available to help designers create effective storyboards in UX design. These tools offer features that cater to the specific needs of UX professionals, such as UX design storyboard templates. This makes the process more efficient and accessible:
Miro: With its collaborative whiteboarding capabilities, Miro allows teams to create and share storyboards in a highly interactive environment.
For example, Miro offers a storyboard template.
© Miro, Fair Use
Canva: With a user-friendly interface, Canva provides templates and design elements that make it easy to craft visually appealing storyboards.
© Canva, Fair Use
Figma: Figma stands out for its integration capabilities, which allows designers to create and iterate on storyboards within the context of their overall design workflow.
© Figma, Fair Use
Storyboard That: This tool facilitates quick storyboard creation, and offers customizable scenes and characters to streamline the design process.
© Storyboard That, Fair Use
Boords: Boords is specifically for storyboarding, featuring tools for scripting, storyboarding, and sharing, all within one platform.
© Luke Leighfield, Fair Use
© Interaction Design Foundation, CC BY-SA 4.0
Here is a suggested step-by-step guide to create storyboards:
Clearly define the purpose of the storyboard within the project's scope.
Collect relevant data through UX research methods like user interviews, field research or other reliable sources to ensure the storyboard has a grounding in real user experiences.
Decide whether to use a low-fidelity storyboard for quick internal discussions or a high-fidelity storyboard for presenting to stakeholders outside the design team. Low-fidelity storyboards focus on quick sketches that convey ideas. Meanwhile, high-fidelity storyboards include detailed scenes for deeper engagement.
Establish the main character (user persona) and specific scenario that the storyboard will address. This step crucially sets the context for the user interactions that the storyboard will depict.
Author and Human-Computer Interaction Expert, Professor Alan Dix explains personas and their importance:
Organize the sequence of events in the user's journey. Prioritize the most relevant and impactful scenarios to ensure the storyboard remains focused and manageable. Make the visuals from these that clearly represent each step of the user journey. Use simple shapes and lines to create characters and settings, or trace images for more detailed scenes.
Accompany each visual with captions that explain the user's actions, emotions and any changes in the environment.
Share the storyboard with team members, stakeholders and users. Collect feedback through methods like interviews and usability testing.
Then iterate and refine the storyboard from insights that have come up.
© Interaction Design Foundation, CC BY-SA 4.0
Designers should keep these tips in mind:
It’s important to base storyboards on authentic data from UX research to ensure they accurately reflect user needs and behaviors.
While creating storyboards, make the narratives clear and simple to understand. Avoid overcomplicating the visuals or the storyline.
Incorporate emoticons or expressive characters to depict the user's emotional journey throughout the interaction. This helps build a stronger connection with the audience.
Involve stakeholders and users in the storyboard creation process. This collaborative approach helps to refine ideas and align the storyboard with user expectations and business goals.
Storyboarding in UX design, while immensely beneficial, comes with its own set of challenges and considerations. It’s vital for designers to understand these potential pitfalls, to craft more effective and user-centric storyboards.
To create detailed and effective storyboards is often a time-consuming process that can demand significant resources. Designers must balance the depth and detail of storyboards with the practical constraints of project timelines and resources. This balance is crucial to ensure that storyboarding does not become a bottleneck in the design process.
It’s crucial to choose the most relevant and representative user scenarios to include in a storyboard. It requires a deep understanding of the target audience and the specific context for the product’s use. To misjudge this aspect can lead to a disconnect between the storyboard and actual user needs.
Professor Alan Dix explains user scenarios:
It can be challenging to find the right level of detail for a storyboard. Too much detail may lead to unnecessary complexity. Meanwhile, too little can make the storyboard ineffective as a communication tool. Designers must carefully decide the fidelity of storyboards—whether they need to be high-fidelity with detailed illustrations or low-fidelity with basic sketches—to appropriately convey the user journey.
The subjective nature of storyboards can lead to varied interpretations among different stakeholders. What one person perceives might differ from another's understanding. This can potentially lead to miscommunication and misalignment of project goals. To ensure that storyboards are clear and have descriptive captions can help mitigate this risk.
Another significant challenge is the storyboard's ability to capture the full complexity of user experiences. This is especially so in systems that involve multiple platforms or devices. To simplify these experiences into a storyboard can sometimes lead to oversimplification, where crucial nuances of user interactions might vanish.
In multi-platform and multi-device products, it can be challenging to manage the diversity of user scenarios. Each platform may offer different user interactions, which need accurate representation and consideration in the design process.
To determine which user scenarios to prioritize for testing and validation is another critical consideration. This decision impacts how effectively the storyboard can improve the final product, as it determines which aspects of the user experience to scrutinize and refine.
William Hudson explains important points about usability testing in this video:
Finally, to measure the impact and success of storyboards in improving user experience poses its own challenges. Unlike quantitative methods that provide clear metrics, the qualitative nature of storyboards makes it difficult to assess their direct impact on the design's success.
Storyboards must also align with both business strategy and user needs. This dual focus requires designers to constantly balance what is best for the user with what is viable for the business, to ensure that the final product is both user-friendly and commercially successful.
Overall, storyboards are a valuable asset to any team’s design work. The insights they can show can be particularly useful in how they reflect how users come to use a successful product or service.
Take our Design Thinking: The Ultimate Guide course.
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
Read our piece, UX Storyboards: Ultimate Guide.
Consult How to Create a UX Storyboard for Your Site by Darrielle Evans for more insights.
Go to UX Storyboard Creation: A Complete Guide For Beginners by Luca Morovián for valuable information.
Visit The Role Of Storyboarding In UX Design by Nick Babich for further helpful insights.
Read UX Storyboarding as a Unifying Force by Ellie Lee for more details.
Discover valuable tips and examples in Not an artist? You can still make great UX storyboards by Rachel Lang.
The key components of a storyboard in UX design are frames, annotations, and the user’s journey.
Frames represent the visual part of the storyboard. These are sketches or illustrations that depict the user interface at various stages of the user's interaction. Designers use these frames to visualize the flow and layout of a digital product.
Annotations are crucial as they accompany each frame to explain what occurs in the scene. This includes details about the user’s actions, thoughts and emotions. Annotations help stakeholders understand the context and reasoning behind each step in the interaction.
Lastly, the user’s journey outlines the path the user takes across the frames. It highlights the sequence of actions from the beginning to the end of a particular task. This journey showcases how the user progresses through the application, highlighting critical interactions and decision points.
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
Take our Design Thinking: The Ultimate Guide course.
The detail level in a UX storyboard should match the project's goals and the team's needs.
For initial brainstorming, you can use low-fidelity storyboards. These are simple and focus only on the main steps of the user's journey. They usually include basic sketches and short annotations to highlight key interactions and decisions. This type helps teams quickly align on the concept before diving deep into specifics.
For later stages, high-fidelity storyboards are more suitable. These contain detailed illustrations and comprehensive annotations that describe the user's actions, emotions, and the overall context more thoroughly. They often include specific user interface (UI) elements and are useful for guiding detailed design and development processes.
Ultimately, the storyboard's complexity depends on its purpose. If it serves to communicate broad concepts to a non-technical audience, simplicity reigns. If it aids in detailed design or user testing, complexity and detail are necessary.
UX Strategist and Consultant, William Hudson explains brainstorming in this video:
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
To create a storyboard for UX design or use a UX storyboard template, you can choose from among several tools:
Sketching tools: Pencils, pens and paper are essential for freehand drawing. Designers use these for quick and easy sketches that form the basic frames of the storyboard.
Digital drawing tools: Software like Adobe Photoshop, Sketch or Illustrator helps in refining sketches or creating digital storyboards. These tools offer more precision and versatility in design.
Storyboarding software: Tools like InVision, Balsamiq or Storyboard That specialize in creating and organizing digital storyboards. They provide templates and elements that make it easy to construct a coherent narrative.
Collaboration tools: Platforms such as Miro or Figma facilitate teamwork by allowing multiple users to work on the storyboard simultaneously. These are particularly useful for remote teams.
Annotation tools: To add detailed annotations to your frames, you can use simple text editing features available in most digital drawing and storyboarding software.
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
Storyboards and wireframes are both tools in UX design, but they serve different purposes and present information differently.
Storyboards show a sequence of events, demonstrating how users interact with a product. They tell a story about the user's journey, including their actions, emotions and changes in the scene. Storyboards help teams understand the user experience in a narrative form, which is useful for visualizing the flow and context of interactions.
Wireframes, on the other hand, are static, low-fidelity sketches of individual screens. They focus on the layout, structure, and functionality of a page or interface, without detailed design elements like colors or images. Wireframes help designers organize the elements of a page clearly and communicate the functionality and hierarchy of a website or app to stakeholders and developers.
In essence, storyboards provide a dynamic, contextual overview of user interactions, while wireframes detail the specific elements and structure of individual pages in a more static and focused manner.
William Hudson explains wireframing in this video:
Read our piece, How to Create Wireframes: An Expert’s Guide.
To incorporate user stories into a storyboard, follow these steps:
Identify user stories: Start by selecting user stories that describe the tasks and goals of your target users. These stories should outline what the users need to accomplish and why.
Define key scenes: Break down each user story into key scenes or steps that the user must take. This process involves identifying the critical points in the story where interactions occur.
Sketch frames: For each scene, sketch a frame that visually represents the user interaction. These sketches should depict both the interface and the user's actions.
Add annotations: Beside each frame, write annotations to explain the user’s thoughts, actions and emotional state. This helps clarify the purpose of each interaction and how it connects to the user's goals.
Link the frames: Connect the frames in a logical sequence that matches the user's journey through the story. This flow will guide viewers through the storyboard, making the user's path clear.
Review and iterate: Finally, review the storyboard with your team or stakeholders. Make adjustments based on feedback to more accurately reflect the user experience.
UX Designer and Author of Build Better Products and UX for Lean Startups, Laura Klein explains user stories:
For more practical insights on working on agile teams, take the course, Agile Methods in UX Design.
A storyboard and a user journey map both visualize the user experience, but they differ in format and focus.
A storyboard is a visual narrative that shows how a user interacts with a product through a series of images or sketches. It depicts specific scenarios involving the user, such as completing a task or encountering a problem. Storyboards capture the sequence of actions, decisions and emotions of the user, often like a comic strip, to illustrate the flow of the experience.
A user journey map, however, is a more abstract tool that outlines the various stages a user goes through when they interact with a service or product. It typically includes a timeline of the user's steps, their emotions, pain points and the touchpoints where they interact with the product. Unlike storyboards, user journey maps do not usually contain detailed visual scenes. Instead, they provide a high-level overview of the user experience, highlighting key moments and transitions across the entire interaction.
In summary, storyboards provide a detailed, scene-by-scene visualization of user interactions, while user journey maps offer a broader, strategic view of the entire experience from start to finish.
Take our Master Class How to Create Actionable User Journey Maps with Kelly Jura, Vice-President, Brand & User Experience at ScreenPal.
Take our Journey Mapping course.
When creating UX storyboards, avoid these common mistakes to ensure they are effective:
Overcomplicated visuals: Keep the sketches simple and focused on key interactions. Overly detailed illustrations can distract from the main purpose of the storyboard, which is to communicate user experiences.
Ignores user’s emotions: Include how the user feels at various points in the journey. To neglect the emotional aspect can result in a design that does not resonate with users.
Lacks clear annotations: Always provide clear annotations that explain what happens in each frame. This helps others understand the storyboard without needing additional explanations.
Skips steps in the process: Ensure the storyboard covers all critical steps in the user's journey. Missing steps can lead to misunderstandings about how the final product should function.
Not testing with users: Validate the storyboard with actual users or stakeholders. This feedback can reveal misunderstandings and provide insights that improve the design.
No iterations: After feedback, refine the storyboard. Often, the first version needs adjustments to better meet the users’ needs. Avoid these errors to make your storyboards clear, comprehensive and user-centered.
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
Take our Design Thinking: The Ultimate Guide course.
Personas play a crucial role in UX storyboarding as they guide the design process to focus on the needs and behaviors of real users. A persona is a fictional character that represents a specific user type within a targeted demographic. Designers use personas to simulate the experiences of actual users.
When designers work to create a storyboard, personas help ensure that the scenarios and interactions are realistic and relevant. They provide a clear understanding of the user’s goals, challenges and preferences. This understanding influences how designers conceive and visualize user interactions within the storyboard. When designers consider the persona's background and needs, they can create more accurate scenes that reflect how real users would interact with a product.
Moreover, using personas in storyboarding helps teams communicate ideas more effectively. Team members can better understand and agree on design decisions when they relate them back to the persona's needs and behaviors. This alignment is essential to create a user-centered design that enhances the user experience.
Overall, personas make storyboards not only more user-focused but also more actionable and effective in guiding the design of a product that truly meets user expectations.
Author and Human-Computer Interaction Expert, Professor Alan Dix explains personas and why they’re important:
Take our Master Class User Stories Don't Help Users: Introducing Persona Stories with William Hudson, Consultant Editor and Author.
You should use storyboards in the UX design process primarily during two stages:
1. Concept development: When you begin a project, use storyboards to visualize and explore different ideas for how users will interact with your product. This helps teams understand and agree on the direction of the design before detailed work begins.
2. User testing and feedback: Later, as you refine the concept, employ storyboards to communicate the planned user experience with stakeholders and test users. This allows you to gather feedback on the proposed interactions and make necessary adjustments before you finalize the design. Storyboards are especially useful when the design process requires a clear understanding of sequential user actions and emotional responses. They help everyone involved envision the complete context of user interactions, and make it easier to identify potential issues and opportunities for improvement.
Overall, storyboards serve as a powerful tool for both conceptualizing initial ideas and validating them through user engagement, and ensure the final product aligns well with user needs.
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
In UX design, you can use storyboards creatively in several ways to enhance the design process and the final user experience. You can use them to:
Explore multiple scenarios: Use storyboards to visualize different user scenarios for the same feature. This approach allows you to compare various user paths and choose the most effective one.
Stakeholder presentations: Present storyboards to stakeholders to provide a clear, visual explanation of proposed designs and interactions. This makes complex ideas more accessible and engaging, and helps stakeholders to make informed decisions.
Cross-functional workshops: Employ storyboards in workshops with cross-functional teams to facilitate understanding and collaboration. This can spur innovative ideas and ensure all team members are on the same page regarding the user journey.
User testing: Utilize storyboards during user testing sessions to illustrate specific tasks or experiences. This can help participants understand their tasks better, resulting in more accurate feedback.
Marketing and communication: Use storyboards to communicate the user experience to marketing teams. This helps them create more accurate campaigns that reflect the actual user journey and product benefits.
These creative uses of storyboards can significantly improve both the design process and the effectiveness of the final product.
Laura Klein explains the value of cross-functional teams:
Take our Master Class Storyboarding 101: From Ideas to Narratives with Kay Carmichael, Storyboard Artist and Teacher.
Asgari, M., & Hurtut, T. (2024). A Design Language for Prototyping and Storyboarding Data-Driven Stories. Applied Sciences, 14(4), 1387.
This publication introduces a design language for prototyping and storyboarding data-driven stories (DDS), which are becoming increasingly important in UX design. The authors propose a framework that consists of four main categories—expression, connection, narration and replication—with specific design rules to guide the ideation and implementation of DDS. This work has been influential in establishing a structured approach to incorporating storytelling into the UX design process.
Rasheed, Y. (2019). A Model-Driven Approach for Creating Storyboards of Web Based User Interfaces. Typeset.io.
This publication has been influential in the field of storyboarding for UX design by introducing a model-driven approach to creating storyboards for web-based user interfaces. The authors present a framework that leverages the principles of model-driven software engineering to automate the development of evolutionary prototypes from initial requirements. This approach helps reduce the complexity of the storyboarding process by employing abstraction and separation of design from implementation. The paper demonstrates how this model-driven approach can streamline the creation of storyboards, making it a valuable tool for UX designers to effectively communicate and iterate on their design ideas. The integration of storyboarding and metamodeling techniques has the potential to enhance the efficiency and quality of the UX design process.
Peng, Q., & Martens, J. B. (2018). Requirements gathering for tools in support of storyboarding in user experience design. Typeset.io.
This publication has been influential in the field of storyboarding for UX design by exploring the requirements and challenges that designers face when creating storyboards. The authors conducted an exploratory study to identify the main obstacles that design students encounter when using storytelling in their design process, and to explore ways to address such obstacles. The paper highlights the importance of storyboarding as a visual communication tool in UX design, while also acknowledging the limitations of traditional tools like pen and paper. The authors propose that digital tools are becoming increasingly popular, but still need improvement to better support the storyboarding process. This work has contributed to the understanding of the role of storyboarding in UX design and the need for more effective tools to facilitate the creation and use of storyboards.
Here’s the entire UX literature on Storyboards in UX Design by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
