Storyboarding
Storyboarding is drawing out the story around the use of your product in different frames. It originates from the movie industry, where frames are sketched out before they are turned into the real thing. You should use storyboarding at the beginning of a design process to explain the current situation of your user, and how the product will aid in improving this situation. At the same time, storyboarding is a good way to discover implications of the context that you have not considered before. For example, you can come up with a voice controlled mail app. Once you start sketching out the storyboard, you figure out the user is going to use it in public transport as well as at home. By drawing the context(people around the user in the train) you start to see how the product and the context influence each other, in an undesirable manner. The output is a storyboard that helps the designer understand implications of design decisions, as well as a product to discuss the concept with different stakeholders.
Note: In the Google Design Sprint, there is also something called storyboarding. This however, is meant to prepare your prototype, and does involve drawing out screens. For this, read the Sprint book. If you are looking for a way to draw out the scenario for a user test, read: usability testing. If you are looking for a way to draw out the flow of a user through the application, read: use flows.
How to
- Determine a persona and use case for which you are going to draw the storyboard. Link: personas & use cases.
- Determine the rough outline of the storyboard. Where does it start, where does it end.(Thiswill probably change a 100 times while you are making the storyboard, that’s okay.) Have the storyboard start before the user is introduced to your product, to describe the need. Have it end after the user has used your product, to describe the effect of your product.
- Sketch the story around the use of your product, in separate frames. You can start with the captions, and draw the images when you have a good order, or the other way around.
- Determine the final drawings, the final order of frames and write the final captions.
- Use your storyboard to discuss the concept with stakeholders.
Tips
- Draw each frame on a separate(large) post-it or piece of paper (a5 is a good size), so you can still move them around to change the order.
- Keep the drawings simple, but expressive. Match the fidelity of your drawing to the fidelity of your idea. Still a first idea? It can be a very rough sketch. See: sketching.
- Be careful with colour. Start in grey-tones and use an accent colour to highlight important parts.
- The main character of your storyboard is your persona. See: personas.
- Emphasise the emotions of the characters in the different situations to strengthen your story.
- Your storyboard should be based both on user research (who is your user, what are their needs, how do they behave in certain situations) as well as on your vision of the product (what can it do, how will it help the user).
- Give your storyboard a logical plot with a beginning, middle and end. See: storytelling.
- When you are drawing detailed screens and interactions in your storyboard frame, it might be time to move on to wireframing. See: wireframing.
- The goal of the storyboard is to understand the context of use of your product, so draw context! Not just a guy with a phone in an endless white space.
- As an interaction designer you can make a storyboard as part of your ideation phase. You can then discuss the storyboard with stakeholders, and adjust it accordingly. It is also possible to draw the storyboard together with stakeholders. In this case it is important to appoint one draughtsman and one decision maker.
What do you need
| Tools | People | Time |
|---|---|---|
| A large sheet of paper or a whiteboard | Minimum: interaction designer | 2 hours - several days (depending on the complexity of your case & amount of iterations) |
| Large post-its | Optional: other stakeholders | |
| Pens & markers of different colours |
Learn more
- What & how of storyboarding in UX design, with examples
- https://uxplanet.org/storyboarding-in-ux-design-b9d2e18e5fab
- What & how of storyboarding in product design, with examples
- https://medium.com/@muppetaphrodite/half-the-blank-page-storyboarding-for-product-design-8f92d47fc588
- Storyboarding to design the Echo Look(startsat 25:00)
- https://www.youtube.com/watch?v=0lCMKEq7vgU
- ‘Understanding Comics’ by Scott McCloud