1. Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com
IS6117 Electronic Business Development Project Lecture 6: Storyboarding and Wireframes
Rob Gleasure

2. IS6117 Today’s session Online discussion
From Use Cases to Storyboarding
From Sketching to Wireframes

3. The next next impossible problem
Having identified a promising idea to take forward, we now need to flesh out the imagined future world
We need to think through the details of the new interaction in a way that is thorough, unambiguous, and relatable
We want to have a comprehensive user-facing account of every step without getting bogged down in technical details
We want to do this in a way that appeals to our senses and encourages us to imagine the experience of the new interaction

4. Why Storyboarding?
Just as we analysed existing interactions (the ‘as-is’) according to journeys, so we want to imagine future worlds (the ‘to-be’) as systems-in-motion
The as-is tends to be pretty tangible (after all, it exists already).
The to-be tends to be cloudier, more ambiguous, and full of missing details or contrasting working assumptions. Storyboards allow us to
Stay user/journey-centred in our design
Communicate among multiple stakeholder groups
Abstract away from operational technical details
Prioritise key functions for development and testing

5. Any Questions on Use Cases?
CARPARK
Enter carpark
Exit
carpark
Resolve card issues
Driver
Security staff
Query opening hours

6. What is Storyboarding?
Storyboarding originated as a technique for directors in the motion picture industry
Visualises new interactions for each use case in a graphic-novel format, often with very rough sketches to explain how a proposed interaction will work
The emphasis is on speed, shared understanding, and thinking things through
Stories only need to be as sophisticated or well-drawn as is necessary to meet these goals

7. Comic strip-level fidelity
Image from xkcd.com

8. How to create Storyboards?
You’re basically going to draw a comic strip, most likely with stickpeople
Use speech/thought bubbles, captions, narration, movement lines, etc. to explain what’s happening
Avoid focusing on screens/interfaces (that will come in the next stage)
Remember to capture important things people think and feel, as well as what they say and do

9. How to create Storyboards (continued)?
Pick a use case and make note of each of the actors identified
Start at the beginning and walk through each step, using the first frame or two to set context and the last one to show outcomes
Don’t get stuck in the details - many people use a thick pen to prevent writing too much or adding too many small notes
Roughly two ways to do this
Divide a page into panels, sketching as you go
Write each frame on a post-it note, so you can move them around freely

10. Example Storyboards
Image from

11. Example Storyboards (continued)
Image from

12. How to create Storyboards (continued)?
An alternative approach is to walk through the physical story and take pictures at each critical point
You can then doodle on these to show how things will look once your new interaction is in place, e.g. by drawing interfaces into new interaction
This one kind of blurs the line between storyboarding, wireframing, and sketching
Some people love the parsimony this provides
Others find it defeats the purpose of the exercise by slowing down the process and entangling design assumptions at different stages of the process before they have matured

13. When to use Storyboarding?
These are mainly used during prototyping as a way of fleshing out ideas quickly
Some people also use them to analyse the as-is, due the ability to create rapid visual summaries
General preference to do this only when the process underlying an as-is interaction is poorly understood
Even then, it’s arguably better to add visual stories to the journey map, so that you don’t sacrifice deeper analysis

14. Where to use Storyboarding
Storyboarding brings together people from all backgrounds at the earliest point in prototyping
This is the best time to resolve arguments or conflicting preferences for subsequent development
It may also prompt a return to ideation, as the details of a new interaction bring additional limitations to light

15. The next next impossible problem
Having told the story of the new-and-improved imagined future world, we must now figure out how the technology actually enables the new story
We need to design the interface that links user behaviour to the underlying technology
We want this stage to output something that can be implemented with actual code with little or no confusion
We want to do this in the quickest way possible
A prototype =/= an early-stage development of the system

16. Why Sketching?
Sketching is basically just the rapid construction of low-fidelity paper prototypes
These vary in terms of quality but you generally want to move as quickly as possible so you can cycle through ideas
The ultimate goal is two-part
Identify and validate an interface layout (how the items within a screen relate to one another)
Identify and validate an interface network (how items on different screens relate to one another)
Fail fast, fail early, fail better

17. What is Sketching?
Generally involves a pen and paper or something else that allows ideas to be explored and thrown away at minimal cost
May also involve large blank pages (or spaces) and post-it notes, where individual screens are likely to contain multiple different sources or categories of information
This allows parts of the page to be moved around for trial-and-error-style exploration
The idea is not to show off your drawing skills, it’s to find a structure that best matches the needs of the interaction

18. How to Create Sketches
Step 1: Divide up a piece of paper or grab a 6-up template (see next slide for example)
Take 10 minutes or so to sketch out 6 different ways an interface could work
Focus on finding different ways to handle the elements that make you least confident
Step 2: Pick the design you like most and refine it on a separate sheet
Take your time on this one and feel free to think about shapes, curves, line-weight

19. How to Create Sketches (a template)

20. How to Create Sketches (an example)
Image from

21. Why Wireframing?
Wireframing occurs as we move beyond our initial sketches to a more realistic rendering of each interface
Wireframing moves beyond the initial exploration of different layouts in sketching to something that can simulate interaction, albeit without any actual dynamic functionality or back-end
The ultimate goal is a set of interfaces that can be translated to code without any missing front-end details

22. What is Wireframing?
Wireframes are visualisations of the proposed interface that match the structure of the intended system
They may or may not also attempt to simulate the look and feel of the intended system
Wireframes can be drawn by hand, however most design teams prefer to move to some digital rendering at this point
We’re decreasingly concerned about constructing rapid alternatives and being willing to throw away ideas
We’re increasingly concerned about having a precise representation of our new system

23. How to create Wireframes?
There are many tools available
Check out Andrew Pope’s list at
One of the most common is Balsamiq
Download at
Tutorial at
Some learning overhead but very powerful once you get the hang of it
Has the advantage of looking like a wireframe

24. How to create Wireframes (continued)?
Another simple option is to build off simple static templates
Nice examples at
These can then be set as a background for something like Visio, which has many components already built in for wireframes
Go File  New  Software and Database  Wireframes

25. How to create Wireframes?
Simple background templates from smashingmagazine

26. How to create Wireframes (continued)?
If you’re looking for inspiration, you may want to have a look at some existing websites, apps, etc.
One option is to use the inspector on your browser
Another is to use something like Wirify (
Add it to your bookmark
Find a website you like
Click the bookmark while on that website

27. When to use Sketching and Wireframing?
Sketching and Wireframing are used in the advanced stages of prototyping
They allow ideas to be demonstrated and feedback to be obtained from users, who can be shown how the new system will link together different functions
This blurs the line between prototyping and testing a little
The main difference is sketches and wireframes are a disposable means of identifying whether and how something can be done, with less emphasis on whether it works

28. Where to use Sketching and Wireframing?
Sketching and Wireframing should be used to resolve all front-end ambiguities between
Members of the design team
The design team and potential users
It’s rare that at least some users aren’t a little surprised when they see the wireframes
Done well, this stage irons out the last of the ambiguity and miscommunication

29. Reading
Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard: telling a story about use and context over time. Interactions, 19(1), 64–69.
Interaction Design Foundation: The Basics of User Experience Design (
Löwgren, J., & Stolterman, E. (2007). Thoughtful Interaction Design: A Design Perspective on Information Technology. MIT Press, USA.