The Future of Design is Not Just the Web - Web Visions Workshop 2011

the future of design isn’t just the web

design for cross

channel experienc

esSamantha Starmer @samanthastarmer WebVisions 2011

today why care about cross channel

design? how to think about cross channel

design try cross channel design

discovery activities solution activities

partner on cross channel design sell cross channel design start cross-channel design now

extrapolation encouraged

http://www.flickr.com/photos/danilush/3259099985

meweb and experience stuff: Amazon, Microsoft

REI – Recreational Equipment, Inc. lead IA, UX, IxD & analytics teamsteach at University of Washington

why now?

http://www.flickr.com/photos/dirpics/464458290/

first time at brick & mortar

Waitress picture

10 years in restaurant

business

you web developers, web producers,

creative/art directors, designers, architects

education, agencies, B2B, government, financial

lots of familiarity with website user experience and design, some with mobile design

some cross channel experience; mostly via web and mobile

some expectations beyond specifically web based

applications strengths and weaknesses of each

channel and how to develop a seamless, integrated user experience

high level guidelines and gotchas how to take a brand beyond print and

web while keeping the integrity of the brand intact

how to create a consistent customer experience among all channels

a story…

http://www.flickr.com/photos/sugarpond/3016905349

conference in Australia!!

Sydney picture

imagined myself in

Sydney

but I’m a procrastinato

r

oh crap

huh. an electronic Visa. well, that’s

pretty cool.

silence…

silence…

luggage

http://www.flickr.com/photos/benleto/4593774334

i’m ready

hmm… I can’t check

in online

even though I bought my tickets and Visa

online

have to check in at airport

http://www.flickr.com/photos/gexydaf/5087612417

http://www.flickr.com/photos/mkooiman/787191703

damn, have to talk to a person

http://www.flickr.com/photos/jopoe/4569447498

wait in long check-in line

http://www.flickr.com/photos/bryansblog/411455656

Flight agent picture

http://www.flickr.com/photos/dykstranet/211106615

“this won’t work”

but, it has official stuff and numbers

and …

Censored!

“i’m a human, not a

machine”

“what’s your itinerary?”

me, looking confused

thank god I’m old school

i’m also paranoid

what about my visa?

Sleeping at Airport

http://www.flickr.com/photos/feline_dacat/3197429380

“i have no idea”

http://www.flickr.com/photos/slworking/4169134307

“Change screens, Pillow Pillow”“Where’s the Pillow?”

“Didn’t they cover that in training?”“Backslash Backslash”

“Okay, tietac”“What?”“Tietac”“huh?”

“Like Tie”“carrot backslash”

“United States”“Pillow Pillow”

“Change Screens”

silence…

silence…

“good luck”

lesson?

http://www.flickr.com/photos/pjern/2150873799

Holistic experience

our lives cross channels – websites, apps,

phone, etc…

we live across physical and

digital

we must design for the holistic

experience

don’t design for just website

…app

http://www.flickr.com/photos/differentview/5506159327

…product

…or physical environment

http://www.flickr.com/photos/24218656@N03/4589621372/

we must design across all

touchpoints and channels

digital and physical are

colliding

70% of US online consumers

research products online

and purchase them offline

Forrester, Profiling The Multichannel Consumer, July 2009

53% of mobile searches on Bing have a local intent

Greg SterlingSearch Engine Land

https://searchengineland.com/microsoft-53-percent-of-mobile-searches-have-local-intent-55556

technology is

everywhere

(and here is our

opportunity)

‘integrated experience

s are few and

far between’

Alexandra Deschamps-Sonsino http://www.slideshare.net/designswarm/creating-the-internet-of-things

customers don’t think

about channels

http://www.crwgraphics.com/blog/wp-content/uploads/2010/08/multichannel-marketing.bmp

customers don’t think

about design

disciplines

http://www.kickerstudio.com/blog/images/ux.jpghttp://www.jjg.net/elements/pdf/elements.pdf

http://www.montparnas.com/articles/wp-content/uploads/2006/10/user%20experience%20design%20explained.gif

http://mickwinters.com/wp-content/uploads/2010/02/venn1.gif

customers do think

about your organizati

on

across time,

touchpoints and

experiences

however we want to interact

http://www.flickr.com/photos/cdevers/3388665920

whenever we see a brand

http://www.flickr.com/photos/cafemama/542656019

outside

http://www.flickr.com/photos/penmachine/2971108982

inside

http://www.flickr.com/photos/streamishmc/2391505902

packaging

http://www.flickr.com/photos/andrewbain/2510253694

signs

