# Prototype

# Storyboard

Purpose
The visualization of the interaction with the application
Time required
From 1 hour to 1 day
Participants
Design Thinking team
Level of experience
experienced

# What is it about?

A storyboard is used to visualize the usage requirements of an application, service or product in sketch form at an early stage of the project. With the help of images, drawings and/or collages, a storyboard tells the individual steps of an interaction. In contrast to wireframes, which show individual sections of an application, storyboards are used to depict an interaction from a user's point of view, usually in the form of a comic strip. Storyboards illustrate usage requirements in their holistic context and make them comprehensible. Discussions are to be provoked about possible weak points or possibilities for improvement. Storyboards enable the user's perspective to be visualized and, if necessary, useful feedback to be obtained. In addition, storyboards serve as a means of communication within the development team and ensure a common understanding.

# The goal

Sketch-like visualization of a sequence of an interaction with the application.

# How to do it?

  1. Concretize the theme and message that you want to express through the story. The results from the empathy phase serve as input for the development of storyboards.
  2. Define the actors of your story.
  3. Choose which interaction to visualize and which are the individual steps.
  4. Write down the whole story in a script.
  5. Divide the story into sections (scenes).
  6. Choose a suitable graphic representation (drawing, photos).
  7. Create a picture for each scene.
  8. Limit yourself to 6 to 12 images.
  9. Use the storyboard to tell your story efficiently and effectively.

# When do you need it?

A storyboard is especially useful in the early prototyping phase to present solutions in their context and to make them comprehensible for others.

# Resources

  • Paper and pens (e.g. thin black pen, thick black pen, grey highlighter)

# Advantages

A visual representation is usually more understandable than a textual description of an interaction. They thus serve to generate a common basic understanding within the development team and can prevent comprehension problems. Illustrations of different variants can serve as a basis for discussions, comparisons, and decisions for a variant. Storyboards also provide a good overview of the application and its interactions.

# Disadvantages

If the representation becomes very detailed and extensive, the effort can be high.

# Keep in mind

In order to design a storyboard you need to know your users and their environment well enough. In addition, the storyboard must be properly designed so that users can understand it.

# See also

Previous methods Alternative methods Following methods

# Sources