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

  • 7,542 views
Uploaded on

Workshop given at Web Visions 2011

Workshop given at Web Visions 2011

More in: Sports , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,542
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
187
Comments
0
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

Transcript

  • 1. the future of design isn’t just the web
  • 2. design for cross channel experiences
    Samantha Starmer @samanthastarmer WebVisions 2011
  • 3. 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
  • 4. extrapolation encouraged
    http://www.flickr.com/photos/danilush/3259099985
  • 5. me
    web and experience stuff: Amazon, Microsoft
    REI – Recreational Equipment, Inc.
    lead IA, UX, IxD & analytics teams
    teach at University of Washington
  • 6. why now?
  • 7. first time at brick & mortar
    http://www.flickr.com/photos/dirpics/464458290/
  • 8. Waitress picture
    10 years in restaurant business
  • 9. 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
  • 10. 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
  • 11. a story…
    http://www.flickr.com/photos/sugarpond/3016905349
  • 12. conference in Australia!!
  • 13. Sydney picture
    imagined myself in Sydney
  • 14. but I’m a procrastinator
  • 15. oh crap
  • 16. huh. an electronic Visa. well, that’s pretty cool.
  • 17. silence…silence…
  • 18. luggage
    i’m ready
    http://www.flickr.com/photos/benleto/4593774334
  • 19. hmm… I can’t check in online
  • 20. even though I bought my tickets and Visa online
  • 21. have to check in at airport
    http://www.flickr.com/photos/gexydaf/5087612417
  • 22. damn, have to talk to a person
    http://www.flickr.com/photos/mkooiman/787191703
  • 23. wait in long check-in line
    http://www.flickr.com/photos/jopoe/4569447498
  • 24. http://www.flickr.com/photos/bryansblog/411455656
  • 25. Flight agent picture
    http://www.flickr.com/photos/dykstranet/211106615
  • 26. “this won’t work”
  • 27. Censored!
    but, it has official stuff and numbers and …
  • 28. “i’m a human, not a machine”
  • 29. Flight agent picture
    http://www.flickr.com/photos/dykstranet/211106615
  • 30. “what’s your itinerary?”
  • 31. me, looking confused
  • 32. thank god I’m old school
  • 33. i’m also paranoid
  • 34. what about my visa?
  • 35. Sleeping at Airport
    http://www.flickr.com/photos/feline_dacat/3197429380
  • 36. “i have no idea”
  • 37. Flight agent picture
    http://www.flickr.com/photos/dykstranet/211106615
  • 38. http://www.flickr.com/photos/slworking/4169134307
  • 39. “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”
  • 40. silence…silence…
  • 41. “good luck”
  • 42. lesson?
    http://www.flickr.com/photos/pjern/2150873799
  • 43. Holistic experience
  • 44. why?
  • 45. our lives cross channels – websites, apps, phone, etc…
  • 46. we live across physical and digital
  • 47. we must design for the holistic experience
  • 48. don’t design for just website
  • 49. …app
  • 50. …product
    http://www.flickr.com/photos/differentview/5506159327
  • 51. …or physical environment
    http://www.flickr.com/photos/24218656@N03/4589621372/
  • 52. we must design across all touchpoints and channels
  • 53. digital and physical are colliding
  • 54. 70%of US online consumers research products online and purchase them offline
    Forrester, Profiling The Multichannel Consumer, July 2009
  • 55. 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
  • 56. technology is everywhere
  • 57. but
  • 58. (and here is our opportunity)
  • 59. ‘integrated experiences are
    few and far between’
    Alexandra Deschamps-Sonsino
    http://www.slideshare.net/designswarm/creating-the-internet-of-things
  • 60. customers don’t think about channels
  • 61. http://www.crwgraphics.com/blog/wp-content/uploads/2010/08/multichannel-marketing.bmp
  • 62. customers don’t think about design disciplines
  • 63. 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
  • 64. customers
    do think about your organization
  • 65. across time, touchpoints and experiences
  • 66. however we want to interact
  • 67. whenever we see a brand
    http://www.flickr.com/photos/cdevers/3388665920
  • 68. outside
    http://www.flickr.com/photos/cafemama/542656019
  • 69. inside
    http://www.flickr.com/photos/penmachine/2971108982
  • 70. packaging
    http://www.flickr.com/photos/streamishmc/2391505902
  • 71. signs
    http://www.flickr.com/photos/andrewbain/2510253694
  • 72. employees
    http://www.flickr.com/photos/7577938@N02/4897443265
  • 73. things outside our control
    http://www.flickr.com/photos/jaxphotography/267129315
  • 74. all touchpoints and channels impact perception & loyalty
  • 75. design across digital and physical
  • 76. across platforms
  • 77. across platforms
    across devices
  • 78. across platforms
    across devices
    across channels
  • 79. how?
  • 80. 5 principles
    5 methods
    5 tools
  • 81. 5 principles
    convenient
    connected
    consistent
    contextual
    (a) crosstime
  • 82. convenient
  • 83.
  • 84.
  • 85. Walgreen on iPad
  • 86. http://www.flickr.com/photos/jsrcyclist/3181389420
    http://www.flickr.com/photos/zachklein/3964249
  • 87. Walgreen’s drive in
    http://www.flickr.com/photos/ambernectar/4042608385
  • 88. consistent
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97. connected
  • 98. consider the experience of transitions
    http://www.flickr.com/photos/mcdemoura/2209204939
  • 99. http://www.flickr.com/photos/hotel-de-la-ville-monza/4182940190
  • 100. Netflix
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108. no Encore…
  • 109.
  • 110.
  • 111. contextual
  • 112. 15% bump in weekend traffic
    http://www.flickr.com/photos/dalydaly/10813808
  • 113.
  • 114.
  • 115. Trying on tent
    design for researching online, trying in store
    http://www.flickr.com/photos/hollabackpack/184849492
  • 116. (a)cross time
  • 117. days
  • 118. good
  • 119. bad
  • 120. years
  • 121. customer lifecycle
    http://www.flickr.com/photos/mcmortygreen/3176998867
  • 122. http://www.flickr.com/photos/yourdon/2594767344
  • 123. http://www.flickr.com/photos/sa_ku_ra/13009153
  • 124. 5 methods
    think in terms of services
    share the sandbox
    start walking
    comfort in discomfort
    why vs. what
  • 125. 1. Think in terms of services
    1. think in terms of services
    Waitress
  • 126.
  • 127. Fluevog on iPad
  • 128. 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
  • 129. http://www.flickr.com/photos/trufflepig/4370405501
  • 130. Incremental Sale
  • 131. 2. share the sandbox
    http://www.flickr.com/photos/erikwdavis/2687670846
  • 132. UX Mag
    let people in.
    let people design.
    let people play.
  • 133. 3. start walking
    http://www.flickr.com/photos/jonathanbeard/3038114579/
  • 134.
  • 135.
  • 136.
  • 137.
  • 138. 4. comfort in discomfort
  • 139. you don’t have to be an expert
  • 140. “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.”
  • 141. eek – I don’t know anything about store design!
    http://www.twobackpackers.com/wp-content/uploads/2009/07/REI-Backpacks.jpg
  • 142. “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”
  • 143. 5. why vs. what
    http://www.flickr.com/photos/segozyme/3105128025/
  • 144. buying a tent
  • 145. for backyard?
    http://www.flickr.com/photos/jcast911/4037694806
  • 146. or backcountry snow?
    http://www.flickr.com/photos/reway2007/427303733
  • 147. 5 tools
    1. document the present
    map the future
    get behind the scenes
    tell a story
    cross train
  • 148. 1. document the present
    http://www.flickr.com/photos/thelustlizardofmelancholycove/5053889505/
  • 149. http://www.flickr.com/photos/frerieke/3882000183
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155. 2. map the future
    http://images.asc.ohio-state.edu/is/image/eHistory/world/images/maps2/1942world1600.jpg
  • 156. getting from point A to point B; and everything in between
  • 157.
  • 158. think about the customer’s whole journey
  • 159. 3. get behind the scenes
    http://www.flickr.com/photos/honorapearls/4155009907/
  • 160. are experiences supported?
    http://www.flickr.com/photos/vitorcastillo/2994723741
  • 161. here?
    http://www.flickr.com/photos/mattwright/1787856/
  • 162. and here?
    http://www.flickr.com/photos/oldonliner/3484504583/
  • 163. 4. tell a story
    http://www.flickr.com/photos/sugarpond/3016905349
  • 164. 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”
  • 165. Monday… I want to go backpacking this weekend!
  • 166. Time to plan…
  • 167. View
    View
    View
    View
    I want to go somewhere beautiful…
  • 168. 5. cross train
    http://www.flickr.com/photos/zackojones/4191554608/
  • 169.
  • 170. don’t design for the channel, design for the holistic experience
  • 171. don’t design for the screen, design for the holistic experience
  • 172. don’t design for the technology, design for the holistic experience
  • 173. 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
  • 174. break!
    http://www.flickr.com/photos/johnmcnab/4298812324
  • 175. try…
  • 176. discovery
  • 177. internal stakeholder interviews
    http://www.flickr.com/photos/kino-eye/226951415
  • 178. 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
  • 179. field research
    http://www.flickr.com/photos/romeral/3911756000
  • 180. 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?
  • 181. co-design
    http://www.flickr.com/photos/thinkpublic/4499674785
  • 182. 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
  • 183. design games
    http://www.flickr.com/photos/elitatt/4959931232
    http://www.flickr.com/photos/centralasian/4099680559
  • 184. 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
  • 185. gamestorming - the book
    http://www.flickr.com/photos/elitatt/4959938630
  • 186. journeys
    http://www.delightability.com/wp-content/uploads/2010/08/rental-car-customer-journey.png
  • 187. 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
  • 188. service inventory
    http://farm5.static.flickr.com/4023/4526736556_3b5a628b7f.jpg
  • 189. 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)
  • 190. exercise experience map
  • 191.
  • 192. http://www.thosepeskyusers.com/wp-content/uploads/2010/12/customer-experience-map.jpg
  • 193. http://www.maya.com/portfolio/carnegie-library
  • 194. http://everyonecampaign.com
  • 195. http://www.businessweek.com/innovate/content/nov2008/id20081110_531328.htm
  • 196. http://experiencematters.files.wordpress.com/2009/03/legowheel.png
  • 197. try now
  • 198. http://www.flickr.com/photos/g_w_y_n/3625095073
  • 199. 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
  • 200. design cross channel experience of buying a bicycle
    http://www.flickr.com/photos/sl4sh79/471062898
  • 201. stand up, stretch, and sit together
    http://www.flickr.com/photos/jameshopkirk/5635553120
  • 202. from customer perspective…
    what is the goal?
    what are the tasks?
    what are the touchpoints?
    what are the decisions?
    what support is needed?
  • 203. personas
  • 204. experience map
  • 205. experience map
    t
  • 206. 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)
  • 207. 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
  • 208. 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
  • 209. 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
  • 210. remember 5 principles
    convenient
    connected
    consistent
    contextual
    (a) crosstime
  • 211. experience map
    t
  • 212. solution
    http://www.flickr.com/photos/yannconz/2796311194
  • 213. mental models
    http://www.flickr.com/photos/jaaronfarr/314981744
  • 214. Mental Models
    mental models - the book
    http://www.rosenfeldmedia.com/books/mental-models
  • 215. comics
    http://www.flickr.com/photos/designetrecherche/546120971
  • 216. 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
  • 217. storyboards
    SCAD Service Design Project
    http://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.42%20PM.png
  • 218. storyboards
    http://www.flickr.com/photos/doos/4174319172
  • 219. swim lanes
    http://nform.com/blog/images/Swimlane_example2.gif
  • 220. 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’)
  • 221. business origami (@jessmcmullin)
    http://www.flickr.com/photos/benry/4101687804
  • 222. 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
  • 223. touchpoint matrix
    http://brandtouchpointmatrix.com/
  • 224. 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)
  • 225. exercise service blueprint
  • 226. service blueprint
    Physical Evidence
    (touchpoints)
    Customer Action
    ‘Front Stage’ (front line staff)
    The line of visibility
    ‘Back Stage’
    (support staff)
    Support
    (systems, databases)
  • 227. Service Blueprint
    http://lovelearn.wordpress.com/2009/07/11/initial-blueprint/
  • 228.
  • 229. SCAD Service Design Project
    http://servd.us/The_Project_files/Screen%20shot%202010-02-03%20at%2011.38.26%20PM.png
  • 230. 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
  • 231. elements
    customer actions
    physical evidence (touchpoints)
    front stage, customer facing
    backstage, enabling actions
    support processes
  • 232. service blueprint
    Physical Evidence
    (touchpoints)
    Customer action
    ‘Front Stage’ (front line staff)
    The line of visibility
    ‘Back Stage’
    (support staff)
    Support
    (systems, databases)
  • 233. partner
  • 234. partner
    understand org structure
    flex soft skills
    cultivate patience
    learn the big picture
    close the loop
  • 235. 1. understand org structure
    Understand organizational structure
  • 236. 2. flex soft skills
  • 237. 3. cultivate patience
    http://www.flickr.com/photos/dirkjankraan/4092709643
  • 238. 4. learn the big picture
    http://www.flickr.com/photos/aatemu/4784742636/
  • 239. 5. close the loop
    http://www.flickr.com/photos/pelegrino/3957449915
  • 240. sell
  • 241. 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
  • 242. 1. understand executive goals
  • 243. 2. use metrics
    http://www.flickr.com/photos/iliahi/2606645766/
  • 244. 3. start at the grassroots…
    http://www.flickr.com/photos/cobalt/282227013
  • 245. …but work towards top-down
    http://www.flickr.com/photos/flickrmarcus/3382920952
  • 246. 4. watch for the bodies
  • 247. 5. tell a fairy tale
  • 248. start
  • 249. http://www.flickr.com/photos/62719770@N00/2959566124
  • 250. 5 actions
    1. make the business case
    listen across channels
    make new friends
    start with small wins
    share the wealth
  • 251. make the business case
    http://www.flickr.com/photos/10458725@N02/3042138367
  • 252. make the business case
    • understand how your organization prioritizes
    • 253. think about ROI
    • 254. start with one gap in the experience – try to pick one that impacts your organizations goals
    • 255. expose your executives and other powerful people to customer feedback
    • 256. get people excited
  • listen across channels
  • 257. designing a holistic experience means listening holistically:
  • make new friends
    http://averagecats.com/page/7
  • 266. hang with a new crowd
    Marketing
    • IT, or anyone who can build stuff
    • 267. Finance
    • 268. Distribution Center
    • 269. Customer Service
    • 270. Innies with outies, outies with innies
    • 271. Different industries
    Artists, architects, museum curators, restaurant workers, baristas, landscapers, hotel managers…
  • 272. start with small wins
    http://tlc.discovery.com/tv/hoarding-buried-alive/slideshows/before-and-after-episodes-1-4-02.html
  • 273. you can’t be everywhere at once
    • target a channel pair
    • 274. focus on incremental progress
    • 275. Measure stuff
    • 276. celebrate (and communicate) quick wins
    • 277. get your ‘real’ work done
    • 278. get allies to spread the work
  • share the wealth
    http://www.flickr.com/photos/jimfrazier/1810966604/
  • 279. everyone owns customer experience
  • 280. thank you!!
    http://www.flickr.com/photos/baking_in_pearls/3960662314
  • 281. questions??
    http://www.flickr.com/photos/druclimb/3277540656/