cross channel 2

55
Designing Cross- Channel Experiences by @TylerTate

Upload: tyler-tate

Post on 27-Nov-2014

590 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Cross channel 2

Designing Cross-Channel Experiencesby @TylerTate

Page 2: Cross channel 2
Page 3: Cross channel 2
Page 4: Cross channel 2

Designing Cross-Channel Experiences

Page 5: Cross channel 2

1. A story

2. Three design principles

3. Two design methods

Designing Cross-Channel Experiences

Page 6: Cross channel 2

Story time

Sketch and tweet your version of the story. @camusability #sketchnote

Page 7: Cross channel 2

Google’s “Project Glass” prototype

Page 8: Cross channel 2

Predictingthefutureisn'twhatitusedtobe.

Page 9: Cross channel 2

Are there timeless approaches to designing cross-channel ecosystems?

Page 10: Cross channel 2

Mark Weiser

Page 11: Cross channel 2

Adam Greenfield

Page 12: Cross channel 2

“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 13: Cross channel 2

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 14: Cross channel 2

Design Principles

Page 15: Cross channel 2

Design Principles1. Division of labour

Page 16: Cross channel 2

Adam Smith

Page 17: Cross channel 2

“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 18: Cross channel 2
Page 19: Cross channel 2

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

Page 20: Cross channel 2

Design Principles1. Division of labour

2. Consistency

Page 21: Cross channel 2

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

— Merriam-Webster Dictionary

Page 22: Cross channel 2

Internal

Local

External

Dimension #1: Realm

Page 23: Cross channel 2

Function

Organisation

Aesthetics

Dimension #2: Nature

Page 24: Cross channel 2

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

Page 25: Cross channel 2

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

Page 26: Cross channel 2

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 27: Cross channel 2

Design Principles1. Division of labour

2. Consistency

3. Continuity

Page 28: Cross channel 2

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

Page 29: Cross channel 2
Page 30: Cross channel 2

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

Page 31: Cross channel 2

Design Methods1. Cross-Channel Blueprint

Page 32: Cross channel 2

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 34: Cross channel 2

Resmini and Rosati’s CHU cube diagram

Page 35: Cross channel 2

Gianluca Brugnoli’s touchpoints matrix.

Page 36: Cross channel 2

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 37: Cross channel 2

Group time

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

Page 38: Cross channel 2

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

Page 39: Cross channel 2

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 40: Cross channel 2

1. Identify user actions.

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

Page 41: Cross channel 2

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 42: Cross channel 2

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 43: Cross channel 2

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 44: Cross channel 2

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 45: Cross channel 2

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 46: Cross channel 2

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 47: Cross channel 2

Group time

Tweet your cross-channel blueprints. @camusability #sketchnote

Page 48: Cross channel 2

Design Methods1. Cross-Channel Blueprint

2. Experience Map

Page 49: Cross channel 2

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 50: Cross channel 2

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 51: Cross channel 2

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 52: Cross channel 2

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 53: Cross channel 2

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 54: Cross channel 2

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 55: Cross channel 2

Designing Cross-Channel Experiencesby @TylerTate