storymapping the user experience

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

North by Northwest storyboard/film comparison one1more2time3.wordpress.com

STORYBOARDING


http://one1more2time3.wordpress.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


“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/


http://www.rosenfeldmedia.com/books/mobile-design/

FLAT FLOWS LOW CONVERSION LOW ACTIVATION LOW ENGAGEMENT FUNNEL DROPOFF


STORYBOARDING


STORYBOARDING<— There’s a formula for that


STORYMAPPING


http://www.denofgeek.com/tv/breaking-bad/27141/see-inside-the-breaking-bad-writers-room



http://www.sundance.tv/series/the-writers-room/photos/the-writers-room-breaking-bad#/9


NOT TO BE CONFUSED WITH…


Jeff Patton – http://www.agileproductdesign.com/blog/the_new_backlog.html

AGILE STORY MAPPING


http://www.agileproductdesign.com/blog/the_new_backlog.html

IT’S MORE LIKE…



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


CHARACTERS

SUPPORTING ROLES !

GOALS

SETTINGTHE “HERO”


Beginning Middle End

NARRATIVE ARC



NARRATIVE ARC

Inciting Incident

Climax

Falling Action

Rising Action

Exposition

Resolution

Crisis

Journey Chase Search

( )


EXPOSITION


INCITING INCIDENT


RISING ACTION


CRISIS


CLIMAX


FALLING ACTION


RESOLUTION


6 WORD STORIES

“For sale. Baby shoes. Never worn.”

ERNEST HEMINGWAY


UX STORIES


UX STORIES

EXERCISE Tell a story about this product using the narrative arc as your structure.


https://www.youtube.com/watch?v=hwFZsoq_FLg


https://www.youtube.com/watch?v=hwFZsoq_FLg

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


EPIC STORIES ORIGIN STORIES USAGE STORIES

UX STORIES


UX STORIESEPIC STORIES ORIGIN STORIES USAGE STORIES


http://answers.oreilly.com/topic/1864-gamestorming-elevator-pitch/



EPIC

User Problem

Value

What this means for

you

Current state of things

Goal

Competition( )



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



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


UX STORIES



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



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



ORIGIN

!Why


User takes action


Who Where

Goal


( )

(Trigger)

Personas Market





ORIGIN

!Why?

Problem


User takes action


Who Where

Goal

Word of mouth Paid advertising Google search App store Other Channels & touch-points

( )

(Trigger)

Personas Market





ORIGIN

!Why


User takes action


Who Where

Goal


( )

(Trigger)

Personas Market



GOOD FOR LANDING PAGE REQUIREMENTS:

• MARKETING COPY/ASSETS

• SEARCH ENGINE OPTIMIZATION

• CALLS TO ACTION


EPIC STORIES ORIGIN STORIES

HOW MIGHT USERS FIND US?

WHAT VALUE/AFFORDANCES DO WE SHOW? USAGE STORIES

UX STORIES


UX STORIES


INCITING INCIDENT


RISING ACTION


CRISIS


CLIMAX


FALLING ACTION


RESOLUTION


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?


Resistance is futile.


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


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


EPIC STORIES ORIGIN STORIES USAGE STORIESHOW SHOULD THIS FLOW, UM, FLOW?

UX STORIES


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?


FORMS AND BEST PRACTICES


WRITTEN


ILLUSTRATED

Cheng, Kevin. 2012. See What I Mean. New York: Rosenfeld Media. rosenfeldmedia.com/books/comics/


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


DIAGRAMMED


MATRIX


SUPPORTING


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

THANK YOU.Donna Lichaw

@dlichaw greatnorthelectric.com