Upload
donna-lichaw
View
6.384
Download
7
Embed Size (px)
DESCRIPTION
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.
Citation preview
DONNA LICHAW | GREATNORTHELECTRIC.COM | @DLICHAW
STORYMAPPINGTHE USER EXPERIENCE
2
@dlichaw
Storymapping the User Experience @dlichaw | greatnorthelectric.com
3Storymapping the User Experience @dlichaw | greatnorthelectric.com
A LONG LONG TIME AGO… IN A UNIVERSE FAR AWAY
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Storymapping the User Experience @dlichaw | greatnorthelectric.com
North by Northwest storyboard/film comparison one1more2time3.wordpress.com
STORYBOARDING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Framew
ork
456
Designing for the Digital Age: Creating Human-Centered Products and Services
Table 16.8. Sketching from a scenario.
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,bobcowell,tom
findcowell
client list workspace
fluffy xenaclient
2
13
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,bobcowell,tom
find
includes history, current visit,last visit, prior by date
fluffy xenaclientcat born 7/1/2001gray tabbylast 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 procedure type in the appointment parameters area. In the best appoint-ment display, the system shows the next several non-urgent appointments for Dr. Harvey, Xena’s usual vet, when the sur-gery and hospital space required for the procedure are also available. She suggests the first couple of dates to Mr. Cowell,
appt forxenatypesurgerywithharvey
tabs within tabs
calendarbest
apptsclients
best
other
Uh-oh … what should happen when that button is clicked? Does it make sense for a cal-endar to live as a tab inside the client record? It seems more like a global tool, so the team decides to have a client screen and calendar screen, with top-level tabs to switch between them. Tabs within tabs are unfortunate, but the team recognizes this as an issue they can solve later and keeps going. Perhaps the client
Sample
Chapter
Storymapping the User Experience @dlichaw | greatnorthelectric.com
“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
“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
FLAT FLOWS LOW CONVERSION LOW ACTIVATION LOW ENGAGEMENT FUNNEL DROPOFF
Storymapping the User Experience @dlichaw | greatnorthelectric.com
STORYBOARDING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
STORYBOARDING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
STORYBOARDING<— There’s a formula for that
Storymapping the User Experience @dlichaw | greatnorthelectric.com
STORYMAPPING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room
Storymapping the User Experience @dlichaw | greatnorthelectric.com
http://www.sundance.tv/series/the-writers-room/photos/the-writers-room-breaking-bad#/9
Storymapping the User Experience @dlichaw | greatnorthelectric.com
NOT TO BE CONFUSED WITH…
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Jeff Patton – http://www.agileproductdesign.com/blog/the_new_backlog.html
AGILE STORY MAPPING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
IT’S MORE LIKE…
Storymapping the User Experience @dlichaw | greatnorthelectric.com
http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room
Storymapping the User Experience @dlichaw | greatnorthelectric.com
http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room
MAKE THINGS GO
BOOMStorymapping the User Experience @dlichaw | greatnorthelectric.com
ANATOMY OF A STORY
https://www.etsy.com/listing/159285790/like-breaking-bad-remember-my-name
Storymapping the User Experience @dlichaw | greatnorthelectric.com
CHARACTERS
SUPPORTING ROLES !
GOALS
SETTINGTHE “HERO”
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Beginning Middle End
NARRATIVE ARC
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Beginning Middle End
NARRATIVE ARC
Storymapping the User Experience @dlichaw | greatnorthelectric.com
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
EXPOSITION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
INCITING INCIDENT
Storymapping the User Experience @dlichaw | greatnorthelectric.com
RISING ACTION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
CRISIS
Storymapping the User Experience @dlichaw | greatnorthelectric.com
CLIMAX
Storymapping the User Experience @dlichaw | greatnorthelectric.com
FALLING ACTION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
RESOLUTION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
6 WORD STORIES
“For sale. Baby shoes. Never worn.”
ERNEST HEMINGWAY
Storymapping the User Experience @dlichaw | greatnorthelectric.com
UX STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
UX STORIES
EXERCISE Tell a story about this product using the narrative arc as your structure.
Storymapping the User Experience @dlichaw | greatnorthelectric.com
https://www.youtube.com/watch?v=hwFZsoq_FLg
Storymapping the User Experience @dlichaw | greatnorthelectric.com
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
EPIC STORIES ORIGIN STORIES USAGE STORIES
UX STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
UX STORIESEPIC STORIES ORIGIN STORIES USAGE STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
http://answers.oreilly.com/topic/1864-gamestorming-elevator-pitch/
Storymapping the User Experience @dlichaw | greatnorthelectric.com
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
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
Beginning Middle End
EPIC
User Problem
Value
What this means for
youRising 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
UX STORIESEPIC STORIES
WHAT IS THIS PRODUCT OR FEATURE?
WHY SHOULD USERS CARE OR WANT TO USE IT? ORIGIN STORIES USAGE STORIES
EPIC STORIES ORIGIN STORIES USAGE STORIES
UX STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
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
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
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
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
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
EPIC STORIES ORIGIN STORIES
HOW MIGHT USERS FIND US?
WHAT VALUE/AFFORDANCES DO WE SHOW? USAGE STORIES
UX STORIES
EPIC STORIES ORIGIN STORIES USAGE STORIES
UX STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
INCITING INCIDENT
Storymapping the User Experience @dlichaw | greatnorthelectric.com
RISING ACTION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Storymapping the User Experience @dlichaw | greatnorthelectric.com
CRISIS
Storymapping the User Experience @dlichaw | greatnorthelectric.com
Storymapping the User Experience @dlichaw | greatnorthelectric.com
CLIMAX
Storymapping the User Experience @dlichaw | greatnorthelectric.com
FALLING ACTION
Storymapping the User Experience @dlichaw | greatnorthelectric.com
RESOLUTION
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.
Beginning Middle End
USAGE
!Incentive or CTA
Experience valueMake user feel powerful
Finish flowScreen-flow
Who Where
End
( )
eg. logged in “home”
Impediment
eg. signuppayment 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
Beginning Middle End
USAGE
!Incentive or CTA
Experience valueMake user feel good
Finish flowScreen-flow
Who Where
End
( )
eg. logged in “home”
Impediment
eg. signuppayment funnel drop-offs (metrics) qualitative mental hurdles boredom lack of value
Storymapping the User Experience @dlichaw | greatnorthelectric.com
EPIC STORIES ORIGIN STORIES USAGE STORIESHOW SHOULD THIS FLOW, UM, FLOW?
UX STORIES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
EXERCISEEPIC 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 STORYHow should this flow, um, flow?
Storymapping the User Experience @dlichaw | greatnorthelectric.com
FORMS AND BEST PRACTICES
Storymapping the User Experience @dlichaw | greatnorthelectric.com
WRITTEN
Storymapping the User Experience @dlichaw | greatnorthelectric.com
ILLUSTRATED
Cheng, Kevin. 2012. See What I Mean. New York: Rosenfeld Media. rosenfeldmedia.com/books/comics/
Storymapping the User Experience @dlichaw | greatnorthelectric.com
SAMMIE’SCUPCAKES
open
Sammie's Cupcakes is a proud, locally owned small businessI'm so glad I wandered in!1 red velvet cupcake please.
Coming right up!
Cupcake City
meanwhile...
Cupcake City
OPEN
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 not be as Internet savvy as
she thought.
*ping*
ILLUSTRATED
Storymapping the User Experience @dlichaw | greatnorthelectric.com
DIAGRAMMED
Storymapping the User Experience @dlichaw | greatnorthelectric.com
MATRIX
Storymapping the User Experience @dlichaw | greatnorthelectric.com
SUPPORTING
Storymapping the User Experience @dlichaw | greatnorthelectric.com
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
http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room
Storymapping the User Experience @dlichaw | greatnorthelectric.com
THANK YOU.Donna Lichaw
@dlichaw greatnorthelectric.com