Storyboarding is a design methodology used to visualize user experiences through a sequential series of illustrations. It originated from cave paintings and Egyptian hieroglyphics. Storyboarding benefits interaction design by communicating user flows, sparking ideas, and supporting an iterative design process. However, limitations include lack of character development, losing details by simplifying information, and time required. Annotated storyboards can help address limitations by connecting informal designs to other models.

1. Design Methodologies
STORYBOARDING
IDM19 · Creative Design Lab
Apr 2018
Domoni Mainstone
Lorna Howes

2. Overview

3. Contents
1· Outline
2· Definition
3· History of storyboards
4· The basic concept – how to
5· Uses in Interaction Design
6· Benefits in Interaction Design
7· Limitations in Interaction Design
8· Discussion

4. Outline
Purpose· To critically assess a design
methodology relevant to the field of Interaction
Design.
Topic · Storyboarding
Structure· Definition, History, How-to, Uses,
Benefits/Limitations, Questions.

5. Definitions - General
Cambridge Dictionary·
“A series of drawings used to plan the order of action and
events in a film, television advertisement, etc”
Smashing Magazine·
“A storyboard is a linear sequence of illustrations, arrayed
together to visualize a story”

6. History

7. Cave Paintings/Hieroglyphics
The approach is considered to originate in Cave Paintings of
stampeding cattle and ancient Egyptian Hieroglyphics
circa 3400 BC
from 39,900 years old from 3400 BC

8. Bayeux Tapestry
Recounts the tale of the conquest of England on 14th October 1066,
led by William the Conqueror, the Duke of Normandy.
Characters displayed simultaneously, unlike modern storyboards
11th Century

9. Cinematic Film
Influenced by the comics of Winsor McCay, Disney was a
pioneer of storyboarding in movie production.

10. How-to

11. Definitions - UX
Smashing Magazine·
“A storyboard in UX is a tool that visually predicts and explores a user’s
experience with a product. It presents a product very much like a movie in
terms of how people will use it”
Spotless·
“Using sequential illustrations with dialogue copy or narrative, storyboards are
a great way to demonstrate the user experience through a few key images”
UX Studio Team ·
“The UX storyboard can help visually predict and explore the user experience
with a product. It visualizes how people would interact with a service or app”
“”

12. Creating a Storyboard
1· Establish a timeline
2· Identify the key scenes in your story
3· Decide how detailed to get
4· Write a description of what each cell will
show
5· Decide what medium to use for your template
6· Sketch your thumbnails
7· Add other important information
8· Finalise the storyboard
9· Add motivations
10· Let your storyboard morph as you go

13. Storyboarding – Design workshop
1· Be clear about your purpose
2· Gather the necessary materials
(paper, pens, etc)
3· Set the scene
4· Start with text and arrows
5· Draw the storyboards
6· Present to the group

14. Uses in interaction design

15. Flat wireframe flows
Low fidelity High fidelity
Showing screen flow, aka “wireflows”

16. Wireframes in paper prototypes
Paper prototype interacting with sketches of screens

17. Scenario “comic strip”
Low-fidelity High-fidelity
‘Comic strip’ story of user in context interacting with the product

18. Story flow of a game
Chronological order
The story of your game’s universe.
State/sequence order
State of the game and current step or
entry point for the gamer. Action
sequences may trigger, or there may
be a series of forked paths based on
user choices.

19. Idea generation
1. They agree on an ideal state and what steps they would take to get there.
2. Draw each step as a sequence of large images or scenes on flip-chart.
3. Present stories.
4. After presentations, ask what’s inspiring in what they heard.
5. Summarise any recurring themes and ask for observations, insights, and
“aha’s” about the stories.
Players envision and describe an ideal future in sequence using words and
pictures.

20. Benefits/Limitations

21. Benefits
· Stories are the most powerful tool for: visualisation, memorability,
empathy, engagement
· By putting a face to the data, the approach is human centered
· They communicate the user flow of a scenario
· They help designers decide what is most important
· Storyboards welcome feedback and can spark new ideas
· They support an iterative design process
· Storyboards are an excellent tool for participatory design
· They communicate the experience, as well as the product design

22. Limitations
Storyboards focus on developing the
correct sequence of actions.
Often focus on the technology, not on
the user.
Often lack character development, plot,
and user goals.
Contrast this with "UX stories" -
specific, with developed characters,
context, and well-formed plots.
Limitation Solution

23. Limitations
Storyboards strip away a lot of the
information so sometimes lose the full
picture.
Not useful for fine-tuning the details of
products, because they tend to be
more macroscopic.
The focus on the bigger picture and
context can be a benefit of
storyboards, so ensure you're using it
for the right purpose and project.
Limitation Solution

