Slide 1
Slide 1 text
The Narrative Design
of Everyday Things
Storytelling and Digital Products
Slide 2
Slide 2 text
Today…
01. Introduction
02. The Narrative Design of…
i. Websites & Apps
ii. Microsites
iii. Megasites
iv. Immersive Experiences (AR/VR)
03. Storytelling Principles for Designers
Slide 3
Slide 3 text
Joel Perlgut
UX Designer and Content Strategist
Avanade, Sydney Studio
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
What does
narrative
structure look
like?
Exposition
Climax
Resolution
Slide 6
Slide 6 text
The Hero’s Journey
5-Act Structure
7-Act Structure
The Story Circle
The Sparkline
Slide 7
Slide 7 text
The Digital Story Structure Project, Georgia Tech, Prof. Janet Murray, 2018
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Human’s process their
experience as a story
Slide 10
Slide 10 text
User’s don’t care about
products or services.
They care about how that
technology makes them
feels.
Slide 11
Slide 11 text
Designers are storytellers
But how are we telling those stories?
Slide 12
Slide 12 text
Websites & Apps:
The Sparkline
The Narrative Design of…
Slide 13
Slide 13 text
The Sparkline: Persuasive Storytelling
Duarte Design, 2022
Slide 14
Slide 14 text
The Sparkline: Persuasive Storytelling
Slide 15
Slide 15 text
The Sparkline: Persuasive Storytelling
Slide 16
Slide 16 text
Ebay.com.au
How can designers think about
persuasive storytelling?
Slide 17
Slide 17 text
The Sparkline: Ebay Experience
Eye a
zoomer
wearing
Yeezys
Browse
for
sneakers
online
Compare
prices on
Ebay
Buy new
Reeboks
Non-stop
rain, buy
dehumidifier
Rain
continues,
shoes wet
It feels
like these
sneakers
will never
dry…
The
sneakers
don’t feel
the same
Duarte Design, 2022
Slide 18
Slide 18 text
Microsites: The Joke
The Narrative Design of…
Slide 19
Slide 19 text
Swords2guns.com
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
What can jokes teach us about design?
Slide 22
Slide 22 text
Jerry Seinfeld's Theory of Jokes
01. Set up
02. Punch line
03. Tag
Jerry Seinfeld: How to Write a Joke, New York Times, 2012
Slide 23
Slide 23 text
Guns2Swords.com: Joke Structure
01. Set up: Play on the Bible verse: “Swords to Ploughshares”
02. Punch line: A website that updates this bible verse to the
modern era.
03. Tag: A manifesto titled: “are guns a phallic symbol?”
Slide 24
Slide 24 text
‘Megasites:’
The Story Circle
The Narrative Design of…
Slide 25
Slide 25 text
The Endless Scroll… Just One More Click…
Slide 26
Slide 26 text
Dan Harmon’s Story Circle
Slide 27
Slide 27 text
Dan Harmon’s Story Circle
Feeling bored
Picks up their
phone
Scroll
through the
news feed
Eventually
sharing a
meme with a
friend
The Facebook
Feedback Loop
They laugh
and put down
their phone
They get a
notification
Slide 28
Slide 28 text
Immersive Experiences
(AR/VR): The Fractal
The Narrative Design of…
Slide 29
Slide 29 text
What can we learn from
Immersive Technology?
Beat Saber, 2019
Slide 30
Slide 30 text
The Medium is the Message
spatial dimension
Books Film / TV Websites /
Video Games
Immersive
(AR/VR)
Slide 31
Slide 31 text
A simple story about
throwing pokéballs at
cute creatures…
Slide 32
Slide 32 text
The Real Story of Pokémon Go…
Slide 33
Slide 33 text
When there is no frame,
we look where we please,
act on what we are
compelled to respond to,
and respond to our
environment as it, in
turn, responds to us.
Slide 34
Slide 34 text
Her, Spike Jonze, 2013
The Immersive World of David O’Reilly
Simulation, Instagram filter, 2019
Slide 35
Slide 35 text
Everything,
Everywhere,
All at Once
Everything, 2017
Slide 36
Slide 36 text
Fractal Story Structure
Where the fraction, contains the whole
Slide 37
Slide 37 text
Fractal Story Structure
Where the fraction, contains the whole
Slide 38
Slide 38 text
Storytelling Principles
for Designers
The Narrative Design of…
Slide 39
Slide 39 text
3 Storytelling Principles for UX
01. Different technologies demand different approaches to story
02. Your design’s story is co-created with your user
03. Different stories create different relationships with your user
Slide 40
Slide 40 text
1. Different technologies demand different
approaches to story
The Story Circle
Megasites
linear, repeating
The Sparkline
Websites
Linear, finite
The Fractal
Immersive Technology
non-linear, repeating or finite
Slide 41
Slide 41 text
2. Your design’s story is co-created with your
user
The Autership to Co-Authorship Scale
Slide 42
Slide 42 text
3. Different stories create different
relationships with your user
Audience
Consumer
User
Customer
Player
Interactor
Passive Engagement
Active Co-Creation
Slide 43
Slide 43 text
Designers are storytellers…
So bring your story to the table
Slide 44
Slide 44 text
Thank You!