SlideShare a Scribd company logo
S T O R Y B O A R D S
S T O R Y T E L L I N G F O R P R O D U C T D E S I G N
PAUL HONG
Director of Design Strategy
ServiceNow
PaulHongUX
HANDS-ON STORYBOARDING
STORIES ARE POWERFUL
COMMON STORY PATTERNS
Agenda
S T O R Y B O A R D S
INTRO TO STORYBOARDS
Storyboards
Describes a sequence of actions and interactions
SEQUENTIAL
What Are They?
S T O R Y B O A R D S
Uses images to communicate
VISUAL
Images can convey context, arrangement, characters, and
action all at once
INFORMATION RICH
Prototypes the real thing before pursuing it further
“LIGHTWEIGHT”
Make a Storyboard
E X E R C I S E ( 5 - 1 0 M i n u t e s )
As shown by blue lines
FOLD INTO SIXTHS
Draw scenes to depict a typical experience with a product or
service
DRAW
Grocery store
Going to the gym
Downloading an app
IDEAS
Make a Storyboard
HOW DID THAT GO?
Stories Are Powerful
Stories Hack Our Brains
S T O R I E S A R E P O W E R F U L
ATTENTION NARRATIVE TRANSPORT
We resonate with characters,
feel what they feel, and care
what happens
Hold our attention for
prolonged periods of time
Created by Adrien Coquetfrom the Noun Project
Created by hayatstudio10from the Noun Project
Attention
S T O R I E S A R E P O W E R F U L
FLEETING METABOLICALLY COSTLY
We use direct attention
sparingly most of the time
because it takes a lot of energy
to sustain
Like a spotlight, direct attention
can only focus narrowly on
something. If it’s not
interesting, we move on
quickly.
Created by Moxillafrom the Noun Project
Created by Nhorfrom the Noun Project
Narrative Transport
S T O R I E S A R E P O W E R F U L
EMOTIONAL RESONANCE
EMOTIONAL SIMULATION
To forecast whether a stranger
is aggressive or kind, dangerous
or safe, friend or foe.
We feel what they feel. We care.
We want to know what happens
to them
Created by Royyan Razkafrom the Noun Project
TRUST
We can form rapid relationships
with others to work together,
find friends, find love
Created by Andreas Vögelefrom the Noun Project
OXYTOCIN
Implicated in empathy,
bonding, kindness, love*
Created by LUTFI GANI AL ACHMADfrom the Noun Project
EMPATHY
Stories Are Powerful
GRAB AND KEEP ATTENTION
TRIGGER EMPATHY
Story Patterns
Universal stories shapes as emotional journey maps
AI STUDY
Designer: Maya Eilam, www.mayaeilam.com
Sources: A Man without a Country and Palm Sunday by Kurt Vonnegut
EIGHT CLASSIC SHAPES
Emotional Shapes
Rags to Riches (rise)
S T O R Y P A T T E R N S
Riches to Rags (fall)
Man in a Hole (fall then rise)
Icarus (rise then fall)
Cinderella (rise then fall then rise)
Oedipus (fall then rise then fall)
The Atlantic.com: https://www.theatlantic.com/technology/archive/2016/07/the-
six-main-arcs-in-storytelling-identified-by-a-computer/490733/
(1904 – 1987)
Mythologist and writer
Joseph Campbell
Monomyth
S T O R Y P A T T E R N S
Source: Article by Francisco Inchauste for Smashing Magazine
https://www.smashingmagazine.com/2010/01/better-user-experience-
using-storytelling-part-one/
(1818 – 1895)
Writer
Gustav Freytag
Freytag Pyramid
S T O R Y P A T T E R N S
Story Patterns
TIME TESTED BLUEPRINTS
How We Do It
S T O R Y B O A R D S
BEGINNING
NARRATIVE
Exposition
MIDDLE END
1
Inciting
Incident
2
Key
Moment
3
Key
Moment
4
Climax
5
Denouement
6
1 2 3
4 5 6
STORYBOARD
How We Do It
S T O R Y B O A R D S
BEGINNING
Exposition
MIDDLE END
1
1
SET THE STAGE
Key players
Important context
Goodie, Baddie
How We Do It
S T O R Y B O A R D S
BEGINNING MIDDLE END
Inciting
Incident
2
2
INCIDENT
Problem
Need
Event
How We Do It
S T O R Y B O A R D S
BEGINNING MIDDLE END
Key
Moment
3
Key
Moment
4
Climax
5
3
4 5
KEY MOMENTS
Drive to ultimate value
Each builds on prior to Climax
How We Do It
S T O R Y B O A R D S
BEGINNING MIDDLE END
Denouement
6
6
Denouement
Problem solved
Happy camper
Make a Storyboard
E X E R C I S E ( 1 0 m i n u t e s )
As shown by blue lines
FOLD INTO SIXTHS
Think of the 6 points in the narrative structure. What will you
depict for each?
MAP OUT THE NARRATIVE
Try taking your original storyboard and thinking of how you
could make it a great experience
IDEAS
Depict each of the 6 points in the narrative in the
corresponding cells. Caption each cell.
DRAW THE STORYBOARD
BEGINNING
Exposition
MIDDLE END
1
Inciting
Incident
2
Key
Moment
3
Key
Moment
4
Climax
5
Denouement
6
1 2 3
4 5 6
Make a Storyboard
HOW DID THAT GO?
Key Uses
S T O R Y B O A R D S
IDEATION ALIGNMENT
Get product management and
development/engineering on
common vision
Exploring and devising
solutions
Created by Aiden Iconsfrom the Noun Project
Created by Krisadafrom the Noun Project
Created by Adrien Coquetfrom the Noun Project
EMPATHY
Appreciate the human element:
people, context, and needs
PITCH
Concise elevator pitch for a
concept
Created by Adrien Coquetfrom the Noun Project
Created by Yugudesignfrom the Noun Project
VALIDATION
Validate direction with
customers and users
Denouement
S T O R Y B O A R D S
STORIES ARE POWERFUL
COMMON STORY PATTERNS
WORK STORYBOARDS INTO YOUR WORK
Q & A
PAUL HONG
Director of Design Strategy
ServiceNow
PaulHongUX
Attributions & Sources
Slide 3 (left to right, top down)
1. Storyboard from Walt Disney Animation “Alice In Wonderland”
2. ac4d.com by Chelsea Hostetter
3. https://www.researchgate.net/figure/An-Example-of-a-Storyboard_fig2_326287202
4. https://docs.idew.org/internet-of-things-project/iot-project-outline/3-5-create-storyboard-for-solution
5. https://elearnhub.org/what-is-a-storyboard/
6. Created by Nick Sung for Airbnb
Slide 4
https://www.storyboardthat.com/storyboards/rich_rosas/ux-storyboard
Slide 9
Spotlight by Moxilla from the Noun Project
vital sign by Nhor from the Noun Project
Slide 10
friendship by Royyan Razka from the Noun Project
stranger by Marie Van den Broeck from the Noun Project
trust by Andreas Vögele from the Noun Project
Slide 24
Idea by Aiden Icons from the Noun Project
Vision by Krisada from the Noun Project
Heart by Yugudesign from the Noun Project
validation by Adrien Coquet from the Noun Project
presentation by Adrien Coquet from the Noun Project
Attributions and sources for images not attributed on slides themselves

