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 experiences Samantha 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

me web and experience stuff: Amazon, Microsoft REI – Recreational Equipment, Inc. lead IA, UX, IxD & analytics teams teach at University of Washington

first time at brick & mortar http://www.flickr.com/photos/dirpics/464458290/

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

Sydney picture imagined myself in Sydney

huh. an electronic Visa. well, that’s pretty cool.

luggage i’m ready http://www.flickr.com/photos/benleto/4593774334

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

damn, have to talk to a person http://www.flickr.com/photos/mkooiman/787191703

wait in long check-in line http://www.flickr.com/photos/jopoe/4569447498

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

Flight agent picture http://www.flickr.com/photos/dykstranet/211106615

Censored! but, it has official stuff and numbers and …

“i’m a human, not a machine”

“what’s your itinerary?”

Sleeping at Airport http://www.flickr.com/photos/feline_dacat/3197429380

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”

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

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

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

…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 Sterling Search Engine Land https://searchengineland.com/microsoft-53-percent-of-mobile-searches-have-local-intent-55556

‘integrated experiences 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.jpg http://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 organization

across time, touchpoints and experiences

whenever we see a brand http://www.flickr.com/photos/cdevers/3388665920

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

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

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

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

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

things outside our control http://www.flickr.com/photos/jaxphotography/267129315

all touchpoints and channels impact perception & loyalty

design across digital and physical

across platforms across devices

across platforms across devices across channels

5 principles 5 methods 5 tools

5 principles convenient connected consistent contextual (a) crosstime

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

Walgreen’s drive in http://www.flickr.com/photos/ambernectar/4042608385

consider the experience of transitions http://www.flickr.com/photos/mcdemoura/2209204939

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

15% bump in weekend traffic http://www.flickr.com/photos/dalydaly/10813808

Trying on tent design for researching online, trying in store http://www.flickr.com/photos/hollabackpack/184849492

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

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

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

5 methods think in terms of services share the sandbox start walking comfort in discomfort why vs. what

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

From: seattlefluevog@cablespeed.comTo: sstarmerj@hotmail.comSubject: Fluevog order 20110211-00072873Date: Fri, 11 Feb 2011 16:52:38 -0800Hey 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 Shoes 205 Pine St. Seattle, WA 98101 phone: (206)441-1065 fax : (206)728-7955 seattle@fluevog.com www.fluevog.com www.myspace.com/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

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/

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

eek – I don’t know anything about store design! http://www.twobackpackers.com/wp-content/uploads/2009/07/REI-Backpacks.jpg

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

for backyard? http://www.flickr.com/photos/jcast911/4037694806

or backcountry snow? http://www.flickr.com/photos/reway2007/427303733

5 tools 1. document the present map the future get behind the scenes tell a story 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 everything in between

think about the customer’s whole journey

3. get behind the scenes http://www.flickr.com/photos/honorapearls/4155009907/

are experiences supported? http://www.flickr.com/photos/vitorcastillo/2994723741

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

and here? http://www.flickr.com/photos/oldonliner/3484504583/

4. tell a story http://www.flickr.com/photos/sugarpond/3016905349

Meet Jane Outdoor Loyal 38, 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!

View View View View I want to go somewhere beautiful…

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 the holistic experience

don’t design for the technology, design for the holistic experience

5 principles convenient connected consistent contextual (a) crosstime 5 methods think in terms of services share the sandbox start walking comfort in discomfort why vs. what 5 tools document experience map get behind the scenes tell a story cross train

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

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

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

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

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

gamestorming - the book http://www.flickr.com/photos/elitatt/4959938630

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

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

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

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)

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

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

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

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

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 bicycle http://www.flickr.com/photos/sl4sh79/471062898

stand up, stretch, and sit together http://www.flickr.com/photos/jameshopkirk/5635553120

from customer perspective… what is the goal? what are the tasks? what are the touchpoints? what are the decisions? what support is needed?

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 journey http://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 convenient connected consistent contextual (a) crosstime

solution http://www.flickr.com/photos/yannconz/2796311194

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

Mental Models mental models - the book http://www.rosenfeldmedia.com/books/mental-models

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

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

storyboards 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

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

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)

service blueprint Physical Evidence (touchpoints) Customer Action ‘Front Stage’ (front line staff) The line of visibility ‘Back Stage’ (support staff) Support (systems, databases)

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

SCAD Service Design Project http://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

elements customer actions physical evidence (touchpoints) front stage, customer facing backstage, enabling actions support processes

service blueprint Physical Evidence (touchpoints) Customer action ‘Front Stage’ (front line staff) The line of visibility ‘Back Stage’ (support staff) Support (systems, databases)

partner understand org structure flex soft skills cultivate patience learn the big picture close the loop

1. understand org structure Understand organizational structure

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

5ways to sell 1. understand executives’ goals use metrics start at the grassroots - but work towards top-down watch for the bodies tell a fairy tale

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

http://www.flickr.com/photos/62719770@N00/2959566124

5 actions 1. make the business case listen across channels make new friends start with small wins share the wealth

make the business case http://www.flickr.com/photos/10458725@N02/3042138367

make the business case ,[object Object]

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,[object Object]

designing a holistic experience means listening holistically: ,[object Object]

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

Similar to The Future of Design is Not Just the Web - Web Visions Workshop 2011 (20)

More from Samantha Starmer

More from Samantha Starmer (13)

Recently uploaded

Recently uploaded (20)

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

Editor's Notes