24. Limitations
Some team members' lack of
confidence in their drawing abilities can
prevent adoption.
Emphasise the importance of clearly
conveying the important information,
not producing beautiful artwork.
Limitation Solution

25. Limitations
Storyboards can be time-consuming to
produce.
As above, emphasise clarity, not
artistic ability.
Accept that sometimes storyboards
aren't the right technique for the
project.
Limitation Solution

26. Limitations
Model-driven development of user
interfaces (i.e. Task models, Abstract
user interfaces) can't handle the
informal nature of some design
artifacts such as storyboards, used in
multidisciplinary user interface
development.
The authors propose annotated
storyboards, which can be connected
to other models through an underlying
meta-model.
Limitation Solution

27. Questions/Discussion
· Reliability of Sources?
· Scientific Validity?
· Anecdotal?
· Speed of Progress?
· Bias?

28. References

29. References
Archive.archaeology.org. (1999). Earliest Egyptian Glyphs - Archaeology Magazine Archive. [online] Available at:
https://archive.archaeology.org/9903/newsbriefs/egypt.html [Accessed 20 Apr. 2018].
Babich N. (2017). A Comprehensive Overview of UX Design Deliverables. Adobe Blog. [online]. Available at:
https://theblog.adobe.com/a-comprehensive-overview-of-ux-design-deliverables/ [Accessed: 20 Apr. 18]
Border Crossing Media 92016). UX Techniques: Introduction to Storyboarding. [online] Available at:
https://bordercrossingmedia.com/2016/02/ux-techniques-introduction-to-storyboarding/ [Accessed: 20 Apr. 18]
Damm R, Siang T. (2018). Prototyping: Learn Eight Common Methods and Best Practices. Interaction Design
Foundation. [online] Available at: https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-
methods-and-best-practices [Accessed: 20 Apr. 18]
Digitalevolutions.com. (n.d.). Original Concept Design (OCD). [online]. Available at: http://digital-
evolutions.blogspot.co.uk/2015/11/concept-design-pitch-sheet.html [Accessed: 20 Apr. 18]
Gibbons S. (2017). UX Stories Communicate Designs. Nielsen Norman Group. [online] Available at:
https://www.nngroup.com/articles/ux-stories/ [Accessed: 20 Apr. 18]
Gray D, Brown S, and Macanufo J. (2010) Gamestorming. O`Reilly.

30. References
Greenberg S. Carpendale M, Marquardt N, Buxton B. (2011). Sketching User Experiences: The Workbook. Morgan
Kaufmann Publishers
Haesen M, Van den Bergh J, Jan Meskens, Luyten K, Degrandsart S, Demeyer S, and Coninx K. (2011) Using
Storyboards to Integrate Models and Informal Design Knowledge. In Hussmann H, Meixner G, Zuehlke D (eds.), Model-
Driven Development of Advanced User Interfaces. Springer.
Laubheimer P. (2016). Wireflows: A UX Deliverable for Workflows and Apps. [online] Nielsen Norman Group. Available
at: https://www.nngroup.com/articles/wireflows/ [Accessed 20 Apr. 18]
Marti M. (2017). How to Storyboard Your Game. [online] Gamescrye.com. Available at: http://gamescrye.com/blog/how-
to-storyboard-your-game/ [Accessed: 20 Apr. 18]
Morovián, L. (2018). UX Storyboard Creation: A Complete Guide For Beginners. [online] UX Studio. Available at:
https://uxstudioteam.com/ux-blog/ux-storyboard/ [Accessed 24 Apr. 2018].
Smashing Magazine. (2017). The Role Of Storyboarding In UX Design. [online] Available at:
https://www.smashingmagazine.com/2017/10/storyboarding-ux-design/ [Accessed 20 Apr. 2018].
Spotless. (n.d.). UX Storyboards - 3 Simple UX Design Steps | Spotless. [online] Available at:
https://www.spotless.co.uk/insights/three-tips-for-storyboards/ [Accessed 24 Apr. 2018].

31. References
Storyboard. (n.d.). In: CambridgeDictionary.Org. [online] Cambridge. Available at:
https://dictionary.cambridge.org/dictionary/english/storyboard [Accessed 20 Apr. 2018].
wikiHow. (2018). How to Create a Storyboard. [online] Available at: https://www.wikihow.com/Create-a-Storyboard
[Accessed 20 Apr. 2018].
Wilford, J. (2014). Cave Paintings in Indonesia May Be Among the Oldest Known. [online] Nytimes.com. Available at:
https://www.nytimes.com/2014/10/09/science/ancient-indonesian-find-may-rival-oldest-known-cave-art.html [Accessed 20
Apr. 2018].