More Related Content

Similar to Power of Storyboards - Paul Hong | SDXD July 2019 Event

Storytelling XL 2019
Storytelling XL 2019Storytelling XL 2019
Storytelling XL 2019
Tim Verheyden
 
Inclusive Interaction Design
Inclusive Interaction DesignInclusive Interaction Design
Inclusive Interaction Design
RojinMoghadam
 
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
See3 Communications
 
Whats the story? Story strategy for products
Whats the story? Story strategy for productsWhats the story? Story strategy for products
Whats the story? Story strategy for products
Hollie Lubbock
 
StoryScaping(tm) Short Version
StoryScaping(tm) Short VersionStoryScaping(tm) Short Version
StoryScaping(tm) Short VersionGaston Legorburu
 
Deconstructing Disruptive Technology in Advertising
Deconstructing Disruptive Technology in AdvertisingDeconstructing Disruptive Technology in Advertising
Deconstructing Disruptive Technology in Advertising
bebensiganteng
 
Meeting Perspectives - session 1 - Albert Boswijk
Meeting Perspectives - session 1 - Albert Boswijk Meeting Perspectives - session 1 - Albert Boswijk
Meeting Perspectives - session 1 - Albert Boswijk
MPIAssistant
 
EMEC2019 Mpi Value Creation by Experience Events*
EMEC2019 Mpi Value Creation by Experience Events*  EMEC2019 Mpi Value Creation by Experience Events*
EMEC2019 Mpi Value Creation by Experience Events*
European Centre for Experience and Transformation Economy
 