http://www.flickr.com/photos/7577938@N02/4897443265

employees

http://www.flickr.com/photos/jaxphotography/267129315

things outside our control

all touchpoints

and channels impact

perception & loyalty

design across digital and

physical

across platforms

across platformsacross devices

across platformsacross devices

across channels

5 principles5 methods

5 tools

5 principles

1. convenient2. connected3. consistent4. contextual

5. (a) cross time

convenient

Walgreen on iPad

http://www.flickr.com/photos/zachklein/3964249http://www.flickr.com/photos/jsrcyclist/3181389420

Walgreen’s drive in

http://www.flickr.com/photos/ambernectar/4042608385

consistent

connected

consider the experience of

transitions

http://www.flickr.com/photos/mcdemoura/2209204939

http://www.flickr.com/photos/hotel-de-la-ville-monza/4182940190

Netflix

no Encore…

contextual

http://www.flickr.com/photos/dalydaly/10813808

15% bump in weekend

traffic

Trying on tent

http://www.flickr.com/photos/hollabackpack/184849492

design for researching online,

trying in store

(a)cross time

http://www.flickr.com/photos/mcmortygreen/3176998867

customer lifecycle

http://www.flickr.com/photos/yourdon/2594767344

http://www.flickr.com/photos/sa_ku_ra/13009153

5 methods

1. think in terms of services

2. share the sandbox3. start walking 4. comfort in discomfort5. why vs. what

Waitress

1. Think in terms of services1. think in terms of services

Fluevog on iPad

From: [email protected]: [email protected]: Fluevog order 20110211-00072873Date: Fri, 11 Feb 2011 16:52:38 -0800

Hey Samantha,We have both shoes you ordered online here at the Seattle store. If you’d like to pick them up this weekend and save on shipping let us know otherwise they will ship out Monday.Thanks,Leah John Fluevog Shoes205 Pine St.Seattle, WA 98101phone: (206)441-1065fax : (206)[email protected]/fluevogseattle

"There are two kinds of people: those who shy away from attention, and those who wear Fluevogs." - JF

http://www.flickr.com/photos/trufflepig/4370405501

Incremental Sale

2. share the sandbox

http://www.flickr.com/photos/erikwdavis/2687670846

UX Mag

let people in. let people

design. let people play.

3. start walking

http://www.flickr.com/photos/jonathanbeard/3038114579/

4. comfort in discomfort

you don’t have to be an expert

“an interesting thing happened today – we were invited to help Visual Merch decide

what shelf labels and categories to use in the

retail stores for backpacks.”

http://www.twobackpackers.com/wp-content/uploads/2009/07/REI-Backpacks.jpg

eek – I don’t know anything about store

design!

“an interesting thing happened today – we were invited to help Visual Merch decide

what shelf labels and categories to use in the

retail stores for backpacks.

This is a great win for us”

5. why vs. what

http://www.flickr.com/photos/segozyme/3105128025/

buying a tent

http://www.flickr.com/photos/jcast911/4037694806

for backyard?

http://www.flickr.com/photos/reway2007/427303733

or backcountry

snow?

5 tools

1. document the present

2. map the future3. get behind the scenes4. tell a story5. cross train

1. document the present

http://www.flickr.com/photos/thelustlizardofmelancholycove/5053889505/

http://www.flickr.com/photos/frerieke/3882000183

2. map the future

http://images.asc.ohio-state.edu/is/image/eHistory/world/images/maps2/1942world1600.jpg

getting from

point A to point B;

and everythin

g in between

think about the customer’s whole

journey

3. get behind the scenes

http://www.flickr.com/photos/honorapearls/4155009907/

http://www.flickr.com/photos/vitorcastillo/2994723741

are experiences supported?

http://www.flickr.com/photos/mattwright/1787856/

here?

http://www.flickr.com/photos/oldonliner/3484504583/

and here?

4. tell a story

http://www.flickr.com/photos/sugarpond/3016905349

Meet Jane

Outdoor Loyal38, Portland

Involved in overlapping sports and understands the value of good gear

“I kind of have a jacket problem… I’m running out of reasons to buy another one”

Monday… I want to go backpacking this weekend!

Time to plan…

I want to go somewhere beautiful…

View

View

View

View

5. cross train

http://www.flickr.com/photos/zackojones/4191554608/

don’t design for the channel, design for

the holistic experience

don’t design for the screen, design for


don’t design for the technology, design for


5 principles


5. (a) cross time

5 methods

1. think in terms of services

2. share the sandbox3. start walking4. comfort in discomfort5. why vs. what

5 tools

