Storyboarding is one of the most valuable stages of the design thinking process. It offers an engaging, visual way for teams to collaborate when solving problems. It can also help organizations save money, because they'll iron out disagreements even before investing in prototypes.
Storyboarding is most commonly done during the discovery phase for a new product to help align stakeholders around user outcomes. But it can also be an important undertaking when developing an existing product. A company could storyboard annually, during a UX audit, or whenever they're considering adding a big new feature to the product roadmap.
What is storyboarding for design?
Storyboards are a visual representation of the user's journey that don't correlate to the product's user interface, which will later be designed based on the journey depicted in the storyboard.
They are a critical part of the design thinking process. Before actual products can be designed, built, and launched, collaborators first need to research their target user's problems and then distill that down into a story. What is the user's starting point? What do they want to achieve?
A storyboard offers a visual way to represent user research, so that product UX and functionality can be brainstormed and decided upon using a storyboard as a common starting point.
"Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success. Thinking like a designer can transform the way organizations develop products, services, processes, and strategy."
- Tim Brown, Executive Chair of Ideo
What is the purpose of storyboard design?
The purpose of a design storyboard is to visually map out the user's journey through a product or service. It breaks down the steps a user takes and highlights their emotions and interactions. By creating this visual flow, teams can better understand the user’s experience.
Storyboards help keep the user at the center of the design process. They allow designers to focus on solving real problems and creating a smooth, intuitive experience.
Using storyboards, teams can quickly identify user pain points and moments of delight. They also help foster collaboration by making complex ideas easier to understand. Storyboards act as a shared reference point, keeping the team focused and aligned as the project moves forward.
Another plus with storyboarding is that they also turn abstract ideas into clear visuals. This makes it a lot easier for teams to align on the project’s direction.
Why is storyboarding important for the design process?
Storyboarding is an essential part of design thinking and design sprints. Companies that fail to innovate (like Kodak and Blockbuster) do so for a variety of reasons. Sometimes it's debt and overhead. But more often, it's because the corporations have slow and inefficient innovation processes and because they get complacent and feel invincible.
When companies do want to start innovating like startups, they need to use startup methodologies, which are agile and affordable.
Whether in physical or digital form, a storyboard offers a simple way for companies to start innovating, without spending money on rapid prototypes just yet.
Companies can get on the same page about the user journeys that matter most. By aligning around the user journey, organizations will save a lot of money when it comes time to move onto the next phases of design thinking, such as UX design, prototyping, product validation, and development.
The 5 steps of the design storyboard
The storyboarding process is simple to understand but difficult to do right. You need an excellent facilitator to help you.
Step 1. Designate a facilitator and a drawer
Organize a storyboarding meeting with all of the major stakeholders. In-person meetings are better, but virtual will suffice if necessary.
Make sure to have a separate facilitator and drawer. That way the facilitator can focus on asking follow up questions, encouraging input from silent collaborators, and helping everyone take turns talking. Meanwhile, the drawer can draw out the points being discussed.
Step 2. Have the facilitator moderate the conversation
The facilitator should seek to gather...
Current issues and problems that users are facing
What users want to achieve
What users need to achieve (even if they're not aware of it, or it's not what they want)
The most important problems to be solved
Ancillary or less important problems to be solved
Later, you'll determine user flows, but for now it's wise to just stick with user needs.
Step 3. Narrow down to 4 - 6 key moments in the user's journey
The next step is to work together to determine the 4 - 6 most important moments in the user's journey. For example, with a ticketing software, it might be to discover the event, choose a ticket option, pay for the ticket, choose a seat, and store the ticket.
By condensing the user's needs down into a clear story, you'll make sure that future prototyping and development will stay on track.
The facilitator can help the team determine the essential moments, and the drawer and map them out.
Step 4. Determine the most important user flows
Next, you can start jotting down all of the essential user flows that will help the user achieve their journey. Start at a high level, and wait to get nitty-gritty until you're in the prototyping stage.
For example, at this stage some user flows for ticketing software could be to review event information, choose a price option, and create an account.
Step 5. Get feedback
Now, it's time to get feedback. Share the storyboard and essential user flows with other stakeholders who weren't able to attend the storyboard meeting.
You might also want to share these materials with target users and ask them if this product concept will meet their needs.
Once you've ironed out the storyboard, you're ready to move onto prototyping and UI design.
If you don't have the experience to do this in house, make sure to partner with a product development agency that specializes in building products—not projects.
Tips for getting the most out of a product design storyboard
1. Start with a clear user persona
A well-defined user persona sets the foundation for your storyboard. How else will your design address real user needs?
For example, when designing an app for busy professionals, a persona could be a project manager who uses mobile tools to stay productive during short breaks. This helps the team focus on solutions that fit the user’s daily habits and challenges.
2. Focus on key moments in the user journey
Not every step of the user journey needs to be in the storyboard. Concentrate on the pivotal moments, like when a user makes a purchase or encounters a roadblock. These key moments provide the most insight into user behavior, helping you improve the design where it matters most.
3. Keep the storyboard simple and easy to follow
A cluttered storyboard can confuse team members and stakeholders. Instead of adding too much detail, focus on a clean, clear layout that highlights the main points of the user experience.
Simple storyboards allow everyone to quickly understand the flow and provide meaningful feedback.
4. Collaborate with cross-functional teams
Involve designers, developers, product managers, and even marketing early in the process. Their diverse perspectives will enrich the storyboard. And you might even catch potential issues that might be overlooked by a single team.
Collaboration can also lead to innovative solutions and align the team on common goals. There’s a sense of comradery and personal ownership that arises from being involved in the storyboarding phase.
5. Use real-world scenarios to ground the storyboard
Bring in actual user behavior by incorporating real-world scenarios.
For example, if you're designing an e-commerce platform and you're targeting business professionals, a scenario could be a user browsing for products during their commute—not if they're driving though, avoid that scenario! But, the train, the bus, the taxi, and the passenger are fair game and their scenarios could really shape your design.
Grounding the storyboard in reality helps validate the design decisions and ensure the final product is usable in everyday situations.
6. Iterate and refine the storyboard as needed
Don’t treat the storyboard as a final product. Use it as a living document that can be updated as the product evolves. Evolution is key—especially in SaaS.
Iterate the storyboard after user testing, design reviews, or product pivots. This keeps it relevant and aligned with the current state of the project.
7. Include both functional and emotional aspects of the user experience
Storyboards should capture more than just the steps a user takes. They should also show how the user feels at each stage.
Emotions like frustration or annoyance can help identify areas where the design could be improved to reduce friction.
Delight, on the other hand, highlights areas with enhanced satisfaction potential.
Recognizing the emotional difference can have a real impact on the approach taken in design, and ultimately improve the customer experience and reduce churn.
8. Test the storyboard with actual users for feedback
User testing is always important when building products. This doesn’t change with storyboud designs. Sharing the storyboard with real users can reveal gaps in the design process.
One option is to ask users to walk through the storyboard and describe their reactions. This feedback can validate assumptions or point out areas where the design doesn’t align with user expectations.
9. Use tools that streamline the storyboarding process
Leverage digital tools like Miro, Figma, or LucidChart to create, edit, and share your storyboard easily (more on this in the next section).
These tools allow for real-time collaboration, making it easier for team members to contribute from anywhere. They also offer templates and drag-and-drop features, speeding up the creation process.
Tools to support the storyboard design process
Try these different tools for storyboarding in an in-person, remote, or hybrid setting.
1. (The old school way) whiteboards, bulletin boards, sticky notes, etc.
Here at DevSquad, whenever possible we like to kick off new digital products with an in-person workshop. This is part of our Sprint Zero process. We talk through user issues and flows to come up with the best concept. Then we prototype that and rely on user testing to validate the prototype before we move onto development.
2. Miro
Miro is a very popular online whiteboard tool that can work well when storyboarding either virtually or in person with a device. You can use Miro for storyboarding and low-fidelity product prototypes. There are useful features for comments and annotations to fuel remote and hybrid collaboration.
3. Figma
Figma is another great tool for UX and product designers, but it's more commonly used as a wireframing and prototyping tool rather than a storyboarding tool. However, it functions well as a digital whiteboard, so if you're already using Figma for prototyping go ahead and use it for storyboarding as well.
4. LucidChart
LucidChart is most similar to Miro. It offers whiteboards, diagrams, and data visualization. It's an excellent fit for more complex whiteboards and diagrams, with lots of different elements, contingencies, and connections. The platform offers customer journey diagram templates that can be used after a storyboard meeting to distill decisions down into a more shareable format.
5. MicroSoft Whiteboard
With MicroSoft Whiteboard, you can collaboratively work on a whiteboard with your team during meetings, without having to use separate tools. That makes the platform a good fit for teams that can't meet in person. The whiteboard is simple to use and is perfect for storyboarding.
3 design storyboard examples
So now that you’ve got a better sense of the purpose of storyboard, let’s jump into a few examples and really seal the deal.
Example 1. Sticky notes and posterboard
Here's an example storyboard created during a design thinking process. The storyboard shows a person considering purchasing a ticket to a conference, purchasing that ticket, and then enjoying the post-purchase experience, with an easy-to-find mobile ticket and food and lodging suggestions.
Woman purchasing a conference ticket - source
Example 2. Comicstrip
Comicstrips make entertaining storyboard examples. In this Solomofoo example the storyboard clearly defines the user persona and carries him through the problem, solution and beneficial outcome. This example provides a clear and compelling story without overloading it with details.
Man needing food before a meeting - source.
Example 3. Customer journey
Compiling customer journeys sometimes require a little more detail to the storyboard. In this customer journey storyboard example we see a well organized approach to the info. The rows represent customer attributes/actions and the columns the journey through the product acquisition. This allows for a comprehensive outlook in a relatively simplified form.
Storyboard grid for customer journey - source.
Storyboarding requires excellent facilitation to be successful. Finding the right facilitator is not always easy. Make sure to choose someone who can guide collaboration and keep the team on track. If you got that person in mind, great. If not, consider outsourcing to a team that’s got this process in the bag.
Looking to build a digital product? Learn more about product strategy and design with DevSquad.