TED Ads Worth Spreading Report 2013
TED Ads Worth Spreading Report 2013TED Ads Worth Spreading Report 2013
TED Ads Worth Spreading Report 2013
Ishraq Dhaly
 
7 Storytelling techniques used by the most inspiring TED presenters
7 Storytelling techniques used by the most inspiring TED presenters 7 Storytelling techniques used by the most inspiring TED presenters
7 Storytelling techniques used by the most inspiring TED presenters
SpeakerHub
 
0817 folio
0817 folio0817 folio
0817 folio
Jim Drummond
 
Your Rotary Story: Your Secret Weapon
Your Rotary Story: Your Secret WeaponYour Rotary Story: Your Secret Weapon
Your Rotary Story: Your Secret Weapon
Rotary International
 
Sebastian Gier - IT Arena Conference
Sebastian Gier - IT Arena ConferenceSebastian Gier - IT Arena Conference
Sebastian Gier - IT Arena Conference
Sebastian Gier
 
Storytelling Inspiration - Cubo - 2016
Storytelling Inspiration - Cubo - 2016Storytelling Inspiration - Cubo - 2016
Storytelling Inspiration - Cubo - 2016
Fabricio Dore
 
Getting your story straight (500 start ups)
Getting your story straight (500 start ups)Getting your story straight (500 start ups)
Getting your story straight (500 start ups)danieljeevanej
 
Getting your story straight
Getting your story straightGetting your story straight
Getting your story straight
danieljeevanej
 
Running head RESPONSE .docx
Running head RESPONSE                                            .docxRunning head RESPONSE                                            .docx
Running head RESPONSE .docx
jeanettehully
 
Running head RESPONSE .docx
Running head RESPONSE                                            .docxRunning head RESPONSE                                            .docx
Running head RESPONSE .docx
todd521
 
Backpack Reporting (Updated)
Backpack Reporting (Updated)Backpack Reporting (Updated)
Backpack Reporting (Updated)
Steve Johnson
 
[Interaction 18] From Blank Page to World Stage
[Interaction 18] From Blank Page to World Stage[Interaction 18] From Blank Page to World Stage
[Interaction 18] From Blank Page to World Stage
Cheryl Platz
 

Similar to Power of Storyboards - Paul Hong | SDXD July 2019 Event (20)

Storytelling XL 2019
Storytelling XL 2019Storytelling XL 2019
Storytelling XL 2019
 
Inclusive Interaction Design
Inclusive Interaction DesignInclusive Interaction Design
Inclusive Interaction Design
 
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
Sight, Sound & Motion: Video Storytelling and Using Video for Advanced Messag...
 
Whats the story? Story strategy for products
Whats the story? Story strategy for productsWhats the story? Story strategy for products
Whats the story? Story strategy for products
 
StoryScaping(tm) Short Version
StoryScaping(tm) Short VersionStoryScaping(tm) Short Version
StoryScaping(tm) Short Version
 
Deconstructing Disruptive Technology in Advertising
Deconstructing Disruptive Technology in AdvertisingDeconstructing Disruptive Technology in Advertising
Deconstructing Disruptive Technology in Advertising
 
Meeting Perspectives - session 1 - Albert Boswijk
Meeting Perspectives - session 1 - Albert Boswijk Meeting Perspectives - session 1 - Albert Boswijk
Meeting Perspectives - session 1 - Albert Boswijk
 
EMEC2019 Mpi Value Creation by Experience Events*
EMEC2019 Mpi Value Creation by Experience Events*  EMEC2019 Mpi Value Creation by Experience Events*
EMEC2019 Mpi Value Creation by Experience Events*
 
TED Ads Worth Spreading Report 2013
TED Ads Worth Spreading Report 2013TED Ads Worth Spreading Report 2013
TED Ads Worth Spreading Report 2013
 
7 Storytelling techniques used by the most inspiring TED presenters
7 Storytelling techniques used by the most inspiring TED presenters 7 Storytelling techniques used by the most inspiring TED presenters
7 Storytelling techniques used by the most inspiring TED presenters
 
0817 folio
0817 folio0817 folio
0817 folio
 
