Designing Around Storytelling - Digital Pond, London 06 Feb 2014

Download Designing Around Storytelling - Digital Pond, London 06 Feb 2014

Post on 11-Aug-2014

14.639 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Slides from my talk around storytelling in design at the Digital Pond meet up on 06 Feb 2014 http://www.meetup.com/The-Digital-Pond/events/159211742/ Stories have played an important part in our societies and development through history. In the last few years it's gained attention as a tool for and important aspect in communication, and rightfully so. But it's also an integral part of the design process and at the Digital Pond I talked about why as well as how we can use it, from the start, during definition and development as well as going forwards.

TRANSCRIPT

  • Designing around storytelling The power of stories & how they can be used in UX design by Anna Dahlstrm | @annadahlstrom @UXFika Digital Pond, 06 Feb 2014 www.flickr.com/photos/katerha/8435321969
  • Once upon a time in a city called Lund... xxxxwww.flickr.com/photos/ulfk/7976687420
  • There where plenty of story time www.flickr.com/photos/excomedia/sets/72157622519563566with/5233990438
  • We travelled through those stories www.flickr.com/photos/conorkeller/7860288604
  • We are as a species addicted to stories. - The Storytelling Animal by Jonathan Gottschall www.flickr.com/photos/namkeng/3209117837
  • Storytelling Storytelling Storytelling
  • Every brand wants to tell their story www.flickr.com/photos/kelstew/3658900542
  • If you cant tell it, you cant sell it. - Peter Guber www.flickr.com/photos/g-ratphotos/3404474275
  • Results repeatedly shows that our attitudes, fears, hopes, and values are strongly influenced by story. In fact, fiction seems to be more effective at changing beliefs than writing that is specifically designed to persuade through argument and evidence." Entering ctional worlds radically alters the way information is processed. - FastCompany, Why storytelling is the ultimate weapon www.flickr.com/photos/g-ratphotos/3404474275
  • Stories as persuasion tools
  • Not just for messaging but also an integral part of the design process www.flickr.com/photos/saucef/7184615025
  • Storytelling is at the heart of everything - Steve Levitt www.flickr.com/photos/g-ratphotos/3404474275
  • There is an element of magic involved www.flickr.com/photos/carlosfpardo/6791950592
  • www.flickr.com/photos/declanjewell/2181100986
  • Now you see me.
  • Javier Perez via http://the-wonderist.com/2013/11/05/how-to-see-things-with-new-eyes
  • Now you dont.
  • Queenie Liaos Wengenn in Wonderland via www.boredpanda.org/wengenn-in-wonderland-sioin-queenie-liao
  • What do we want our users to see? What is the story we want to tell?
  • Where do we want to take them?
  • Historically, stories have always been igniters of action, moving people to do things. - Peter Guber www.flickr.com/photos/g-ratphotos/3404474275
  • Every story takes us on a journey Image via Shutterstock
  • Storytelling can provide powerful call to actions www.flickr.com/photos/piermario/4188959762
  • Stories have the ability to motivate, change and create connections Image via Shutterstock
  • What makes for a good story?
  • The basic structure of a story A beginning A middle The end
  • Dramaturgy knowing how to apply & structure elements to tell a story
  • How a story is told impacts the human experience of its audience Image via Shutterstock
  • Three act structure PLOT POINT ONE inciting incident PLOT POINT TWO mid point climax confronts the main character tries to solve the problem but dont yet have the skills the dramatic question is answered Act one Act two Act three Setup Confrontation Resolution
  • Three act structure - applied to UCD PLOT POINT ONE 2. Starts to consider inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but dont yet have the skills 1. Becomes aware 3. Looks further into it Act one Act two Setup Confrontation climax the dramatic question is answered 5. Takes action / no action Act three Resolution
  • I asked my dad for 3 principles around good storytelling www.flickr.com/photos/perolofforsberg/6691744587
  • 01 Captures the imagination
  • If you can imagine yourself in a situation, its infinitely scarier. - Brad Falchuk www.flickr.com/photos/g-ratphotos/3404474275
  • Users need to be able to relate www.flickr.com/photos/estherase/1292315618
  • We need to understand who they are www.flickr.com/photos/cannedtuna/4852756417
  • I need to understand who has to get what out of the thing I'm designing and I'm only satisfied a visual has been executed well once I'm confident it's telling the right story to the right person in the right way. - Steve Whittington Design Director Dare www.flickr.com/photos/g-ratphotos/3404474275
  • 02 The dynamic of the story
  • What are the events & people that tie it all together www.flickr.com/photos/erin_ryan/2584551310
  • The ever important red thread www.flickr.com/photos/pulpolux/3692396234
  • 03 An element of surprise
  • In general there should be a basic idea of where the story is going, but not for every character. You don't know who's going to die and who's going to start becoming more important. Big picture-wise, theres a basic idea, but you need some surprises too. Its like driving from New York to LA: you know youre going to get to LA, but theres 10 different routes you could take. - Brad Falchuck www.flickr.com/photos/g-ratphotos/3404474275
  • Include an element of surprise & exploration www.flickr.com/photos/conorkeller/4028043294
  • Let users find their way around your content www.flickr.com/photos/conorkeller/3879321839
  • Consider non-linear & new forms of storytelling Image via Shutterstock
  • How do we go about it?
  • It starts with this PLOT POINT ONE 2. Starts to consider inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but dont yet have the skills 1. Becomes aware 3. Looks further into it Act one Act two Setup Confrontation climax the dramatic question is answered 5. Takes action / no action Act three Resolution
  • Feel good Delight Identify key points PLOT POINT ONE 2. Starts to consider inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but dont yet have the skills 3. Looks further into it Act one Act two the dramatic question is answered 5. Takes action / no action Hygiene 1. Becomes aware climax Setup Confrontation Act three Resolution
  • Look at where you want to delight them www.flickr.com/photos/31878512@N06/4945216951/in/photostream
  • And also where the biggest barriers may be Image via Shutterstock
  • Plan for multiple entry & exit points www.flickr.com/photos/danieldslee/6913766642
  • Identify content, functional & interaction elements to addresses the needs www.flickr.com/photos/angietorres/4564135455
  • Ensure there is a good balance www.flickr.com/photos/17207222@N02/5601758478
  • Feel good Delight Not appropriate, or realistic PLOT POINT ONE 2. Starts to consider confronts the main character Hygiene 1. Becomes aware PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but dont yet have the skills 3. Looks further into it climax the dramatic question is answered 5. Takes action / no action inciting incident Act one Setup Act two Confrontation Act three Resolution
  • We cannot be at the top all the time www.flickr.com/photos/alexnormand/5992512756
  • Feel good Delight More realistic PLOT POINT ONE 2. Starts to consider inciting incident confronts the main character PLOT POINT TWO 4. Makes a decision mid point tries to solve the problem but dont yet have the skills 3. Looks further into it Act one Act two the dramatic question is answered 5. Takes action / no action Hygiene 1. Becomes aware climax Setup Confrontation Act three Resolution
  • Delivering the right content at the right time
  • We need to know: What we want to say What we want our users to do
  • Users are different www.robotshop.com/blog/where-is-wall-e-1391
  • Identify content & functionality for each main user
  • Look at how to tailor views based on who the user is & their behaviour Image via Shutterstock
  • Context & prior knowledge plays a key role
  • Tailor messaging & tone of voice www.flickr.com/photos/pgoyette/168076182
  • Consider location & cultural differences www.flickr.com/photos/scary_mary/5700384580
  • Visit intent is likely to vary between these two segments. For example, new visitors are less likely to trust your brand and understand the key benefits to shopping with you. - Econsultancy www.flickr.com/photos/g-ratphotos/3404474275
  • Make use of different ways to capture & engage the user www.flickr.com/photos/snugglepup/5225953124
  • Tell a continuos story with delights along the way www.maxfactor.co.uk
  • Consider & adapt your message across touch points
  • Ensure the message is considered & delivered across devices www.flickr.com/photos/visualpunch/7351572896
  • Content needs to be choreographed to ensure the intended message is preserved on any device and at any width - Trent Walton www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  • A good piece of UX has a narrative and clearly tells a story, or at least part of a story on a particular journey. As a designer - everything I do and make is communicating something to someone. - Steve Whittington Design Director Dare www.flickr.com/photos/g-ratphotos/3404474275
  • Whoever it is for, we always need to sell it www.flickr.com/photos/jox1989/5143301136
  • It all start with Once upon a time... www.flickr.com/photos/snugglepup/3317051065
  • Or maybe Once upon a design... www.flickr.com/photos/snugglepup/3317051065
  • Any questions? www.flickr.com/photos/perolofforsberg/6691744587
  • Thank you @annadahlstrom @UXFika www.annadahlstrom.com www.flickr.com/photos/katerha/8435321969