Storytelling For The Web: Integrate Storytelling in your Design Process

Storytelling
for the Web
Webflow Livestream
June 5, 2024
Integrate storytelling to create
memorable experiences
Chiara Aliotta
Brand Designer and Strategic Storyteller

Who in the world am I?
Ah, that's the great puzzle.
Alice in Wonderland, Lewis Carroll

Th
e Storytelling Process for Designers
How designers can integrate storytelling in their design process.
Storytelling is a Process
BRIEF
the client
DESIGN
the user
DELIVER
the user + the client

The Foundation
First encounter with the client.
Gather all the essential information
to create a comprehensive brief.
Craft the story’s foundation.
Write down the project’s objectives,
scope, and requirements. It’s like the
plot outline that sets the stage for
everything that follows.
BRIEF
BRIEF

05
THE CONTEXT
The rhythm of the story.
06
THE EMOTIONS
+ TONE OF VOICE
The emotional connection
with the audience.
Th
e Fundamentals
of Storytelling
THE PURPOSE
+ RESOLUTIONS
02
The main reason
behind your story
and your protagonist’s
transformation.
THE AUDIENCE
The main protagonist
of your story.
01
03
THE CHARACTERS
The components that the
user engages with.
04
THE INTERACTIONS
The interfaces that
propel the action.

Tell me about your project!
Who is your brand/project for? Audience: Users
Where do you use it? The Context: Platforms / Medium
What is your project about? The Characters: Product / Brand / Service
Why are you designing it? The Purpose + Resolutions: Mission / Vision
How do users interact with it? The Interactions: Functionalities / Features
How should the user feel? The Emotions Tone of Voice: Emotional connection
+

AVAC
Redesign of the organisation’s digital presence

AVAC
Redesign of the organisation’s digital presence
Presentation Article Factsheet PX Wire
Video Newsletter Brochure Blog Post

Building
the Narrative
Start with the user.
Focus on the audience, understanding
their needs, goals, and pain points.
Map out the user journey
as a story.
Storytelling helps us visualize the users’
journey and how they will interact with
our product.
DESIGN

Th
e Structure of a Story
Based on Donald Miller's StoryBrand structure.
Users
What is their
quest?
Who is their
guide?
What plan
did they have?
How would they put
their plan into action?
What did they
achieve?
PROTAGONIST PROBLEM GUIDE PLAN ACTION
SUCCESS
(or failure)
THE PLOT

Th
e Narrative Structure
THE PLOT
SETUP CONFRONTATION RESOLUTION
Based on Aristotle’s three-act structure
INCITING INCIDENT
PLOT POINT 1
MIDPOINT
PLOT POINT 2
CLIMAX

Th
e Narrative Structure for Digital Products
THE PLOT
SETUP CONFRONTATION RESOLUTION
Smart Interface Design Patterns
Designers
Problem
Vitaly Plan
Actions
Success / Failure
Inciting Incident
Plot Point 1
Midpoint
Plot Point 2
Climax

Landing Page for Smart Interface Design Patterns
https://smart-interface-design-patterns.com/
OPENING SCENE
MIDDLE SCENE
End of opening scene
Beginning of middle scene

MIDDLE SCENE

MIDDLE SCENE
End of middle scene

CLOSING SCENE
End of closing scene
Beginning of closing scene
End of middle scene

Present ideas, persuasively.
Storytelling allows us to frame our
concepts in a way that resonates
emotionally, making our proposals more
compelling.
Connect with the end users.
Creating an emotional connection is
what transforms a good design into a
memorable experience.
Create a lasting
impression
DELIVER

MAKE THEM
WANT TO DO
SOMETHING
Th
e Transformative Journey
Understanding the character arc
CHANGE HOW
THEY FEEL
ABOUT SOMETHING
Exploring di
ff
erent aspects of the story
such as characters, challenges, interactions
and emotions.
CHANGE HOW
THEY SEE SOMETHING
THE PROBLEM
Challenges & Desires
RESOLUTION
Solutions & Achievement

Consider your audience
Understanding their goals and needs
DELIVER
CLIENT USERS

The purpose
The why of the story…
Sell or validate a product or service
against others in the market.
To sell
Offer compelling and appealing solutions,
ideas, products, and services that can make
a positive impact on one's life.
To motivate
Present intangible concepts like values
and thinking processes through stories.
To persuade

A Journey of Transformation
Four steps to persuade, “engage” and change “minds” according to Lisa Cron (Story or Die)
MISBELIEF
TRUTH REALISATION
TRANSFORMATION
Inciting Incident
Resolution
Climax
Problem

To persuade the organisation to rebrand
Action Aid Hellas (2021)
MISBELIEF
TRUTH
REALISATION
TRANSFORMATION
Your organisation's communication
style is not distinctive
from that of others.
Our organisation requires
a revised communication
and branding strategy.
We should focus on ways
to distinguish ourselves
from others.
Our approach is unique
and distinct from the rest.
Read the case study: https://tinyurl.com/3fk5mc4n

To motivate investors to fund the product
After App (2021)
MISBELIEF
TRUTH
REALISATION
TRANSFORMATION
What happens if, after departure,
the letter doesn't get executed
or the instructions are unclear?
Our solution comprehensively covers
digital and real-world assets
for complete estate management
and legacy planning.
We should
fi
nd a way
to safeguard our assets.
All my valued possessions
are properly managed
and protected.
Read the case study: https://tinyurl.com/4ust8r97

Consider your audience
Understanding their goals and needs
DELIVER
CLIENT USERS

Forced Connection
Transform the ordinary into extraordinary
THE PROBLEM
SERVICE/PRODUCT
ATTRIBUTES
UNRELATED
ATTRIBUTES

Forced Connection
users' needs
learning fast,
getting the best lessons
in UX/UI, and hungry for
knowledge.
videos set
a friendly and
informal kitchen
Vitaly’s role
experienced
teacher, UX expert,
guide
tools
real-time examples,
blackboard, notes,
video courses,
and slides
Hungry users Kitchen Chef Recipes

Forced Connection

“One of the deep secrets of life is
that all that is really worth the doing
is what we do for others.”
Alice in Wonderland, Lewis Carroll

Th
e Narrative Web
Storytelling applied
to UX/UI design
Available on Domestika.org
Th
e Sunday Tales
Subscribe to my my biweekly
newsletter, to receive it in your inbox
every two Sundays!
https://www.domestika.org/en/courses/4898/chiara_10 https://www.untilsunday.it
Online Course
For Beginner UX Designers and Storytellers
Th
e Sunday Tales Newsletter
Tips and Stories for Strategic Storytellers

To be continued…
There is so much more I'd love to
share with you about storytelling!
Please follow me for the latest insights, on:
Instagram: @UntilSundayAgency
LinkedIn: Chiara Aliotta
Medium: chiara-aliotta.medium.com
www.untilsunday.it

Storytelling For The Web: Integrate Storytelling in your Design Process

Recommended

More Related Content

What's hot (20)

Similar to Storytelling For The Web: Integrate Storytelling in your Design Process (20)

More from Chiara Aliotta (17)

Recently uploaded (20)

Storytelling For The Web: Integrate Storytelling in your Design Process