Your Rotary Story: Your Secret Weapon
Your Rotary Story: Your Secret WeaponYour Rotary Story: Your Secret Weapon
Your Rotary Story: Your Secret Weapon
 
Sebastian Gier - IT Arena Conference
Sebastian Gier - IT Arena ConferenceSebastian Gier - IT Arena Conference
Sebastian Gier - IT Arena Conference
 
Storytelling Inspiration - Cubo - 2016
Storytelling Inspiration - Cubo - 2016Storytelling Inspiration - Cubo - 2016
Storytelling Inspiration - Cubo - 2016
 
Getting your story straight (500 start ups)
Getting your story straight (500 start ups)Getting your story straight (500 start ups)
Getting your story straight (500 start ups)
 
Getting your story straight
Getting your story straightGetting your story straight
Getting your story straight
 
Running head RESPONSE .docx
Running head RESPONSE                                            .docxRunning head RESPONSE                                            .docx
Running head RESPONSE .docx
 
Running head RESPONSE .docx
Running head RESPONSE                                            .docxRunning head RESPONSE                                            .docx
Running head RESPONSE .docx
 
Backpack Reporting (Updated)
Backpack Reporting (Updated)Backpack Reporting (Updated)
Backpack Reporting (Updated)
 
[Interaction 18] From Blank Page to World Stage
[Interaction 18] From Blank Page to World Stage[Interaction 18] From Blank Page to World Stage
[Interaction 18] From Blank Page to World Stage
 

Recently uploaded

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
TeeFusion
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 

Recently uploaded (20)

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 

