Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UXA2022 Day 2; Joel Perlgut - The Narrative Design of Everyday Things: Storytelling and Digital Products

uxaustralia
August 26, 2022

UXA2022 Day 2; Joel Perlgut - The Narrative Design of Everyday Things: Storytelling and Digital Products

In a complex and uncertain world, businesses have focused on the importance of 'telling a good story' to cut through the noise.

But how can designers use storytelling to inform their day-to-day work? Not just when crafting presentations or communicating to clients, but within the DNA of our digital products.

In this talk, we'll take proven narrative structures and apply them to the new world of websites, apps and emerging technologies.

uxaustralia

August 26, 2022
Tweet

More Decks by uxaustralia

Other Decks in Design

Transcript

  1. The Narrative Design
    of Everyday Things
    Storytelling and Digital Products

    View full-size slide

  2. 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

    View full-size slide

  3. Joel Perlgut
    UX Designer and Content Strategist
    Avanade, Sydney Studio

    View full-size slide

  4. What does
    narrative
    structure look
    like?
    Exposition
    Climax
    Resolution

    View full-size slide

  5. The Hero’s Journey
    5-Act Structure
    7-Act Structure
    The Story Circle
    The Sparkline

    View full-size slide

  6. The Digital Story Structure Project, Georgia Tech, Prof. Janet Murray, 2018

    View full-size slide

  7. Human’s process their
    experience as a story

    View full-size slide

  8. User’s don’t care about
    products or services.
    They care about how that
    technology makes them
    feels.

    View full-size slide

  9. Designers are storytellers
    But how are we telling those stories?

    View full-size slide

  10. Websites & Apps:
    The Sparkline
    The Narrative Design of…

    View full-size slide

  11. The Sparkline: Persuasive Storytelling
    Duarte Design, 2022

    View full-size slide

  12. The Sparkline: Persuasive Storytelling

    View full-size slide

  13. The Sparkline: Persuasive Storytelling

    View full-size slide

  14. Ebay.com.au
    How can designers think about
    persuasive storytelling?

    View full-size slide

  15. 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

    View full-size slide

  16. Microsites: The Joke
    The Narrative Design of…

    View full-size slide

  17. Swords2guns.com

    View full-size slide

  18. What can jokes teach us about design?

    View full-size slide

  19. 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

    View full-size slide

  20. 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?”

    View full-size slide

  21. ‘Megasites:’
    The Story Circle
    The Narrative Design of…

    View full-size slide

  22. The Endless Scroll… Just One More Click…

    View full-size slide

  23. Dan Harmon’s Story Circle

    View full-size slide

  24. 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

    View full-size slide

  25. Immersive Experiences
    (AR/VR): The Fractal
    The Narrative Design of…

    View full-size slide

  26. What can we learn from
    Immersive Technology?
    Beat Saber, 2019

    View full-size slide

  27. The Medium is the Message
    spatial dimension
    Books Film / TV Websites /
    Video Games
    Immersive
    (AR/VR)

    View full-size slide

  28. A simple story about
    throwing pokéballs at
    cute creatures…

    View full-size slide

  29. The Real Story of Pokémon Go…

    View full-size slide

  30. 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.

    View full-size slide

  31. Her, Spike Jonze, 2013
    The Immersive World of David O’Reilly
    Simulation, Instagram filter, 2019

    View full-size slide

  32. Everything,
    Everywhere,
    All at Once
    Everything, 2017

    View full-size slide

  33. Fractal Story Structure
    Where the fraction, contains the whole

    View full-size slide

  34. Fractal Story Structure
    Where the fraction, contains the whole

    View full-size slide

  35. Storytelling Principles
    for Designers
    The Narrative Design of…

    View full-size slide

  36. 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

    View full-size slide

  37. 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

    View full-size slide

  38. 2. Your design’s story is co-created with your
    user
    The Autership to Co-Authorship Scale

    View full-size slide

  39. 3. Different stories create different
    relationships with your user
    Audience
    Consumer
    User
    Customer
    Player
    Interactor
    Passive Engagement
    Active Co-Creation

    View full-size slide

  40. Designers are storytellers…
    So bring your story to the table

    View full-size slide