Slides from my talk at Digital Growth Unleashed in London on the 17 October 2018.
ABSTRACT
In all good stories things happen for a reason. Every prop and character that is present, every line that is spoken and song that is played has a role to play in making the story come together. In this talk Anna takes us on a journey of what we can learn from traditional storytelling methods when it comes to optimising landing pages and how narrative structure is key in ensuring we're telling the right story to the right audience, at the right time.
https://digitalgrowthunleashed.co.uk/agenda/?rmid=session57101#s-session57101
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleashed, London 17 Oct 2018
1. Photo by Daniel McCullough on Unsplash @annadahlstrom
Optimising Landing Pages
Through Narrative Structure
by Anna Dahlström | @annadahlstrom @uxfika
Digital Growth Unleashed, 17 Oct 2018
6. How we tell a story impacts
the human experience of the same
@annadahlstromImage via Shutterstock
7. MORE PERSONAS ON https://uk.pinterest.com/uxfika/personas/ @annadahlstrom
Remember the other side the story
of the conversion equation
8. MORE PERSONAS ON https://uk.pinterest.com/uxfika/personas/ @annadahlstrom
“It wouldn’t matter if your landing page elements are
optimized perfectly, and the page is receiving steady traffic.
If the visitor has no interest in the offer, or if you’re not
targeting them at their current place in the funnel – they
won’t convert no matter how persuasive the page is. ”
- CXL
9. Know your what
and why
https://www.flickr.com/photos/antmcneill/7824200774 http://www.boredpanda.com/funny-fake-book-covers-nyc-subway-prank-scott-rogowsky/
13. Act three
Three act structure
Act one
Setup Resolution
Act two
Confrontation
inciting
incident mid point climax
confronts the main
character
tries to solve the problem but
don’t yet have the skills
the dramatic question is
answered
PLOT POINT ONE PLOT POINT TWO
@annadahlstrom
14. Post..PurchaseConsiderationAwareness
The structure of a typical purchase journey
Setup ResolutionConfrontation
inciting
incident mid point climax
confronts the main
character
tries to solve the problem but
don’t yet have the skills
the dramatic question is
answered
PLOT POINT ONE PLOT POINT TWO
1. Becomes aware
5. Takes action
/ no action
4. Makes a decision
3. Looks further into it
2. Starts to consider
Act three Act one Act two
@annadahlstrom
16. @annadahlstromhttps://www.flickr.com/photos/rhinoneal/4145426172/
A sequence is series of related scenes that are tied together
by location and/ or time and/ or overall intent of the hero/ heroine
and generally only follows one line of action.
Each sequence is a story in and of itself
with a beginning, a middle and an end.
17. Onboarding:
Deciding to sign up → Learning about the app → First use
Making a reservation:
Researching places → Deciding on a place → Making the reservation
@annadahlstrom
18. @annadahlstrom
Awareness Realises need ->
Consideration
Purchase
Need to research ->
Adds to basket ->
Starts to consider ->
Compares ->
Registration -> Checkout ->
Decides to look into it
Makes a decision
Payment -> Confirmation
Act 1: Beginning
What’s the conflict?
Act 2: Middle
What happens next?
Act 3: End
What’s the resolution?
Stage/ Act
22. Structure is about what you’re going to tell your
audience when
@annadahlstrom
23. Photo by John Schnobrich on Unsplash
“ The user experience of landing on a website is often
confusing and overwhelming. Were selling information
to people at the wrong time, in the wrong order. ”
- Kanze, Cinematography in User Experience Design
@annadahlstrom
24. Screenshot UX Collective - Storyframes before wireframes @annadahlstrom
” How would I explain to a
friend, in a conversation or
in an email, this thing/topic/
product/story I am trying to
communicate? ”
- UX Collective
@annadahlstrom
26. https://bigmedium.com/ideas/only-one-deliverable-matters.html
“ I also accompany every page’s
spreadsheet with a list of:
• mindsets that users bring to
these pages
• tasks that the page can
complete for users
• goals that the page must fulfill
for the organization ”
- Josh Clark, big medium
@annadahlstrom
35. Photo by John Schnobrich on Unsplash
“ Great design connect us emotionally to a product.
Within milliseconds, we form opinions that influence
our engagement and understanding of what we see. ”
- Adam Churchill, UIE
@annadahlstrom
36. Mere exposure effect
a psychological phenomenon where people tend to
develop a preference for things or people merely
because they are familiar with them
@annadahlstrom
37. Observe that first moment and
ask yourself the following questions:
What do I notice?
How does this feel?
Is this prototypical?
What can I do?
Source: UIE - The Blink Test
@annadahlstrom
”The Blink Test”
by Leah Buley
38. “ Relevant information is signal
whilst irrelevant information is noise ”
@annadahlstrom
- NN/g
39. https://dribbble.com/shots/1817232-Wireframin
Signpost what’s most important and use a
language that resonates with the user’s
language and mental models.
@annadahlstrom
Use visual hierarchy to help guide the
user through the narrative of the page.
Be clear on not only the purpose of the
page but the purpose of each element and
how it’s presented to the user.
40. Photo by K2_UX on Flickr
“ How users attend to information on a page
depends on their tasks and goals. ”
- NN/g
@annadahlstrom
42. Photo by Jose Lebron on Unsplash
@annadahlstrom
“The cinema is indeed a matter of both:
what’s in and what’s out, not just what’s
in; what’s visible and what’s not visible. In
other words, it’s more than framings and
visual patterns; it’s overtones,
sympathies, hauntings. ”
- Richard Brody, The New Yorker
45. https://bigmedium.com/ideas/only-one-deliverable-matters.html
“ I also accompany every page’s
spreadsheet with a list of:
• mindsets that users bring to
these pages
• tasks that the page can
complete for users
• goals that the page must fulfill
for the organization ”
- Josh Clark, big medium
@annadahlstrom
46. Define views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHome
Header& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
Gallery
Descrip-
tion
Footer
Additional info
Related products
48. Home - large
Header& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2
Features
11 Footer
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
1 Header& Nav
2
Features
10 Footer
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
Header& Nav
Features
Footer
Home - small
Featured
categories
Featured
products
Do the same across screen sizes
49. Break down each module into elements
Home - large
Header& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2
Features
11 Footer
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
1 Header& Nav
2
Features
10 Footer
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
Header& Nav
Features
Footer
Home - small
Featured
categories
Featured
products
50. Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHome
Header& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
Gallery
Descrip-
tion
Additional info
Related products
10
Prod
9
Prod
8
Prod
7
Prod
7
Prod
6
Prod
5
Prod
4
Prod
Footer
6
Prod
5
Prod
4
Prod
3
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod
51. How to step by step work through key pages:
• Define views & key templates
• Break down content further & explore layouts
• Do the same across screen sizes
• Break down each module into elements
• Iterate & refine across views & key templates
@annadahlstrom
1 Header& Nav
2
Features
10 Footer
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
1 Header& Nav
2
Features
11 Footer
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
52. 1. Tell the right story to the right audience
2. Define the bigger picture and the small details
3. Use narrative structure to define the story of the page
4. Define how best to tell the landing page story
5. Clearly choreograph the story of the page/view
@annadahlstrom