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

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

2. @annadahlstrom
www.flickr.com/photos/katerha/8435321969
“ Emotional storytelling, the kind that tugs on your heartstrings,
is 31% more effective than any other type of marketing .”
- Sumer

3. Photo by Daria Nepriakhina on Unsplash
“ Experiences matter. Experiences are journeys. Journeys are designed. ”
- Strategy + business
@annadahlstrom

4. Photo by NEW DATA SERVICES on Unsplash
Every part of a product
or service tells (part of) a story
@annadahlstrom

5. 1.
Tell the right story
to the right audience
@annadahlstrom

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/

10. 2.
Define the bigger picture
and the small details
@annadahlstrom

11. Image via Shutterstock
“ The whole of a story is that
which have a beginning, a middle
and an end ”
- Aristotle
@annadahlstrom

12. Dramaturgy knowing how to apply & structure
elements to tell a story
@annadahlstrom

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

15. @annadahlstrom
The ‘eight sequences’ approach
from the early days of film
https://www.flickr.com/photos/rhinoneal/4145426172/

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

19. 3.
Use narrative structure
to define the story of the page
@annadahlstrom

20. Source: www.khanacademy.org/partner-content/pixar/storytelling/story-structure/v/piab-storystructure @annadahlstrom

21. Source: www.khanacademy.org/partner-content/pixar/storytelling/story-structure/v/piab-storystructure @annadahlstrom

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

25. https://dribbble.com/shots/1817232-Wireframin
The purpose of this page is to…
As a first time visitor* I should be able to…
As a returning visitor* I should be able to…
@annadahlstrom
* If need be break down by persona

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

27. Photo by rawpixel on Unsplash @annadahlstrom
Does the page tell a story
if you strip away all the styling?

28. 4.
Define how best to
tell the landing page story
@annadahlstrom

29. @annadahlstromhttps://www.flickr.com/photos/sfllaw/185059759/
Everything in a scene
is there for a reason

30. Photo by rawpixel on Unsplash
We have a tendency to
jump into solution mode
@annadahlstrom

31. Photo by Laurenz Kleinheider on Unsplash @annadahlstrom
We can only
take in so much

32. The Monkey Business Illusion example
@annadahlstrom

33. @annadahlstrom
The Monkey Business Illusion example

34. Photo by John Schnobrich on Unsplash
It’s the same with
websites & apps
@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

41. 5.
Clearly choreograph the story
of the landing page/ view
@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

43. @annadahlstromScreenshot https://kanze.co/blog/cinematography-in-user-experience-design @annadahlstrom
“ We need to storyboard
how visual elements come
into focus with intention. ”
- Kanze

44. @annadahlstrom@annadahlstrom
“ Content needs to be
choreographed to ensure the
intended message is preserved
on any device and at any width. ”
- Trent Walton

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

47. Break down content further & explore layouts
1 Header& Nav
2 Filter & search
Product listing
1 Header& Nav
2
Gallery
2
Descrip-
tion
8 Footer
3
Additional info
Product page
1 Header& Nav
2
Category
3
Category
4 Category
9
Categ
7
Categ
10 Footer
Categories
7
Prod
6
Categ
5
Categ
1 Header& Nav
2
Features
11 Footer
Home
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
8
Categ
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
19 Footer
7
Prod
6
Prod
5
Prod
4
Prod

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

53. The story of Mailchimp
@annadahlstrom

54. The story of Slack
@annadahlstrom

55. The story of Meet Edgar
@annadahlstrom

56. @annadahlstromPhoto by Fadi Xd on Unsplash
The aim of every story
is to connect emotionally

57. The right story to the right people in the right way
@annadahlstrom

58. www.flickr.com/photos/declanjewell/2181100986 @annadahlstrom

59. Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes @annadahlstrom

60. Photo by rawpixel on Unsplash @annadahlstrom
Who are you telling what,
how and when?
@annadahlstrom

61. Photo by Dylan Gialanella on Unsplash @annadahlstrom
And why?
@annadahlstrom

62. www.flickr.com/photos/katerha/8435321969
Thank you.
Questions?
@annadahlstrom @uxfika
www.annadahlstrom.com

63. www.flickr.com/photos/katerha/8435321969
Thank you.
Questions?
@annadahlstrom @uxfika
www.annadahlstrom.com