1. Esri User Experience Team
Storyboarding for the User Experience:
It’s like building a house
Frank Garofalo
Esri User Experience Team

2. Building a House
• Have a construction crew show up on the job site
and start building a house without blue prints
Image Source: http://www.flickr.com/photos/therefore/18542525/

3. Building a House
• Have a construction crew show up on the job site
and start building a house without blue prints
Do they know what
needs to be built?
Image Source: http://www.flickr.com/photos/therefore/18542525/

4. Building a House
• Meet with an architect first to determine the key
items for the house
Strategy
Image Source: http://www.flad.com/insights/index.php?categoryId=1

5. Building a House
• Draft the workflow
Image Source: http://www.flickr.com/photos/russell_reno/292746654/
Concept

6. Building a House
• Draft the blue prints
Design
Image Source: http://trendyhomeideas.com/2011/07/importance-of-an-architect-and-planning-in-build-houses/

7. Building a House
• Then start building
Image Source: http://www.flickr.com/photos/therefore/18542525/

8. Frank Lloyd Wright quote
• “You can use an eraser on the drafting table or
a sledge hammer on the construction site”
Image Source: http://trendyhomeideas.com/2011/07/importance-of-an-architect-and-planning-in-build-houses/
Image Source: http://www.flickr.com/photos/missdarlyn/6037689040/

9. Storyboarding for UX

10. Levels of Storyboarding
Strategy Problem
Solution
Benefit
Concept
• Focus on the work flow
• Not the interface layout
Design
• Interface wireframes
• Interface design / graphics
• Define High-level concept
• Identify Target-end User(s)
• Problem, Solution, & Benefit
• Collect ideas from Key Stakeholders

11. Levels of Storyboarding
Strategy
• Define High-level concept
• Identify Target-end User(s)
• Problem, Solution, & Benefit
• Collect ideas from Key Stakeholders
Problem
Solution
Benefit

12. Concept
• Focus on the work flow
• Not the interface layout
Levels of Storyboarding

13. Levels of Storyboarding
Design
• Interface wireframes
• Interface design / graphics

14. Levels of Storyboarding
Strategy Problem
Solution
Benefit
Concept
• Focus on the work flow
• Not the interface layout
Design
• Interface wireframes
• Interface design / graphics
• Define High-level concept
• Identify Target-end User(s)
• Problem, Solution, & Benefit
• Collect ideas from Key Stakeholders

15. Levels of Storyboarding
Strategy
Concept
• Focus on the work flow
• Not the interface layout
Design
• Interface wireframes
• Interface design / graphics
• Define High-level concept
• Identify Target-end User(s)
• Problem, Solution, & Benefit
• Collect ideas from Key Stakeholders
Collect Numerous Ideas
Focused
Idea