the future of design is not just the web - web visions workshop 2011
Post on 18-Sep-2014
17 views
DESCRIPTION
Workshop given at Web Visions 2011TRANSCRIPT
the future of design isn’t just the web
design for cross
channel experienc
esSamantha 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
meweb and experience stuff: Amazon, Microsoft
REI – Recreational Equipment, Inc. lead IA, UX, IxD & analytics teamsteach at University of Washington
why now?
http://www.flickr.com/photos/dirpics/464458290/
first time at brick & mortar
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
conference in Australia!!
Sydney picture
imagined myself in
Sydney
but I’m a procrastinato
r
oh crap
huh. an electronic Visa. well, that’s
pretty cool.
silence…
silence…
luggage
http://www.flickr.com/photos/benleto/4593774334
i’m ready
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
http://www.flickr.com/photos/mkooiman/787191703
damn, have to talk to a person
http://www.flickr.com/photos/jopoe/4569447498
wait in long check-in line
http://www.flickr.com/photos/bryansblog/411455656
Flight agent picture
http://www.flickr.com/photos/dykstranet/211106615
“this won’t work”
but, it has official stuff and numbers
and …
Censored!
“i’m a human, not a
machine”
Flight agent picture
http://www.flickr.com/photos/dykstranet/211106615
“what’s your itinerary?”
me, looking confused
thank god I’m old school
i’m also paranoid
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”
silence…
silence…
“good luck”
lesson?
http://www.flickr.com/photos/pjern/2150873799
Holistic experience
why?
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
…app
http://www.flickr.com/photos/differentview/5506159327
…product
…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 SterlingSearch Engine Land
https://searchengineland.com/microsoft-53-percent-of-mobile-searches-have-local-intent-55556
technology is
everywhere
but
(and here is our
opportunity)
‘integrated experience
s 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.jpghttp://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 organizati
on
across time,
touchpoints and
experiences
however we want to interact
http://www.flickr.com/photos/cdevers/3388665920
whenever we see a brand
http://www.flickr.com/photos/cafemama/542656019
outside
http://www.flickr.com/photos/penmachine/2971108982
inside
http://www.flickr.com/photos/streamishmc/2391505902
packaging
http://www.flickr.com/photos/andrewbain/2510253694
signs
http://www.flickr.com/photos/7577938@N02/4897443265
employees
http://www.flickr.com/photos/jaxphotography/267129315
things outside our control
all touchpoints
and channels impact
perception & loyalty
design across digital and
physical
across platforms
across platformsacross devices
across platformsacross devices
across channels
how?
5 principles5 methods
5 tools
5 principles
1. convenient2. connected3. consistent4. contextual
5. (a) cross time
convenient
Walgreen on iPad
http://www.flickr.com/photos/zachklein/3964249http://www.flickr.com/photos/jsrcyclist/3181389420
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
http://www.flickr.com/photos/dalydaly/10813808
15% bump in weekend
traffic
Trying on tent
http://www.flickr.com/photos/hollabackpack/184849492
design for researching online,
trying in store
(a)cross time
days
good
bad
years
http://www.flickr.com/photos/mcmortygreen/3176998867
customer lifecycle
http://www.flickr.com/photos/yourdon/2594767344
http://www.flickr.com/photos/sa_ku_ra/13009153
5 methods
1. think in terms of services
2. share the sandbox3. start walking 4. comfort in discomfort5. why vs. what
Waitress
1. Think in terms of services1. think in terms of services
Fluevog on iPad
From: [email protected]: [email protected]: Fluevog order 20110211-00072873Date: 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 Shoes205 Pine St.Seattle, WA 98101phone: (206)441-1065fax : (206)[email protected]/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
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 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.”
http://www.twobackpackers.com/wp-content/uploads/2009/07/REI-Backpacks.jpg
eek – I don’t know anything about store
design!
“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/
buying a tent
http://www.flickr.com/photos/jcast911/4037694806
for backyard?
http://www.flickr.com/photos/reway2007/427303733
or backcountry
snow?
5 tools
1. document the present
2. 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 everythin
g in between
think about the customer’s whole
journey
3. get behind the scenes
http://www.flickr.com/photos/honorapearls/4155009907/
http://www.flickr.com/photos/vitorcastillo/2994723741
are experiences supported?
http://www.flickr.com/photos/mattwright/1787856/
here?
http://www.flickr.com/photos/oldonliner/3484504583/
and here?
4. tell a story
http://www.flickr.com/photos/sugarpond/3016905349
Meet Jane
Outdoor Loyal38, 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!
Time to plan…
I want to go somewhere beautiful…
View
View
View
View
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
1. convenient2. connected3. consistent4. contextual
5. (a) cross time
5 methods
1. think in terms of services
2. share the sandbox3. start walking4. comfort in discomfort5. why vs. what
5 tools
1. document2. experience map3. get behind the
scenes4. tell a story5. cross train
break!
http://www.flickr.com/photos/johnmcnab/4298812324
try…
discovery
http://www.flickr.com/photos/kino-eye/226951415
internal stakeholder interviews
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
http://www.flickr.com/photos/elitatt/4959931232 http://www.flickr.com/photos/centralasian/4099680559
design games
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
http://www.flickr.com/photos/elitatt/4959938630
gamestorming - the book
http://www.delightability.com/wp-content/uploads/2010/08/rental-car-customer-journey.png
journeys
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
http://farm5.static.flickr.com/4023/4526736556_3b5a628b7f.jpg
service inventory
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)
exercise experience
map
http://www.thosepeskyusers.com/wp-content/uploads/2010/12/customer-experience-map.jpg
http://www.maya.com/portfolio/carnegie-library
http://everyonecampaign.com
http://www.businessweek.com/innovate/content/nov2008/id20081110_531328.htm
http://experiencematters.files.wordpress.com/2009/03/legowheel.png
try now
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
bicyclehttp://www.flickr.com/photos/sl4sh79/471062898
http://www.flickr.com/photos/jameshopkirk/5635553120
stand up, stretch, and sit together
what is the goal?what are the tasks?
what are the touchpoints?what are the decisions?
what support is needed?
from customer perspective…
personas
touchpoint touchpoint touchpoint touchpoint touchpoint
task
task
task
task
task
task
experience map
touchpoint
touchpoint touchpoint touchpoint touchpoint
need
decision
research
test ride
purchase
class
maintenance
experience mapt
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 journeyhttp://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
1. convenient2. connected3. consistent4. contextual
5. (a) cross time
touchpoint
touchpoint touchpoint touchpoint touchpoint
need
decision
research
test ride
purchase
class
maintenance
experience mapt
solutionhttp://www.flickr.com/photos/yannconz/2796311194
http://www.flickr.com/photos/jaaronfarr/314981744
mental models
214@jessmcmullin@samanthastarmer
Mental Models
http://www.rosenfeldmedia.com/books/mental-models
mental models - the book
http://www.flickr.com/photos/designetrecherche/546120971
comics
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
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
storyboards
http://nform.com/blog/images/Swimlane_example2.gif
swim lanes
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)
exercise service
blueprint
service blueprint
‘Front Stage’ (front line staff)
‘Back Stage’(support staff)
Support(systems,
databases)
Physical Evidence
(touchpoints)
Customer Action
The line of visibility
Service Blueprint
http://lovelearn.wordpress.com/2009/07/11/initial-blueprint/
228@jessmcmullin@samanthastarmer
SCAD Service Design Projecthttp://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
elements1. customer actions2. physical evidence (touchpoints)3. front stage, customer facing4. backstage, enabling actions5. support processes
service blueprint
‘Front Stage’ (front line staff)
‘Back Stage’(support staff)
Support(systems,
databases)
Physical Evidence
(touchpoints)
Customer action
The line of visibility
partner
partner
1. understand org structure
2. flex soft skills3. cultivate patience4. learn the big picture5. close the loop
Understand organizational structure1. understand org structure
2. flex soft skills
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
sell
5 ways to sell
1. understand executives’ goals
2. use metrics3. start at the grassroots - but work towards top-down
4. watch for the bodies5. tell a fairy tale
1. understand executive goals
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
4. watch for the bodies
5. tell a fairy tale
start
http://www.flickr.com/photos/62719770@N00/2959566124
5 actions
1. make the business case
2. listen across channels3. make new friends4. start with small wins5. share the wealth
make the business case
http://www.flickr.com/photos/10458725@N02/3042138367
make the business case• understand how your organization prioritizes• think about ROI• 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
listen across channels
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
http://averagecats.com/page/7
make new friends
hang with a new crowd 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…
start with small wins
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
http://www.flickr.com/photos/jimfrazier/1810966604/
share the wealth
everyone owns customer
experience
http://www.flickr.com/photos/baking_in_pearls/3960662314
thank you!!
questions??
http://www.flickr.com/photos/druclimb/3277540656/