Cross-channel design aims to provide a seamless experience for customers across digital and physical touchpoints. The document discusses the need for designing experiences that are convenient, connected, consistent, and contextual across channels over time. It provides five principles and five methods for cross-channel design, including thinking in terms of services, sharing design processes, starting with small experiments, embracing discomfort, and focusing on customer needs over specific solutions. Discovery activities like interviews, research, and experience mapping are recommended to understand the current customer journey. Solution techniques include mental models, storytelling, service blueprints, and touchpoint matrices to holistically design experiences across channels.

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
 sell cross channel design
 start cross-channel design now

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

5. now

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

7. Waitress picture
10 years in
restaurant business

8. a story…
http://www.flickr.com/photos/sugarpond/3016905349

9. Oz IA
(Australia!!)

10. Sydney picture
imagined myself in
Sydney

11. but I’m a
procrastinator

12. oh crap

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

14. except I can’t
check in online

15. even though I bought my
tickets and Visa online

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

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

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

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

20. “this won’t
work”

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

22. “i’m a human,
not a machine”

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

24. “what’s your
itinerary?”

25. thank god I’m old
school

26. what about my
visa?

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

28. “i have no idea”

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

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

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

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

33. Holistic
experience

35. we live across
physical and
digital

36. our lives cross
channels –
websites, apps, phone,
etc…

37. we must design for
the holistic
experience

38. don’t design for just website

39. …app

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

41. …or physical environment
http://www.flickr.com/photos/24218656@N03/4589621372/

42. we must design
across all
touchpoints

43. digital and physical
are colliding

44. 70% of US online
consumers research
products online and
purchase them
offline
Forrester, Profiling The Multichannel Consumer, July 2009

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

46. technology is
everywhere

48. (and here is our
opportunity)

49. ‘integrated
experiences
are
few and far
between’
Alexandra Deschamps-Sonsino
http://www.slideshare.net/designswarm/creating-the-internet-of-things

50. customers
don’t think
about
channels

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

52. customers
don’t think
about design
disciplines

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

54. customers
do think about
your company,
your product

55. across time,
touchpoints
and
experiences

56. however we want
to interact

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

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

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

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

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

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

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

64. design across digital
and physical

65. between channels

66. between channels
between platforms

67. between channels
between platforms
between digital & physical

69. 5 principles
5 methods
5 tools

70. 5 principles
1. convenient
2. connected
3. consistent
4. contextual
5. (a) cross time

71. convenient

74. Walgreen on iPad

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

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

77. consistent

86. connected

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

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

89. Netflix

97. no Encore…

100. contextual

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

104. Trying on tent
research online, try
in store
http://www.flickr.com/photos/hollabackpack/184849492

105. (a)cross time

106. days

109. years

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

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

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

113. 5 methods
1. think in terms of services
2. share the sandbox
3. start walking
4. comfort in discomfort
5. why vs. what

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

116. Fluevog on iPad

117. From: seattlefluevog@cablespeed.com
To: sstarmerj@hotmail.com
Subject: Fluevog order 20110211-00072873
Date: 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 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

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

119. Incremental Sale

120. 2. share the sandbox
http://www.flickr.com/photos/erikwdavis/2687670846

121. UX Mag
let people in.
let people design.
let people play.

122. 3. start walking
http://www.flickr.com/photos/jonathanbeard/3038114579/

127. 4. comfort in discomfort

128. you don’t have
to be an expert

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

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

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

132. 5. why vs. what
http://www.flickr.com/photos/segozyme/3105128025/

133. buying a tent

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

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

136. 5 tools
1. document the present
2. map the future
3. get behind the scenes
4. tell a story
5. cross train

137. 1. document the present
http://www.flickr.com/photos/thelustlizardofmelancholycove/5053889505/

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

144. 2. map the future
http://images.asc.ohio-state.edu/is/image/eHistory/world/images/maps2/1942world1600.jpg

145. getting
from point
A to point
B; and
everything
in between

147. think about the
customer’s whole
journey

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

149. how is the digital
experience supported?
http://www.flickr.com/photos/vitorcastillo/2994723741

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

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

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

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

154. Monday… I want to go backpacking this weekend!

155. Time to plan…

156. I want to go somewhere beautiful…

