cft

Storyboarding in user experience (UX) design

Storyboards are considered as one of the easiest and cheapest ways to show and analyze an idea.


user

Maryam Habibi

3 years ago | 7 min read

Is Storyboarding Good or Bad?

Storyboards are considered as one of the easiest and cheapest ways to show and analyze an idea. However, storyboards that are generated without comprehensive investigation and proper creation, are not only a waste of time but also could lead to the design and implementation of a useless product.

How Did I Figure Out the Importance of Storyboarding?

Years ago, I was working in a multi-product software company where suddenly the leader of a team working on creating X-box games, left the company. Despite that the other team members knew the big picture of the game scenario, they didn’t have a crystal-clear idea about the details of the game.

As a result, they were confused for about a month until they came up with a new detailed scenario. Needless to say, they lost a lot of time and their last two months of their development were useless as the scenario had already been changed.

That experience was a good trigger for me to go and think for a while about the activities that they must have done in order to prevent such situations. Except for regular documentation, storyboarding was among the methods I finally end up with.

One day, I finally decided to give it a try and when I started the process of creating the storyboards, I was totally delighted by the results. Since then, I usually use this technique when I want to start a new project.

What Are the Applications of Creating Storyboards?

From my point of view, if we know the applications of using a method before start learning it, we might be enough passionate and motivated to learn it by heart. Accordingly, in the following paragraph, I am going to tell you some of its main applications and a bit of history behind it.

Storyboarding was first widely used in the movie industry in order to both manage and depict the scenes. To be more specific, storyboarding dates back to the 1930s. At that time Disney used this technique in creating his animations [1]. Fig.1 is an example of using storyboarding in animations.

Fig.1: A storyboard for The Radio Adventures of Dr. Floyd episode #408
Fig.1: A storyboard for The Radio Adventures of Dr. Floyd episode #408


In the User Experience (UX) world, storyboarding is used in order to illustrate a goal and the idea behind it. In addition, by using storyboards we can depict the designing process. Furthermore, as storyboards are visual products, they can help team members and stockholders to imagine an idea as well as the goal, and how to solve the issues.

Visuality can be taken as one of the most important characteristics of storyboarding because by just taking a look at it you will be able to understand or sometimes remember the goal. It also might prevent a lot of misunderstandings comparing to the text-based documentations.

Visual memory describes the relationship between perceptual processing and the encoding, storage and retrieval of the resulting neural representations. Visual memory occurs over a broad time range spanning from eye movements to years in order to visually navigate to a previously visited location.[2]

Furthermore, storyboarding helps the UX designers to evaluate a new idea, or a new feature before implementing and developing it. Hence, it might also save us a significant amount of money.


Fig.2: An example using storyboarding in an application I have designed to improve the experience of using public transportation.
Fig.2: An example using storyboarding in an application I have designed to improve the experience of using public transportation.

Where to Start?

Now that we know how useful are storyboards, let’s discuss how we can start creating a storyboard.
In the first step, we need to write a scenario about the idea and our goal.

Keep in mind that the first draft of the written scenario doesn’t need to be perfect. You can also ask other UX designers in your team to help you write the scenario as well. This can help you to look at the issue from different perspectives and reach out to a specific goal.

Another key point in writing the scenario is that in the early drafts, you need to start with the main steps without the details. When we come up with the key steps, we can go to the details. There are some important questions that the written scenario should be able to answer:

Who? who is the user (or the potential user) of the final products. In other words, who are we creating the product for? When we want to create a new product, we need to create our personas first which is not in the context of this paper. On the other hand, when we have already a developed product with active users, we need to carefully study the behavior of our users.

What? what is the issue that we are going to hopefully solve? There are some methods we can use in order to find an issue. Monitoring the user’s behavior, taking surveys, and interviewing with users are among the simple and primary methods.

How? how are we going to solve the problem? Imagine users in different real-world situations and then write down how your idea might be helpful for the users.

Fig.3 shows an example of writing a scenario before drawing the storyboards. As it is shown, I have highlighted the main problem we are going to eventually solve.


An application that informs users, a specific time before arriving bus at the station.
An application that informs users, a specific time before arriving bus at the station.