1. document2. experience map3. get behind the

scenes4. tell a story5. cross train

break!

http://www.flickr.com/photos/johnmcnab/4298812324

try…

discovery

http://www.flickr.com/photos/kino-eye/226951415

internal stakeholder interviews

stakeholder interviews what experiences do stakeholders

think should happen? what experiences do stakeholders

think ARE happening? what assumptions are stakeholders

making? customers technology business process service and support

field research

http://www.flickr.com/photos/romeral/3911756000

field research

what experiences are happening? what experiences are customers

expecting? where are the “moments of truth”? what channels, devices or platforms

do customers want to interact with? When?

what do customers do if their expectations are disappointed?

what is happening behind the scenes to support the experiences?

co-design

http://www.flickr.com/photos/thinkpublic/4499674785

co-design tease out what customers say they

want vs. what they actually do or use get your project team in the room get your executives in the room process of collaboration and hearing

different perspectives can be more valuable than the end artifacts

http://www.flickr.com/photos/elitatt/4959931232 http://www.flickr.com/photos/centralasian/4099680559

design games

design games don’t just use with designers! encourage use of analog tools and

toys bar is low, nothing is wrong think of as more play than work can bring out quieter types new ways of thinking find creativity where you didn’t expect

it

http://www.flickr.com/photos/elitatt/4959938630

gamestorming - the book

http://www.delightability.com/wp-content/uploads/2010/08/rental-car-customer-journey.png

journeys

journeys what is the customer’s journey across

touchpoints and time? can be micro - details within a

specific feature or functionality can be macro – understanding full

lifecycle uncover gaps in the experience focus on the experience between

channels, platforms and devices challenge assumptions and

perceptions good to put on the wall to unify and

remind

http://farm5.static.flickr.com/4023/4526736556_3b5a628b7f.jpg

service inventory

service inventory similar to process map but focus on

the customer and their service needs great way to ensure being

comprehensive good to build after mapping

customer’s journey take a broad view of service –

websites, mobile apps, etc provide some form of service

illuminates areas where you can surprise & delight (or royally screw up)

exercise experience

map

http://www.thosepeskyusers.com/wp-content/uploads/2010/12/customer-experience-map.jpg

http://www.maya.com/portfolio/carnegie-library

http://everyonecampaign.com

http://www.businessweek.com/innovate/content/nov2008/id20081110_531328.htm

http://experiencematters.files.wordpress.com/2009/03/legowheel.png

try now

http://www.flickr.com/photos/g_w_y_n/3625095073

the scenario hired to design consistent cross channel

experience for a cycling company digital and physical presence opening a new physical location expanding email and social media presence

to grow revenue start offering classes and maintenance

appointments brand differentiator = friendly expertise

and advice buying advertising

design cross channel experience of buying a

bicyclehttp://www.flickr.com/photos/sl4sh79/471062898

http://www.flickr.com/photos/jameshopkirk/5635553120

stand up, stretch, and sit together

what is the goal?what are the tasks?

what are the touchpoints?what are the decisions?

what support is needed?

from customer perspective…

personas

touchpoint touchpoint touchpoint touchpoint touchpoint

task

task

task

task

task

task

experience map

touchpoint

touchpoint touchpoint touchpoint touchpoint

need

decision

research

test ride

purchase

class

maintenance

experience mapt

think about…

holistic journey across time and space pain points and positive points needs and expectations for services all potential interactions which channels are most effective which touchpoints drive moments of truth

(decisions, disgust, delight)

look for…

customer expectations, behaviors and emotions

needed interactions gaps that service/design needs to fill offline and online needs areas out of our control

it doesn’t have to be linear

Winning the consumer decision journeyhttp://www.mckinsey.com/Client_Service/Marketing_and_sales/Latest_thinking/CDJ/Winning_the_consumer_decision_journey.aspx

the scenario hired to design consistent cross

channel experience for a cycling company

digital and physical presence opening a new physical location expanding email and social media

presence to grow revenue start offering classes and

maintenance appointments brand differentiator = friendly

expertise and advice

remember 5 principles


5. (a) cross time

touchpoint

touchpoint touchpoint touchpoint touchpoint

need

decision

research

test ride

purchase

class

maintenance

experience mapt

solutionhttp://www.flickr.com/photos/yannconz/2796311194

http://www.flickr.com/photos/jaaronfarr/314981744

mental models

214@jessmcmullin@samanthastarmer

Mental Models

http://www.rosenfeldmedia.com/books/mental-models

mental models - the book

http://www.flickr.com/photos/designetrecherche/546120971

comics

comics & storyboards visual representations make

complexity easier to grasp emphasis on story continues focus on

customer sketching and photography uses

different parts of the brain opens up to thinking beyond the

screen helps plan the right flow without

missing gaps

SCAD Service Design Project http://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.42%20PM.png

storyboards

http://www.flickr.com/photos/doos/4174319172

storyboards

http://nform.com/blog/images/Swimlane_example2.gif

swim lanes

swim lanes tie together storyboard and

supporting design and processes keeps track of each part of the

necessary experience good for chronological experiences excellent tool for waterfall type

approaches (i.e. throwing design ‘over the wall’)

business origami (@jessmcmullin)

http://www.flickr.com/photos/benry/4101687804

business origami 3 dimensions helps envision

experience solutions can be easier than sketching for non-

designers to feel creative great for services and experiences

that involve crossing locations easy to move pieces lessen any

feeling of commitment or making a mistake

touchpoint matrix

http://brandtouchpointmatrix.com/

touchpoint matrix track all ways customers interact with

your organization can use both for as-is and to-be states excellent for corralling complex

marketing and advertising programs helpful for non-web/non-technology

people to understand impacts good way to evangelize need for

holistic experience (don’t paw the customer)

exercise service

blueprint

service blueprint

‘Front Stage’ (front line staff)

‘Back Stage’(support staff)

Support(systems,

databases)

Physical Evidence

(touchpoints)

Customer Action

The line of visibility

Service Blueprint

http://lovelearn.wordpress.com/2009/07/11/initial-blueprint/

228@jessmcmullin@samanthastarmer

SCAD Service Design Projecthttp://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.26%20PM.png

service blueprint can start with experience map create blueprint from user POV use to understand org impact determine how service components link include all prioritized touchpoints determine how internal people, processes and

systems support

elements1. customer actions2. physical evidence (touchpoints)3. front stage, customer facing4. backstage, enabling actions5. support processes

service blueprint

‘Front Stage’ (front line staff)

‘Back Stage’(support staff)

Support(systems,

databases)

Physical Evidence

(touchpoints)

Customer action

The line of visibility

partner

partner

1. understand org structure

2. flex soft skills3. cultivate patience4. learn the big picture5. close the loop

Understand organizational structure1. understand org structure

2. flex soft skills

3. cultivate patience

http://www.flickr.com/photos/dirkjankraan/4092709643

4. learn the big picture

http://www.flickr.com/photos/aatemu/4784742636/

5. close the loop

http://www.flickr.com/photos/pelegrino/3957449915

5 ways to sell

1. understand executives’ goals

2. use metrics3. start at the grassroots - but work towards top-down

4. watch for the bodies5. tell a fairy tale

1. understand executive goals

2. use metrics

http://www.flickr.com/photos/iliahi/2606645766/

3. start at the grassroots…

http://www.flickr.com/photos/cobalt/282227013

…but work towards top-down

http://www.flickr.com/photos/flickrmarcus/3382920952

4. watch for the bodies

5. tell a fairy tale

5 actions

1. make the business case

2. listen across channels3. make new friends4. start with small wins5. share the wealth

make the business case


make the business case• understand how your organization prioritizes• think about ROI• start with one gap in the experience – try to

pick one that impacts your organizations goals• expose your executives and other powerful

people to customer feedback• get people excited

listen across channels

designing a holistic experience means listening holistically:• usual UX research, but also• call center• email queries and feedback• live chat transcripts• social media• sentiment analysis• market research• analytics (behavior)• brick & mortar follows/shop alongs

http://averagecats.com/page/7

make new friends

hang with a new crowd Marketing• IT, or anyone who can build stuff• Finance• Distribution Center• Customer Service• Innies with outies, outies with innies• Different industries

Artists, architects, museum curators, restaurant workers, baristas, landscapers, hotel

managers…

start with small wins

http://tlc.discovery.com/tv/hoarding-buried-alive/slideshows/before-and-after-episodes-1-4-02.html

you can’t be everywhere at once• target a channel pair • focus on incremental progress• Measure stuff• celebrate (and communicate) quick wins• get your ‘real’ work done • get allies to spread the work

http://www.flickr.com/photos/jimfrazier/1810966604/

share the wealth

everyone owns customer

experience

http://www.flickr.com/photos/baking_in_pearls/3960662314

thank you!!

questions??

http://www.flickr.com/photos/druclimb/3277540656/

The Future of Design is Not Just the Web - Web Visions Workshop 2011

Sports

Transcript of The Future of Design is Not Just the Web - Web Visions Workshop 2011