157. 5. cross train
http://www.flickr.com/photos/zackojones/4191554608/

158. Success

159. don’t design for the
channel, design for the
holistic experience

160. don’t design for the
screen, design for the
holistic experience

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

162. 5 principles 5 methods
1. convenient 1. think in terms of services
2. connected 2. share the sandbox
3. consistent 3. start walking
4. contextual 4. comfort in discomfort
5. (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

164. discovery

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

166. field research
http://www.flickr.com/photos/romeral/3911756000

167. co-design
http://www.flickr.com/photos/thinkpublic/4499674785

168. design games
http://www.flickr.com/photos/elitatt/4959931
232 http://www.flickr.com/photos/centralasian/4099680559

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

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

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

172. exercise
experience
map

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

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

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

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

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

179. what is the experience of
buying a bicycle?
http://www.flickr.com/photos/sl4sh79/471062898

180. what are the tasks?
what are the touchpoints?
what are the decisions?
what support is needed?

181. experience map
touchpoint touchpoint touchpoint touchpoint touchpoint
task
task
task
task
task
task

182. experience map
touchpoint touchpoint touchpoint touchpoint touchpoint
need
decision
research
test ride
purchase
class
maintenance

183. look for…
 Interactions
 moments of truth
 gaps
 front stage and back stage
 needed systems/support

184. 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?

185. discovery re-cap
 stakeholder interviews
 field research
 co-design
 design games
 body storming
 customer journey
 service inventory
 experience map

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

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

188. Mental Models
mental models - the book
@jessmcmullin
@samanthastarmer 188
http://www.rosenfeldmedia.com/books/mental-models

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

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

191. swim lanes
http://nform.com/blog/images/Swimlane_example2.gi

192. business origami (@jessmcmullin)
http://www.flickr.com/photos/benry/4101687804

193. touchpoint matrix
http://brandtouchpointmatrix.com/

194. exercise
service
blueprint

195. Service blueprint
Physical
Evidence
(touchpoints)
User
Actions
‘Front Stage’
(front line staff)
The line of visibility
‘Back Stage’
(support staff)
Support
(systems,
databases)

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

197. @jessmcmullin
@samanthastarmer 197

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

199. service blueprint
 user’s perspective
 how service components link together
 different touchpoints and options
 organizational impact
 how internal people, processes and
systems support
 chronological

200. elements
1. customer actions
2. physical evidence
3. front stage, customer facing (real time
service or self service)
4. backstage, enabling actions
5. support Processes
http://people.ischool.berkeley.edu/~glushko/IS243Readings/ServiceBlueprinting.pdf

201. Service blueprint
Physical
Evidence
(touchpoints)
User
Actions
‘Front Stage’
(front line staff)
The line of visibility
‘Back Stage’
(support staff)
Support
(systems,
databases)

202. http://www.slideshare.net/morville/xmaps-upload; slide 112

203. Solution re-cap
 mental models
 comics
 story boards
 swim lanes
 business origami
 touchpoint matrix
 service blueprint
 desktop walkthrough

204. cross channel alignment

206. do some research
http://www.flickr.com/photos/euthman/2097753744

207. understand executives’ goals

208. use metrics
http://www.flickr.com/photos/iliahi/2606645766/

209. track online and offline
130
30

210. on ramps and off ramps

211. flex soft skills

212. cultivate patience
http://www.flickr.com/photos/dirkjankraan/4092709643

213. start at the grassroots
http://www.flickr.com/photos/cobalt/282227013

214. but work towards top-down
http://www.flickr.com/photos/flickrmarcus/3382920952

215. find the bodies

216. Understand organizational structure
understand org structure

217. don’t boil the ocean

218. tell a fairy tale

219. close the loop
http://www.flickr.com/photos/pelegrino/3957449915

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

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

223. listen

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

225. hang with a new crowd
http://averagecats.com/pa

226. make new friends
 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…

227. don’t get overwhelmed
http://tlc.discovery.com/tv/hoarding-buried-alive/slideshows/before-and-after-episodes-1-4-02.html

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

229. don’t be grabby
http://www.flickr.com/photos/jimfrazier/1810966604/

230. questions??
http://www.flickr.com/photos/druclimb/3277540656/