• Save
The Future of Design isn't Just the Web - WebVisions 2011 Workshop
Upcoming SlideShare
Loading in...5

The Future of Design isn't Just the Web - WebVisions 2011 Workshop






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Microsoft PowerPoint

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Door picture
  • Waitress picture
  • Waitress picture
  • Waitress picture
  • Waitress picture
  • Waitress picture
  • Waitress picture
  • Door picture
  • Ritz carlton
  • Ritz carlton
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Buying a tentWhy?
  • Door picture
  • Door picture
  • Door picture
  • Door picture

The Future of Design isn't Just the Web - WebVisions 2011 Workshop The Future of Design isn't Just the Web - WebVisions 2011 Workshop Presentation Transcript

  • the future of design isn’t just the web
  • design forcross channel experiencesSamantha 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 sell cross channel design start cross-channel design now
  • me web and experience stuff: Amazon, Microsoft REI – Recreational Equipment, Inc. create and lead IA, UX, IxD teams teach at University of Washington
  • now
  • first time at brick & mortar http://www.flickr.com/photos/dirpics/464458290/
  • Waitress picture 10 years inrestaurant business
  • a story… http://www.flickr.com/photos/sugarpond/3016905349
  • Oz IA(Australia!!)
  • Sydney pictureimagined myself in Sydney
  • but I’m aprocrastinator
  • oh crap
  • huh. an electronic Visa.well, that’s pretty cool.
  • except I can’tcheck in online
  • even though I bought my tickets and Visa online
  • damn, have to talk to a person http://www.flickr.com/photos/mkooiman/787191703
  • waited 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
  • “this won’t work”
  • Censored!but, it has official stuff and numbers and …
  • “i’m a human,not a machine”
  • Flight agent picture http://www.flickr.com/photos/dykstranet/211106615
  • “what’s your itinerary?”
  • thank god I’m old school
  • what about my visa?
  • Sleeping at Airport http://www.flickr.com/photos/feline_dacat/3197429380
  • “i have no idea”
  • Flight agent picture http://www.flickr.com/photos/dykstranet/211106615
  • 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
  • Holisticexperience
  • we live across physical and digital
  • our lives cross channels –websites, apps, phone, etc…
  • we must design for the holistic experience
  • don’t design for just website
  • …app
  • …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
  • digital and physical are colliding
  • 70% of US onlineconsumers researchproducts online and purchase them offline Forrester, Profiling The Multichannel Consumer, July 2009
  • 53% of mobile searches on Binghave a local intent Greg Sterling Search Engine Land https://searchengineland.com/microsoft-53-percent-of-mobile-searches-have-local-intent-55556
  • technology is everywhere
  • (and here is our opportunity)
  • ‘integrated experiences are few and far between’ Alexandra Deschamps-Sonsinohttp://www.slideshare.net/designswarm/creating-the-internet-of-things
  • customersdon’t think about channels
  • http://www.crwgraphics.com/blog/wp-content/uploads/2010/08/multichannel-marketing.bmp
  • customers don’t thinkabout 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
  • customersdo think aboutyour company, your product
  • across time,touchpoints andexperiences
  • however we want to interact
  • whenever we see your brand http://www.flickr.com/photos/cdevers/3388665920
  • outsidehttp://www.flickr.com/photos/cafemama/542656019
  • insidehttp://www.flickr.com/photos/penmachine/2971108982
  • packaging http://www.flickr.com/photos/streamishmc/2391505902
  • signshttp://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
  • design across digital and physical
  • between channels
  • between channelsbetween platforms
  • between channels between platformsbetween digital & physical
  • 5 principles 5 methods 5 tools
  • 5 principles1. convenient2. connected3. consistent4. contextual5. (a) cross time
  • convenient
  • Walgreen on iPad
  • 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
  • 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
  • 15% bump inweekend traffic http://www.flickr.com/photos/dalydaly/10813808
  • Trying on tentresearch online, try in store http://www.flickr.com/photos/hollabackpack/184849492
  • (a)cross time
  • days
  • years
  • http://www.flickr.com/photos/mcmortygreen/3176998867
  • http://www.flickr.com/photos/yourdon/2594767344
  • http://www.flickr.com/photos/sa_ku_ra/13009153
  • 5 methods1. think in terms of services2. share the sandbox3. start walking4. comfort in discomfort5. why vs. what
  • 1. Think in terms of services think in terms of services Waitress
  • Fluevog on iPad
  • 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 pickthem up this weekend and save on shipping let us know otherwise they will ship outMonday.Thanks,LeahJohn Fluevog Shoes205 Pine St.Seattle, WA 98101phone: (206)441-1065fax : (206)728-7955seattle@fluevog.comwww.fluevog.comwww.myspace.com/fluevogseattle"There are two kinds of people: those who shy away from attention, and those who wearFluevogs." - 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 haveto be an expert
  • “an interesting thing happenedtoday – we were invited to help Visual Merch decide what shelf labels and categories to use inthe 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 happenedtoday – 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
  • for backyard? http://www.flickr.com/photos/jcast911/4037694806
  • or backcountry snow? http://www.flickr.com/photos/reway2007/427303733
  • 5 tools1. document the present2. 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 everythingin between
  • think about thecustomer’s whole journey
  • 3. get behind the scenes http://www.flickr.com/photos/honorapearls/4155009907/
  • how is the digitalexperience supported? http://www.flickr.com/photos/vitorcastillo/2994723741
  • http://www.flickr.com/photos/mattwright/1787856/
  • http://www.flickr.com/photos/oldonliner/3484504583/
  • 4. tell a story http://www.flickr.com/photos/sugarpond/3016905349
  • Meet JaneOutdoor Loyal38, PortlandInvolved in overlappingsports and understandsthe value of good gear“I kind of have a jacketproblem… I’m runningout of reasons to buyanother one”
  • Monday… I want to go backpacking this weekend!
  • Time to plan…
  • I want to go somewhere beautiful…
  • 5. cross train http://www.flickr.com/photos/zackojones/4191554608/
  • Success
  • don’t design for thechannel, design for the holistic experience
  • don’t design for thescreen, design for the holistic experience
  • don’t design for thetechnology, design for the holistic experience
  • 5 principles 5 methods1. convenient 1. think in terms of services2. connected 2. share the sandbox3. consistent 3. start walking4. contextual 4. comfort in discomfort5. (a) cross time 5. why vs. what 5 tools 1. document 2. experience map 3. get behind the scenes 4. tell a story 5. cross train
  • discovery
  • stakeholder interviews http://www.flickr.com/photos/kino-eye/226951415
  • field research http://www.flickr.com/photos/romeral/3911756000
  • co-design http://www.flickr.com/photos/thinkpublic/4499674785
  • design games http://www.flickr.com/photos/elitatt/4959931 232 http://www.flickr.com/photos/centralasian/4099680559
  • gamestorming - the book http://www.flickr.com/photos/elitatt/4959938630
  • customer journeys http://www.delightability.com/wp-content/uploads/2010/08/rental-car-customer-journey.pn
  • service inventory http://farm5.static.flickr.com/4023/4526736556_3b5a628b7f.jpg
  • exerciseexperience map
  • 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
  • what is the experience of buying a bicycle? http://www.flickr.com/photos/sl4sh79/471062898
  • what are the tasks?what are the touchpoints? what are the decisions? what support is needed?
  • experience map touchpoint touchpoint touchpoint touchpoint touchpointtasktasktasktasktasktask
  • experience map touchpoint touchpoint touchpoint touchpoint touchpointneeddecisionresearchtest ridepurchaseclassmaintenance
  • look for… Interactions moments of truth gaps front stage and back stage needed systems/support
  • questions Pain points – what are the responses/options the design needs to address? Positive points – what are the things the design must keep or enhance? Are there areas that take more time than we expect ? How can we accommodate? Are all the touchpoints and interactions within our control? Is the reason why a user interacts with us reconciled with how we envision the service?
  • discovery re-cap stakeholder interviews field research co-design design games body storming customer journey service inventory experience map
  • solution http://www.flickr.com/photos/yannconz/2796311194
  • mental models http://www.flickr.com/photos/jaaronfarr/314981744
  • Mental Modelsmental models - the book @jessmcmullin @samanthastarmer 188 http://www.rosenfeldmedia.com/books/mental-models
  • comics http://www.flickr.com/photos/designetrecherche/546120971
  • storyboards SCAD Service Design Project http://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.42%20PM.png
  • swim lanes http://nform.com/blog/images/Swimlane_example2.gi
  • business origami (@jessmcmullin) http://www.flickr.com/photos/benry/4101687804
  • touchpoint matrix http://brandtouchpointmatrix.com/
  • exercise serviceblueprint
  • Service blueprint Physical Evidence (touchpoints) User Actions ‘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/
  • @jessmcmullin@samanthastarmer 197
  • SCAD Service Design Projecthttp://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.26%20PM.png
  • service blueprint user’s perspective how service components link together different touchpoints and options organizational impact how internal people, processes and systems support chronological
  • elements1. customer actions2. physical evidence3. front stage, customer facing (real time service or self service)4. backstage, enabling actions5. support Processes http://people.ischool.berkeley.edu/~glushko/IS243Readings/ServiceBlueprinting.pdf
  • Service blueprint Physical Evidence (touchpoints) User Actions ‘Front Stage’(front line staff) The line of visibility ‘Back Stage’ (support staff) Support (systems, databases)
  • http://www.slideshare.net/morville/xmaps-upload; slide 112
  • Solution re-cap mental models comics story boards swim lanes business origami touchpoint matrix service blueprint desktop walkthrough
  • cross channel alignment
  • do some research http://www.flickr.com/photos/euthman/2097753744
  • understand executives’ goals
  • use metrics http://www.flickr.com/photos/iliahi/2606645766/
  • track online and offline 130 30
  • on ramps and off ramps
  • flex soft skills
  • cultivate patience http://www.flickr.com/photos/dirkjankraan/4092709643
  • start at the grassroots http://www.flickr.com/photos/cobalt/282227013
  • but work towards top-down http://www.flickr.com/photos/flickrmarcus/3382920952
  • find the bodies
  • Understand organizational structureunderstand org structure
  • don’t boil the ocean
  • tell a fairy tale
  • close the loop http://www.flickr.com/photos/pelegrino/3957449915
  • http://www.flickr.com/photos/62719770@N00/2959566124
  • make business case http://www.flickr.com/photos/10458725@N02/3042138367
  • listen
  • designing a holistic experiencemeans 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
  • hang with a new crowd http://averagecats.com/pa
  • make new friends Marketing• IT, or anyone who can build stuff• Finance• Distribution Center• Customer Service• Innies with outies, outies with innies• Different industriesArtists, architects, museum curators, restaurant workers, baristas, landscapers, hotel managers…
  • don’t get overwhelmed 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
  • don’t be grabby http://www.flickr.com/photos/jimfrazier/1810966604/
  • questions?? http://www.flickr.com/photos/druclimb/3277540656/