After keeping up with a scenario, you need to review it from multiple aspects and revise it accordingly, and hence end up with a very clear scenario. We can discuss the scenario with other members of the teams which can help us to keep up with a mature and comprehensive scenario. In order to write each step of the scenario, we can follow the Fig.3 as a sample template.

Let’s Start

After creating your scenario, now we are ready to start designing our storyboard. One of the first things we need in this step is to design our characters. While designing your characters, you should pay attention to the following attributes of each :

The feelings. Your design should convey the feeling of the characters. Accordingly, in each step, it can be concluded if the characters are satisfied or not with the solutions.

Age. since Age can implicitly convey a lot of attributes and characteristics of a person, it plays a vital role while you design your storyboards.

The situation. The situation or the place where the scenario is taking place is also important. (e.x. the condition of a sunny day is totally different from a snowy day. )

In Fig.4, I have created the following sample characters to give you an idea of how to design your characters.

Fig.4: Examples of characters you can use.
Fig.4: Examples of characters you can use.


Furthermore, In Fig.5, I have used the character action line in order to simply show the feelings of the characters. As you can see, using simple lines can indicate a person with totally different feelings and emotions.

Fig.5: Character Action Line.
Fig.5: Character Action Line.


While there are many ways to design the characters and their feelings, at first it might be tough for you to cope with an idea of how to clearly depict it. Accordingly, I have created Fig.6 as an example that you can get some ideas from.


Fig.6: Example of depicting characters with different feelings in different situations.
Fig.6: Example of depicting characters with different feelings in different situations.


Panels

Keep in mind that in order to create a storyboard you don’t need to be a professional painter or an artist. You need to be clear. In other words, you just need to learn how simply create a situation, the characters, and their feeling and emotions. This is the key point in designing the storyboard.

Another important point you need to pay attention to is that if you have more than one solution for an issue, you need to simply create more than one storyboard. This helps your storyboards to be simple, focused, and also easy to understand.

Each Storyboard contains some Panels. As a rule of thumb, in order to effectively illustrate the written scenario, you need to have at least 5 Panels. The first panel will usually show the issue, and in the last one, a satisfied user should be shown. In the intermediate panels, we need to show the process of solving the issue according to the proposed idea.

Besides, in each panel, we can use dialog boxes as well as some directional arrow in order to better convey what we mean. Another technique I usually use to design my storyboards is that when I am done with writing the scenario, I try to imaging the characters in a real situation and accordingly find the best way I can to depict it.

Fig.7: Storyboard of an application helps the users no to miss the buses.
Fig.7: Storyboard of an application helps the users no to miss the buses.

Fig.7 is a storyboard I designed for an application that can help a busy user not to miss the buses. As shown on board №1, we can see a busy employee who usually forgets to leave his office soon enough so that he misses the buses (panel №2).

As shown in panel №3, we cope with a solution, an application in which you choose the bus and an approximate time you want to go home. The application monitors the bus locations and informs you in advance. Finally, panel №6 shows a satisfied user.

Remember to write down the dates on each storyboard. It can help you better archive your designs.

Last Step: Evaluate your Storyboard

After designing your storyboards, before finalizing your work you need to evaluate your storyboards by answering the following questions:

  • Is it really a good user experience?
  • Is the idea really applicable when it comes to the design and development costs?
  • Is the idea good from the marketing point of view?

In order to find a good answer to these questions, you might need to discuss your storyboards with the other departments of your company, or even with the stockholders. Needless to say that during the meetings your storyboards might need to be revised or sometimes completely changed, but remember that one important use of storyboarding is to be able to evaluate your idea before the implementation of that.

Conclusion

In this article, I tried to explain the storyboarding technique in UX. The storyboarding can benefit us a lot before designing and implementing our idea and the final application. In other words, it can help us evaluate our idea at a very early stage. Furthermore, being visual, storyboards can help us and the team members to clearly image the issue we are going to solve, as well as our solution.


References

[1]. The Story of Walt Disney. (Henry Holt, 1956)

[2]. Visual memory and the brain. (Berryhill, M. 2008, May 09).

If you are interested in this article or in case of any feedback, please connect me on LinkedIn.

Upvote


user
Created by

Maryam Habibi


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles