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 doesn’t just help in the design and development process. It makes sure that teams keep user needs at the forefront of product development, too. 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 empower designers to anticipate how users will interact with a product over time. When designers visualize these interactions, they can find 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 get the team’s vision aligned and understand the user's perspective.
Storyboarding isn’t just about prediction; it’s a method for ideation as well. 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 together 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 its 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—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 when they’re in the initial stages of the design process. After designers conduct user research, storyboards help to visualize the information they’ve collected. They also help set the stage to define problems and ideate potential solutions. This visual representation lets designers prioritize user needs; plus, it makes collaborative brainstorming sessions easier.
UX Strategist and Consultant, William Hudson explains the importance of user research:
During the design phase, storyboards keep playing 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. That’s essential for teams to empathize with the user and make sure they’re indeed following a user-centered design approach. This step-by-step visualization also helps communicate the design to stakeholders and team members. It makes sure everyone’s on the same page and everything’s understood across the board.
See why empathy is a vital ingredient in design:
Storyboards are also instrumental during usability testing and feedback sessions. They pre-visualize a sequence of interactions, so they let designers and product managers test and validate ideas with users, gather their feedback and make any needed adjustments. This iterative process is crucial to refine the user experience and give the product’s usability a powerful boost.
© Interaction Design Foundation, CC BY-SA 4.0
Storyboarding in UX design offers a whole myriad of benefits that make the design process improve by leaps and bounds—making it more efficient, user-centered and communicative. Namely, storyboards:
Storyboarding serves as a powerful communication tool—one that bridges the gap between designers, stakeholders and team members. It sets out a visual narrative that helps all parties who are involved clearly understand the user journey and the design intentions. This clarity is crucial for everyone to be on the same page. It therefore makes for more informed decision-making and lowers the chances that misinterpretations come about.
Visual simplicity: Storyboards carry complex user interactions through simple visuals. They make it easier for people from non-technical backgrounds to grasp the concepts in them quickly.
Unified vision: As storyboards present a visual story, they help get the team’s vision aligned. This makes sure that all members understand the product's direction and user interactions.
At the heart of UX design is a strong ability to empathize with users. Storyboards excel at nurturing this empathetic understanding. When designers visualize the user's journey, they can get a better grasp of 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—something that promotes a user-centric approach for everyone to follow throughout the UX design workflow.
Emotional connection: Visual stories help designers and stakeholders connect emotionally with the user scenario. This makes the design more effective at solving real user problems.
One of the strategic advantages of storyboarding is how it can identify potential design issues at an early stage. This proactive approach doesn’t just save time for product teams. It significantly cuts down on the costs associated with making changes at later stages of the product development cycle, too.
Problem detection: As storyboards map out the user journey, they can highlight usability issues, gaps in the user experience or bottlenecks that mightn’t be evident in textual descriptions alone.
Iterative refinement: The visual and editable nature of storyboards makes it easy to iterate on designs—and so enable teams to quickly address and refine user issues as they come up.
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 real 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 makes for easier iterative feedback. That’s essential for teams to refine and perfect the user experience.
When teams integrate storyboarding into their UX design process—like 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 all around.
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 good and 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, and features tools for scripting, storyboarding, and sharing, all within one platform.
© Luke Leighfield, Fair Use
© Interaction Design Foundation, CC BY-SA 4.0
Here’s 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 make sure 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 of the design team. Low-fidelity storyboards focus on quick sketches that convey ideas. Meanwhile, high-fidelity storyboards include detailed scenes that are effective for deeper engagement.
Establish the main character (user persona) and specific scenario that the storyboard is going to 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. That will make sure 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, it’s time to 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 be sure they accurately reflect user needs and behaviors.
While creating storyboards, make the narratives clear and simple to understand. Don’t overcomplicate the visuals or the storyline.
Use emoticons or expressive characters to depict the user's emotional journey as they go through the interaction. This helps build a stronger connection with the audience.
Involve stakeholders and users in the storyboard-creation process. This collaborative approach is something that helps to refine ideas and get the storyboard in line with user expectations and business goals.
Storyboarding in UX design is indeed immensely beneficial, but it does come 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—one that can call for great amounts of resources. Designers must balance the depth and detail of storyboards with the practical constraints of project timelines and resources. This balance is crucial. It’s how designers can help make sure that storyboarding doesn’t 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 needless 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 get the user journey across appropriately.
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 a bad misalignment of project goals. When storyboards are clear and have descriptive captions, it can help mitigate this risk.
Another significant challenge is how able the storyboard is 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—since 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 is something that poses its own challenges. Unlike quantitative methods that provide clear metrics, the qualitative nature of storyboards makes it hard to assess their direct impact on the design's success.
Storyboards must also run in line with both business strategy and user needs. This dual focus requires designers to constantly balance what’s best for the user with what’s viable for the business—so they can be sure 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. They’re 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 goes on 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 in more thorough detail. 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, then 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 which are 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—still, 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—something that’s 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 give a dynamic, contextual overview of user interactions, while wireframes detail the specific elements and structure of individual pages in a more static and focused way.
William Hudson explains wireframing in this video:
Read our piece, How to Create Wireframes: An Expert’s Guide.
To do this, follow these steps:
Identify user stories: Start by picking 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 as well as 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 and make the user's path clear.
Review and iterate: Finally, review the storyboard with your team or stakeholders. Make adjustments based on feedback so you 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 do 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—like 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, though, 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 don’t 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.
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 you’re creating UX storyboards, stay away from these common mistakes to make sure they’re 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 doesn’t resonate with users.
Lacks clear annotations: Always provide clear annotations that explain what happens in each frame. This helps others understand the storyboard without their needing additional explanations.
Skips steps in the process: Make sure the storyboard covers all critical steps in the user's journey. Missing steps can bring about misunderstandings about how the final product should function.
Not testing with users: Validate the storyboard with actual users or stakeholders. This feedback can expose misunderstandings and give up insights that will help improve the design.
No iterations: After feedback, refine the storyboard. Often, the first version needs adjustments so it better meets the users’ needs. Avoid these errors and you can help 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—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 make sure that the scenarios and interactions are realistic and relevant. They shed light to give 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.
What’s more, when teams use personas in storyboarding, they help their members 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 a vital step on the path to creating 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 really does meet 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 any detailed work begins.
2. User testing and feedback: Later, as you refine the concept, get your storyboards to communicate the planned user experience with stakeholders and test users. This lets you collect feedback on the proposed interactions and make necessary adjustments before you finalize the design. Storyboards are especially useful when the design process calls for 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 weed out potential issues and find opportunities for improvement.
Overall, storyboards serve as a powerful tool for both conceptualizing initial ideas and validating them through user engagement—and to make sure the final product lines up well with users’ 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 as well as 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 lets you 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; plus, it helps stakeholders make informed decisions.
Cross-functional workshops: Use storyboards in workshops with cross-functional teams to bring about better understanding and collaboration. This can spur innovative ideas and make sure 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, and result 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.
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)—items that 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.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on Storyboards in UX/UI 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!
