UX/UI Projecting with Storyboards: Storyboarding in UX Design

Add sketches to UX stories, and this approach will grab attention, provide clarity, and inspire the team to be proactive in product development.

What Is A Storyboard in UX Design?

You’ve probably heard of the concept of storyboards for explainer videos, movies, animation, and comics. Of course, the level of realism of these industries differs, but the bottom line remains the same – storyboards always tell a story, in a nutshell, using sketches of scenes.

For great UX, a storyboard UX design is a way to tell a product story through sketches of scenes. The scenes follow each other in chronological order and convey the main events of the story portrayed. But don’t confuse them with customer journeys!

How Storyboard is different from Customer Journey Map (CJM)?

A user journey map (CJM or Customer Journey Map) visualizes a user’s process to achieve a goal. It is pretty complex and often contains a lot of textual information about the various steps of the journey – not only about the user’s actions but also their thoughts, emotions, and ideas for improvement, which can be identified at different stages of the process under consideration.

By contrast, a user experience storyboard is usually (but not always) an informal document and illustrates a sequence of steps graphically in an easy-to-understand manner. The main focus of storyboards is images, not text. Of course, captions for images are necessary, but they still do not give the reader complete context as a user’s journey map.

A storyboard is usually used to describe a piece of a user journey map (or a thread).

The Matter of Storyboarding in UX

Since Storytelling plays a huge role in the work of UX designers, stories manage to grab attention, bring clarity, and inspire the team to take fast actions; storyboards become an ultimate instrument to visualize the whole process. What can be more important to the designer than data visualization?

What are the Benefits of Storyboarding?

Storyboards effectively establish a familiar context and framework for all team members working on a specific solution.

While a user journey map is a complex tool and is used across entire departments of an organization, a storyboard is usually (but not always) a narrow-use tool aimed primarily at members of the same team to keep them on the same page during the product development.

 Why are storyboards valuable, and when is a storyboard especially useful? Here are the cases:

1.      A way to generate ideas

To generate ideas means to participate in the process of generating a wide range of ideas on a given topic without trying to evaluate or criticize them. All will do.

You can sketch out ideas for how the user uses some functionality if it helps visualize the possible experience or if you want to better understand the user’s environment before starting development, etc.

2.      A way to prioritize and customize the overall vision

Visualizing how the user interacts with your application helps you understand and remember what features the user needs to complete the scenario, and therefore, what product nuances you need to focus on, problems to solve, etc.

 The entire team will be aware of this interaction, which will ultimately lead to a productive discussion on task prioritization.

3.      A way to present UX research

The presenting research and usability testing are also important.

Storyboarding in UX/UI help your team demonstrate how research participants interacted with your app frame or site. This presentation is especially valuable for those who have not been involved in the usability testing phase.

Storyboards created according to usability tests can display both actual user statements and any other signals, for example, the user’s gestures and emotions.

4.      A way to extend the Customer Journey Map (CJM)

Storyboards complement CJM by sketching the context that surrounds the user as they interact with the product. For example, sketches of the users’ device, their office space, and other nuances of the segment will help the team and more accurately feel the user’s context.

When you do not need to use a Storyboard?

You do not need storyboarding when your goal is not building a shared understanding. Or you need to create a polished and sophisticated piece of art, not just a thematic sketch.

If you have records from usability testing and decide to summarize this information using a storyboard, use the resulting photos or video frames. This visual will save you time (no need to sketch yourself) and improve the fidelity of your storyboard.

For presenting storyboards to a client or showcasing a design, use detailed illustrations created using software such as Adobe, Sketch, or Powerpoint tool.

Remember: storyboards are meant to tell a story. Don’t spend too much time rendering if you don’t need it to.

Use Storyboarding To Illustrate Experiences

Use a storyboard for UX to illustrate any of your client experiences within the project given.

For example, you build a marketing product for mass mailing. And you make stenches with a typical representative of an American small business – engaged in the production of various types of fruit jams at home. This entrepreneur has a client base. One day he decides to announce the release of a new product type and decides to apply a popular mailing service you develop.

Now compare how easier it is to go over the same scenario on the stickers rather than in words. After all, we have not even begun to discuss the barriers in the interface that come daily to the support service of any mailing solution and are discovered by researchers and data analysts at similar mailing websites. Besides, the competitors are not asleep. How much smoother does the same plot plays out in their alternative systems?

Your storyboard in UX design will answer those and many other vital questions.

Tips for Creating First UX Storyboards Step by Step

Creating a storyboard can seem daunting, but don’t worry: they don’t have to be drawn to the smallest detail and therefore don’t take a lot of time to complete.

To build an effective storyboard, you need to follow these 6 basic steps:

Step 1. Collect data

First of all, determine what kind of data you will take into the storyboard: interviews with users, usability tests, or metrics from the site.

It’s OK to build a storyboard without accurate data if you haven’t collected it yet or using a storyboard as a design for ideas.

Step 2. Select the level of accuracy

Always keep in mind the purpose of your storyboard and the audience you are building it for.

If you need to quickly draw a sequence of frames or convey a scene of actions to your colleagues during a brainstorming session, you can make simple sketches (aka sketches). And in meetings where you actively generate ideas, you can even build storyboards together using stickers to help you see the point of view of each team member.

Step 3. Work on the key: heroes & scenarios

Define the person and script that the storyboard will showcase. The script must be textured (with unique details) and only match one custom path for your storyboard to be linear.

Step 4. Plan your steps

Before tackling the storyboard, describe the steps and connect them with arrows. Then add emotional markup at each stage as shown below (for example, it could be an emoticon). This technique will help you imagine what will be depicted in each frame.

Step 5. Complete it

It is enough to use simple shapes or sketches of what you want to talk about.

Under the images, add descriptive bullet captions (no more than two items under each image) to describe the context that may not be clear at first glance.

Design your storyboard so that you can easily make edits if necessary (this is another advantage of simple sketches and stickers).

Step 6. Improve & distribute

Show the storyboard to the team members and all stakeholders, and then be sure to collect feedback. If you need to make edits and change something – do not worry: you can always repeat the key steps and achieve the goal.

Start your Great Story

Storyboards, or sketches, help tell a story about the users. When storyboards are based on real data and used in a mix with other UX methods, the results are noticeable.

Storyboard sets the bar for the team to start from reality, and not from their own prejudices – they feel users better: it dives into their real needs and experiences;

Storyboard focuses the attention of all project participants on specific user scenarios. What is storyboard in UX is something that helps foresee the future product as a problem-solving solution which is user-centric first.

The storyboard helps to understand what drives users when performing a particular action.  So, needless to say how they are important in UX/UI projecting. To start your great story, stick to storyboarding principles as recommended by Norman Group, choose professional tips & tools if you need some hints. Feel free to make mistakes. To err is human. And to achieve human-centricity in design is the ultimate goal. Good luck!