Designing Cross-Channel Experiences

56
Designing Cross- Channel Experiences by @TylerTate

description

Presented at UXOxford on November 8, 2012. As people interact with information across a growing number channels both digital (such as computers, tablets, phones) and physical (from print to the built environment), a new form of design is becoming increasingly important. The most successful businesses of today and tomorrow will be those who can provide cohesive experiences to their customers across the numerous channels that those customers demand. While designers are ideally suited to deliver on this challenge, we must expand our mindset and develop new tools in order to succeed. This talk aims to achieve just that. You will learn about three characteristics of cohesive cross-channel experiences—division of labour, consistency, and continuity—and how to put those principles into practice using two design methods: the cross-channel blueprint and the experience map.

Transcript of Designing Cross-Channel Experiences

Page 1: Designing Cross-Channel Experiences

Designing Cross-Channel Experiencesby @TylerTate

Page 2: Designing Cross-Channel Experiences
Page 3: Designing Cross-Channel Experiences
Page 4: Designing Cross-Channel Experiences
Page 5: Designing Cross-Channel Experiences
Page 6: Designing Cross-Channel Experiences
Page 7: Designing Cross-Channel Experiences

1. A story

2. Three design principles

3. Two design methods

Designing Cross-Channel Experiences

Page 8: Designing Cross-Channel Experiences

Story time

Sketch and tweet your version of the story. #UXOxford #storysketch

Page 9: Designing Cross-Channel Experiences

Google’s “Project Glass” prototype

Page 10: Designing Cross-Channel Experiences

Predictingthefutureisn'twhatitusedtobe.

Page 11: Designing Cross-Channel Experiences

Are there timeless approaches to designing cross-channel ecosystems?

Page 12: Designing Cross-Channel Experiences

Mark Weiser

Page 13: Designing Cross-Channel Experiences

Adam Greenfield

Page 14: Designing Cross-Channel Experiences

“Most of the functionality we now associate with these boxes on our desks, these slabs that warm our laps, will be dispersed into both the built environment and the wide variety of everyday objects we typically use there.”

— Adam Greenfield in “Everyware”

Page 15: Designing Cross-Channel Experiences

Effective design is becoming less about creating the end-all-be-all website, and more about fostering a cohesive ecosystem where the digital—such as web and mobile—works in harmony with the physical—from print media to the natural environment.

Page 16: Designing Cross-Channel Experiences

Design Principles1. Division of labour

Page 17: Designing Cross-Channel Experiences

Adam Smith

Page 18: Designing Cross-Channel Experiences

“A lot of the functions that the devices tried to do, such as editing the video or the pictures, they did poorly because they had small screens and could not easily accommodate menus filled with lots of functions. Computers could handle that more easily.”

— Steve Jobs, quoted by Walter Isaacson

Page 19: Designing Cross-Channel Experiences
Page 20: Designing Cross-Channel Experiences

Each channel within the ecosystem should focus on what it does best.

Page 21: Designing Cross-Channel Experiences

Design Principles1. Division of labour

2. Consistency

Page 22: Designing Cross-Channel Experiences

“Consistency is the agreement or harmony of parts or features to one another or a whole.”

— Merriam-Webster Dictionary

Page 23: Designing Cross-Channel Experiences

Internal

Local

External

Dimension #1: Realm

Page 24: Designing Cross-Channel Experiences

Function

Organisation

Aesthetics

Dimension #2: Nature

Page 25: Designing Cross-Channel Experiences

1. The function of a channel should be optimized for its own comparative advantage.

Page 26: Designing Cross-Channel Experiences

2. Organizational consistency usually favor the external ecosystem over the local or internal.

Page 27: Designing Cross-Channel Experiences

3. Aesthetics. While the visual aspects that involve branding (such as color) should be consistent with the ecosystem, the overriding style of the user interface should match its local habitat.

Page 28: Designing Cross-Channel Experiences

Design Principles1. Division of labour

2. Consistency

3. Continuity

Page 29: Designing Cross-Channel Experiences

Continuity is the principle of propagating the user’s state across all channels of the ecosystem.

Page 30: Designing Cross-Channel Experiences
Page 31: Designing Cross-Channel Experiences

Design MethodsWe must view the ecosystem as a cohesive whole, as well as understand how users traverse its many parts.

Page 32: Designing Cross-Channel Experiences

Design Methods1. Cross-Channel Blueprint

Page 33: Designing Cross-Channel Experiences

The cross-channel blueprint provides an overview of the ecosystem's two most fundamental attributes: the channels of which it's composed, and the user actions it must facilitate.

Page 35: Designing Cross-Channel Experiences

Resmini and Rosati’s CHU cube diagram

Page 36: Designing Cross-Channel Experiences

Gianluca Brugnoli’s touchpoints matrix.

Page 37: Designing Cross-Channel Experiences

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

Page 38: Designing Cross-Channel Experiences

Group time

Break into groups and get ready to create your own cross-channel blueprint.

Page 39: Designing Cross-Channel Experiences

1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?

Page 40: Designing Cross-Channel Experiences

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

Page 41: Designing Cross-Channel Experiences

1. Identify user actions.

2. List the channels. What channels compose the ecosystem? Think both digital and physical.

Page 42: Designing Cross-Channel Experiences

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

Page 43: Designing Cross-Channel Experiences

1. Identify user actions.

2. List the channels.

3. Prioritise and describe each channel-action. Determine the priority that each action should receive for a given channel. At the same time as setting priorities, also briefly describe how each action would be achieved.

Page 44: Designing Cross-Channel Experiences

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

Page 45: Designing Cross-Channel Experiences

1. Identify user actions.

2. List the channels.

3. Prioritise and describe each channel-action.