Power of Storyboards - Paul Hong | SDXD July 2019 Event

  • 1. S T O R Y B O A R D S S T O R Y T E L L I N G F O R P R O D U C T D E S I G N PAUL HONG Director of Design Strategy ServiceNow PaulHongUX
  • 2. HANDS-ON STORYBOARDING STORIES ARE POWERFUL COMMON STORY PATTERNS Agenda S T O R Y B O A R D S INTRO TO STORYBOARDS
  • 4. Describes a sequence of actions and interactions SEQUENTIAL What Are They? S T O R Y B O A R D S Uses images to communicate VISUAL Images can convey context, arrangement, characters, and action all at once INFORMATION RICH Prototypes the real thing before pursuing it further “LIGHTWEIGHT”
  • 5. Make a Storyboard E X E R C I S E ( 5 - 1 0 M i n u t e s ) As shown by blue lines FOLD INTO SIXTHS Draw scenes to depict a typical experience with a product or service DRAW Grocery store Going to the gym Downloading an app IDEAS
  • 6. Make a Storyboard HOW DID THAT GO?
  • 8. Stories Hack Our Brains S T O R I E S A R E P O W E R F U L ATTENTION NARRATIVE TRANSPORT We resonate with characters, feel what they feel, and care what happens Hold our attention for prolonged periods of time Created by Adrien Coquetfrom the Noun Project Created by hayatstudio10from the Noun Project
  • 9. Attention S T O R I E S A R E P O W E R F U L FLEETING METABOLICALLY COSTLY We use direct attention sparingly most of the time because it takes a lot of energy to sustain Like a spotlight, direct attention can only focus narrowly on something. If it’s not interesting, we move on quickly. Created by Moxillafrom the Noun Project Created by Nhorfrom the Noun Project
  • 10. Narrative Transport S T O R I E S A R E P O W E R F U L EMOTIONAL RESONANCE EMOTIONAL SIMULATION To forecast whether a stranger is aggressive or kind, dangerous or safe, friend or foe. We feel what they feel. We care. We want to know what happens to them Created by Royyan Razkafrom the Noun Project TRUST We can form rapid relationships with others to work together, find friends, find love Created by Andreas Vögelefrom the Noun Project OXYTOCIN Implicated in empathy, bonding, kindness, love* Created by LUTFI GANI AL ACHMADfrom the Noun Project EMPATHY
  • 11. Stories Are Powerful GRAB AND KEEP ATTENTION TRIGGER EMPATHY
  • 13. Universal stories shapes as emotional journey maps AI STUDY Designer: Maya Eilam, www.mayaeilam.com Sources: A Man without a Country and Palm Sunday by Kurt Vonnegut EIGHT CLASSIC SHAPES Emotional Shapes Rags to Riches (rise) S T O R Y P A T T E R N S Riches to Rags (fall) Man in a Hole (fall then rise) Icarus (rise then fall) Cinderella (rise then fall then rise) Oedipus (fall then rise then fall) The Atlantic.com: https://www.theatlantic.com/technology/archive/2016/07/the- six-main-arcs-in-storytelling-identified-by-a-computer/490733/
  • 14. (1904 – 1987) Mythologist and writer Joseph Campbell Monomyth S T O R Y P A T T E R N S Source: Article by Francisco Inchauste for Smashing Magazine https://www.smashingmagazine.com/2010/01/better-user-experience- using-storytelling-part-one/
  • 15. (1818 – 1895) Writer Gustav Freytag Freytag Pyramid S T O R Y P A T T E R N S
  • 17. How We Do It S T O R Y B O A R D S BEGINNING NARRATIVE Exposition MIDDLE END 1 Inciting Incident 2 Key Moment 3 Key Moment 4 Climax 5 Denouement 6 1 2 3 4 5 6 STORYBOARD
  • 18. How We Do It S T O R Y B O A R D S BEGINNING Exposition MIDDLE END 1 1 SET THE STAGE Key players Important context Goodie, Baddie
  • 19. How We Do It S T O R Y B O A R D S BEGINNING MIDDLE END Inciting Incident 2 2 INCIDENT Problem Need Event
  • 20. How We Do It S T O R Y B O A R D S BEGINNING MIDDLE END Key Moment 3 Key Moment 4 Climax 5 3 4 5 KEY MOMENTS Drive to ultimate value Each builds on prior to Climax
  • 21. How We Do It S T O R Y B O A R D S BEGINNING MIDDLE END Denouement 6 6 Denouement Problem solved Happy camper
  • 22. Make a Storyboard E X E R C I S E ( 1 0 m i n u t e s ) As shown by blue lines FOLD INTO SIXTHS Think of the 6 points in the narrative structure. What will you depict for each? MAP OUT THE NARRATIVE Try taking your original storyboard and thinking of how you could make it a great experience IDEAS Depict each of the 6 points in the narrative in the corresponding cells. Caption each cell. DRAW THE STORYBOARD BEGINNING Exposition MIDDLE END 1 Inciting Incident 2 Key Moment 3 Key Moment 4 Climax 5 Denouement 6 1 2 3 4 5 6
  • 23. Make a Storyboard HOW DID THAT GO?
  • 24. Key Uses S T O R Y B O A R D S IDEATION ALIGNMENT Get product management and development/engineering on common vision Exploring and devising solutions Created by Aiden Iconsfrom the Noun Project Created by Krisadafrom the Noun Project Created by Adrien Coquetfrom the Noun Project EMPATHY Appreciate the human element: people, context, and needs PITCH Concise elevator pitch for a concept Created by Adrien Coquetfrom the Noun Project Created by Yugudesignfrom the Noun Project VALIDATION Validate direction with customers and users
  • 25. Denouement S T O R Y B O A R D S STORIES ARE POWERFUL COMMON STORY PATTERNS WORK STORYBOARDS INTO YOUR WORK
  • 26. Q & A PAUL HONG Director of Design Strategy ServiceNow PaulHongUX
  • 27. Attributions & Sources Slide 3 (left to right, top down) 1. Storyboard from Walt Disney Animation “Alice In Wonderland” 2. ac4d.com by Chelsea Hostetter 3. https://www.researchgate.net/figure/An-Example-of-a-Storyboard_fig2_326287202 4. https://docs.idew.org/internet-of-things-project/iot-project-outline/3-5-create-storyboard-for-solution 5. https://elearnhub.org/what-is-a-storyboard/ 6. Created by Nick Sung for Airbnb Slide 4 https://www.storyboardthat.com/storyboards/rich_rosas/ux-storyboard Slide 9 Spotlight by Moxilla from the Noun Project vital sign by Nhor from the Noun Project Slide 10 friendship by Royyan Razka from the Noun Project stranger by Marie Van den Broeck from the Noun Project trust by Andreas Vögele from the Noun Project Slide 24 Idea by Aiden Icons from the Noun Project Vision by Krisada from the Noun Project Heart by Yugudesign from the Noun Project validation by Adrien Coquet from the Noun Project presentation by Adrien Coquet from the Noun Project Attributions and sources for images not attributed on slides themselves