Storymapping the User Experience
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Storymapping the User Experience

on

  • 8,051 views

What does a great user experience have in common with a great story? Everything. While creating a user experience that engages, influences, and excites can sometimes seem daunting, crafting a great ...

What does a great user experience have in common with a great story? Everything. While creating a user experience that engages, influences, and excites can sometimes seem daunting, crafting a great story is actually quite quick and easy.

See how simple storytelling techniques can transform your next product, feature, UI, flow, or strategy from good to great. Whether you are creating a product, service, or feature from scratch or improving one for conversion, activation, or engagement, strategic storytelling will help you figure out what you need to do, when, and how you need to do it, so that you get the results you need.

Statistics

Views

Total Views
8,051
Views on SlideShare
6,372
Embed Views
1,679

Actions

Likes
64
Downloads
145
Comments
1

23 Embeds 1,679

http://www.greatnorthelectric.com 710
http://www.pinterest.com 573
https://twitter.com 160
https://donna-lichaw-5yo3.squarespace.com 153
http://www.scoop.it 15
http://lanyrd.com 14
http://www.matiaspaget.com.ar 10
http://uk.pinterest.com 10
https://www.linkedin.com 9
http://fr.pinterest.com 5
http://nl.pinterest.com 3
http://www.linkedin.com 3
http://www.feedspot.com 3
http://honyaku.yahoofs.jp 2
http://no.pinterest.com 1
http://it.pinterest.com 1
http://tr.pinterest.com 1
http://es.pinterest.com 1
http://ru.pinterest.com 1
http://de.pinterest.com 1
http://feedly.com 1
http://www.tumblr.com 1
http://gb.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Storymapping the User Experience Presentation Transcript

  • 1. DONNA LICHAW | GREATNORTHELECTRIC.COM | @DLICHAW STORYMAPPING THE USER EXPERIENCE
  • 2. 2 @dlichaw Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 3. 3 Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 4. A LONG LONG TIME AGO… IN A UNIVERSE FAR AWAY
  • 5. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 6. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 7. North by Northwest storyboard/film comparison one1more2time3.wordpress.com STORYBOARDING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 8. Scenario step Sketch Comments 1. Laura takes a call from Mr. Cowell, who needs to make an appointment for his cat to have a tumor removed. Laura finds him in the client list and opens his record to see detail in the client over- view display area, which shows that Mr. Cowell has three cats, one of whom is flagged for follow-up. cowell,bob cowell,tom find cowell client list workspace fluffy xenaclient 2 1 3 This first sketch draws upon the organizer/workspace pattern and the data model, which indicates that pets are parts of the client record. The “find” field is understood as a placeholder for some way or ways to locate clients. 2. She looks at the pet overview display area, sees that Xena needs surgery, and confirms with Mr. Cowell that the pro- cedure is for Xena. She clicks to create a new ap- pointment. cowell,bob cowell,tom find includes history, current visit, last visit, prior by date fluffy xenaclient cat born 7/1/2001 gray tabby last visit new appt Whoops, better add a toolbar for that “new appointment” button. Notice there’s a little bit of detail about what may be on the screen. The inter- action designer captures an idea for navigating visits, but quickly moves on. 3. She chooses the Uh-oh … what should happen Sample Chapter Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 9. “Opening iTunes Details” transition using basic Post-it Notes. Hinman, Rachel. 2012. ! The Mobile Frontier. New York: Rosenfeld Media. www.rosenfeldmedia.com/books/mobile-design/ Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 10. “Opening iTunes Details” transition using basic Post-it Notes. Hinman, Rachel. 2012. ! The Mobile Frontier. New York: Rosenfeld Media. www.rosenfeldmedia.com/books/mobile-design/ Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 11. FLAT FLOWS LOW CONVERSION LOW ACTIVATION LOW ENGAGEMENT FUNNEL DROPOFF Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 12. STORYBOARDING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 13. STORYBOARDING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 14. STORYBOARDING<— There’s a formula for that Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 15. STORYMAPPING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 16. http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 17. http://www.sundance.tv/series/the-writers-room/photos/the-writers-room-breaking-bad#/9 Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 18. NOT TO BE CONFUSED WITH… Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 19. Jeff Patton – http://www.agileproductdesign.com/blog/the_new_backlog.html AGILE STORY MAPPING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 20. IT’S MORE LIKE… Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 21. http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 22. http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room MAKE THINGS GO BOOM Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 23. ANATOMY OF A STORY https://www.etsy.com/listing/159285790/like-breaking-bad-remember-my-name Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 24. CHARACTERS SUPPORTING ROLES ! GOALS SETTING THE “HERO” Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 25. Beginning Middle End NARRATIVE ARC Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 26. Beginning Middle End NARRATIVE ARC Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 27. Beginning Middle End NARRATIVE ARC Inciting Incident Climax Falling Action Rising Action Exposition Resolution Crisis Journey Chase Search ( ) Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 28. EXPOSITION Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 29. INCITING INCIDENT Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 30. RISING ACTION Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 31. CRISIS Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 32. CLIMAX Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 33. FALLING ACTION Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 34. RESOLUTION Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 35. 6 WORD STORIES “For sale. Baby shoes. Never worn.” ERNEST HEMINGWAY Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 36. UX STORIES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 37. UX STORIES EXERCISE Tell a story about this product using the narrative arc as your structure. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 38. https://www.youtube.com/watch?v=hwFZsoq_FLg Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 39. UX STORIES: SIRI ‣ Exposition: Martin Scorsese in a cab ‣ Inciting Incident: “Another busy day today...Are you serious?” ‣ Rising Action: “Move my...change my...” ‣ Crisis: “How’s the traffic?...Terrible” ‣ Climax: “Driver, cut across!” ‣ Resolution: “I like you, Siri, you’re going places...” Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 40. EPIC STORIES ORIGIN STORIES USAGE STORIES UX STORIES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 41. UX STORIES EPIC STORIES ORIGIN STORIES USAGE STORIES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 42. http://answers.oreilly.com/topic/1864-gamestorming-elevator-pitch/ Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 43. Beginning Middle End EPIC User Problem Value What this means for you Current state of things Goal Competition ( ) Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 44. Beginning Middle End EPIC I don’t love carrying two devices Better than iPod + Cell phone Crazy easy to use! I love my iPod I love my cell phone Music and phone all in one device iPod Cell phone ( ) iPhone Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 45. Beginning Middle End EPIC User Problem Value What this means for you Rising Action Current state of things Goal Competition Journey Chase Search ( ) GOOD FOR UNCOVERING: • HOW A PRODUCT FITS INTO USERS’ LIVES • PRODUCT-MARKET FIT HYPOTHESES • WHAT A PRODUCT (MVP) *IS* ! ! Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 46. UX STORIES EPIC STORIES
 WHAT IS THIS PRODUCT OR FEATURE? 
 WHY SHOULD USERS CARE OR WANT TO USE IT? ORIGIN STORIES
  • 47. EPIC STORIES ORIGIN STORIES USAGE STORIES UX STORIES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 48. Beginning Middle End ORIGIN ! Why Why user should care User takes action How users find the product Who Where Goal Word of mouth Google search App store Channels & touchpoints ( ) (Trigger) Personas Market Homepage Landing pages App store Acquisition Activation Clicks Download Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 49. Beginning Middle End ORIGIN Collecting and sharing is a pain Someone wants to share something visual with me! Sign upHear about Pinterest Collect images Share images Collect something Share something Word of mouth Twitter Email Other Channels & touch-points Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 50. Beginning Middle End ORIGIN ! Why Why user should care User takes action How users find the product Who Where Goal Word of mouth Google search App store Channels & touchpoints ( ) (Trigger) Personas Market Homepage Landing pages App store Acquisition Activation Clicks Download Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 51. Beginning Middle End ORIGIN ! Why? Problem Why user should care User takes action How users find the product Who Where Goal Word of mouth Paid advertising Google search App store Other Channels & touch-points ( ) (Trigger) Personas Market Homepage Landing pages App store Acquisition Activation Clicks Download Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 52. Beginning Middle End ORIGIN ! Why Why user should care User takes action How users find the product Who Where Goal Word of mouth Google search App store Channels & touchpoints ( ) (Trigger) Personas Market Homepage Landing pages App store Acquisition Activation Clicks Download GOOD FOR LANDING PAGE REQUIREMENTS: • MARKETING COPY/ASSETS • SEARCH ENGINE OPTIMIZATION • CALLS TO ACTION Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 53. EPIC STORIES ORIGIN STORIES
 HOW MIGHT USERS FIND US? 
 WHAT VALUE/AFFORDANCES DO WE SHOW? UX STORIES
  • 54. EPIC STORIES ORIGIN STORIES USAGE STORIES UX STORIES
  • 55. Storymapping the User Experience @dlichaw | greatnorthelectric.com INCITING INCIDENT
  • 56. Storymapping the User Experience @dlichaw | greatnorthelectric.com RISING ACTION
  • 57. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 58. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 59. Storymapping the User Experience @dlichaw | greatnorthelectric.com CRISIS
  • 60. Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 61. Storymapping the User Experience @dlichaw | greatnorthelectric.com CLIMAX
  • 62. Storymapping the User Experience @dlichaw | greatnorthelectric.com FALLING ACTION
  • 63. Storymapping the User Experience @dlichaw | greatnorthelectric.com RESOLUTION
  • 64. Beginning Middle End USAGE Be in the know Get a taste of “in the know” My friends are here? We will add your biological and technological distinctiveness to our own. Get started Only 60 seconds Curious N00b Home
 In the know ( ) WTF is this? WTF do I care, again? Storymapping the User Experience @dlichaw | greatnorthelectric.com Resistance is futile.
  • 65. Beginning Middle End USAGE ! Incentive or CTA Experience value
 Make user feel powerful Finish flowScreen-flow Who Where End ( ) eg. logged in “home” Impediment eg. signup
 payment funnel dropoffs (metrics) qualitative mental hurdles GOOD FOR KEY MICRO & MACRO FLOWS: • ONBOARING & FIRST-TIME USE (CONVERSION & ACTIVATION) • PAYMENT & CHECKOUT • LONG-TERM ENGAGEMENT & RETENTION ! Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 66. Beginning Middle End USAGE ! Incentive or CTA Experience value
 Make user feel good Finish flowScreen-flow Who Where End ( ) eg. logged in “home” Impediment eg. signup
 payment funnel drop-offs (metrics) qualitative mental hurdles boredom lack of value Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 67. EPIC STORIES ORIGIN STORIES USAGE STORIES
 HOW SHOULD THIS FLOW, UM, FLOW? UX STORIES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 68. EXERCISE EPIC STORY 
 What is this product or feature? 
 Why should users care or want to use it? ORIGIN STORY 
 How might users find us? 
 What value/affordances do we show? USAGE STORY
 How should this flow, um, flow? Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 69. FORMS AND BEST PRACTICES Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 70. WRITTEN Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 71. ILLUSTRATED Cheng, Kevin. 2012. See What I Mean. New York: Rosenfeld Media. rosenfeldmedia.com/books/comics/ Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 72. AMMIE’S UPCAKES open ud, locally owned small business I'm so glad I wandered in! 1 red velvet cupcake please. Coming right up! Cupcak meanwhile... ty Cupcake City has mastered the Internet. Now they sell cupcakes by the dozen. Your welcome. Check back often for more deals! 1 dozen carrot cupcakes please. Thanks for the Facebook Fan discount! 13,596 likes Record breaking numbers today! One night, Sammie decides to check out her competition on Facebook... ...And realizes that she might no she thought. *ping* ILLUSTRATED Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 73. DIAGRAMMED Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 74. MATRIX Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 75. SUPPORTING Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 76. STRATEGICALLY GAP ANALYSIS SWOT ANALYSIS NEEDS ASSESSMENT CONTENT ASSESSMENT REQUIREMENTS GATHERING http://www.uxmatters.com/mt/archives/2014/02/storymapping-a-macgyver-approach-to-content-strategy-part-1.php
  • 77. http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room Storymapping the User Experience @dlichaw | greatnorthelectric.com
  • 78. THANK YOU. Donna Lichaw @dlichaw greatnorthelectric.com