4. Identify shared components. Think about the behind-the-scenes components that will be necessary to empower each user action.

Page 46: Designing Cross-Channel Experiences

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

Page 47: Designing Cross-Channel Experiences

1. A global view of important user actions

2. The possible channels through which users might attempt those actions

3. A set of task priorities for each channel

4. A set of channel priorities for each action

5. An overview of which components need to be shared across channels

Page 48: Designing Cross-Channel Experiences

Group time

Tweet your cross-channel blueprints. #UXOxford #ccblueprint

Page 49: Designing Cross-Channel Experiences

Design Methods1. Cross-Channel Blueprint

2. Experience Map

Page 50: Designing Cross-Channel Experiences

1. Outline the user’s journey. Start by creating a list of all the occurrences that constitute the user’s experience, not just within the ecosystem, but throughout the entire journey from beginning to end. These occurrences can then be arranged horizontally to form a timeline.

Page 51: Designing Cross-Channel Experiences

1. Outline the user’s journey.

2. List the channel and goal for each step of the user’s journey. Channel refers to the medium through which the action is performed. Goal describes the underlying motivation for performing the action. These components should be consistent with the channel and actions dimensions of the cross-channel blueprint.

Page 52: Designing Cross-Channel Experiences

1. Outline the user’s journey.

2. List the channel and goal.

3. Describe the user’s emotion and rate their satisfaction for every step of the process. In order to be useful, however, such reporting should be based on first-hand observation of the user.

Page 53: Designing Cross-Channel Experiences

Jouney

Goal

Channel

Amir is invited on acamping trip in twoweeks time.

He searchesGoogle for "mensoutdoor jackets".

He realizes he needsWR�ĺQG�D�QHZ�MDFNHWbefore the trip.

Optimism

Emotion

He clicks on each ofWKH�WRS�ĺYH�OLQNV�DQGbrowses the selectionof several onlineretailers.

Amir is excitedabout the trip

Amir doesn’t knowwhere to look—too many differentvendors.

He doesn’t knowmuch about jackets,and is daunted bythe task.

He is overwhelmedat the hundreds ofjackets available.

Web

Explore

Page 54: Designing Cross-Channel Experiences

Jouney

Goal

Channel

Amir is invited on acamping trip in twoweeks time.

He searchesGoogle for "mensoutdoor jackets".

He realizes he needsWR�ĺQG�D�QHZ�MDFNHWbefore the trip.

Optimism

Emotion

He clicks on each ofWKH�WRS�ĺYH�OLQNV�DQGbrowses the selectionof several onlineretailers.

Eventually, hedetermines that anouter shell jacketwould be ideal forhis trip.

He returns to Googleand searches for"mens outer shelljackets". EveryWareis the second link.

He arrives onEveryWare's outershell jackets landingpage. There are over50 jackets listed.

Amir looks throughevery page of results,clicking on about adozen jackets alongthe way.

He adds 4 of thejackets to hisfavorites list.

Amir is excitedabout the trip

Amir doesn’t knowwhere to look—too many differentvendors.

He doesn’t knowmuch about jackets,and is daunted bythe task.

He is overwhelmedat the hundreds ofjackets available.

Amir becomes muchmore optimisticonce identifying thetype of jacket thatEHVW�ĺWV�KLV�QHHGV�

He’s purchasedsomething fromEveryWare before.

Amir is a bitfrustrated thatthere are so manysoft shell jacketsto look through.

Most of the jacketsdon’t match hisneeds, so he’spleased that he cannarrow his selection.

He’s reasonablyhappy with hisprogress so far.

Web

Explore Organize

He clicks on a linkto request a printcatalog, and thensigns off.

The EveryWarecatalog arrives in theSRVW��$PLU�ĻLSVthrough it overbreakfast.

He spots another twojackets that he likes,which he adds to hisfavorites list using hisphone.

Amir reviews hisfavorites list from hiscomputer, adding acomment to eachjacket.

Still unsure, Amirdecides to go to theEveryWare store andtry the jackets on.

Walking down thestreet, Amir seessomeone wearing anouter shell jacket thathe really likes.

Searching for thebrand name in theEveryWare app, AmirĺQGV�WKH�MDFNHW�

Amir adds the jacketto his favorites list,and shares it with afriend along, askingfor his friend’s opinion.

Arriving at the store,Amir makes his wayto the jackets section.+H�WULHV�WR�ĺQG�WKHjackets on his list.

Having tried severalon, Amir pays for hisnew jacket—the onehe had seen on theway to the store.

Amir is weary oflooking.

Amir is pleasedwhen the catalogarrives.

He’s pleased toĺQG�DQRWKHU�FRXSOHpossibilities, butfeels even furtheraway from a decision.

There’s no clearwinner, and Amirdoesn’t love anyof them.

He’s a bit frustratedthat he has tospend his afternoongoing into the store.

That’s it! That’sexactly what I want!Amir’s optimismimmediately soars.

Amir is happy tosee that EveryWarecarry the jacket.

Amir is just a bitgiddy and needs toshare his excitementwith someone.

+H�UHĻHFWV�RQ�KRZWHGLRXV�LW�LV�WR�ĺQGthe items on hisfavorites list in thestore itself.

Amir is pleased andfeels a weight liftedfrom his shoulders:he can now lookforward to his trip.

Catalog Catalog/Phone Computer Phone Store

Explore Lookup Organize Lookup PurchaseOrganize

Page 55: Designing Cross-Channel Experiences

1. A story

2. Three design principles

i. Division of Labour

ii. Consistency

iii. Continuity

3. Two design methods

i. Cross-Channel Blueprint

ii. Experience Map

Designing Cross-Channel Experiences

Page 56: Designing Cross-Channel Experiences

Designing Cross-Channel Experiencesby @TylerTate