Workshop given at Web Visions 2011

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

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

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

108. no Encore…

111. contextual

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

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

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/

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

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

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/

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

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/

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

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

258. call center

259. email queries and feedback

260. live chat transcripts

261. social media

262. sentiment analysis

263. market research

264. analytics (behavior)

267. Finance

268. Distribution Center

269. Customer Service

270. Innies with outies, outies with innies

271. Different industriesArtists, 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

274. focus on incremental progress

275. Measure stuff

276. celebrate (and communicate) quick wins

277. get your ‘real’ work done

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/