Designing Cross-Channel Experiences
Post on 05-Dec-2014
1090 Views
Preview:
DESCRIPTION
Transcript
Designing Cross-Channel Experiencesby @TylerTate
1. A story
2. Three design principles
3. Two design methods
Designing Cross-Channel Experiences
Story time
Sketch and tweet your version of the story. #UXOxford #storysketch
Google’s “Project Glass” prototype
Predictingthefutureisn'twhatitusedtobe.
Are there timeless approaches to designing cross-channel ecosystems?
Mark Weiser
Adam Greenfield
“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”
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.
Design Principles1. Division of labour
Adam Smith
“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
Each channel within the ecosystem should focus on what it does best.
Design Principles1. Division of labour
2. Consistency
“Consistency is the agreement or harmony of parts or features to one another or a whole.”
— Merriam-Webster Dictionary
Internal
Local
External
Dimension #1: Realm
Function
Organisation
Aesthetics
Dimension #2: Nature
1. The function of a channel should be optimized for its own comparative advantage.
2. Organizational consistency usually favor the external ecosystem over the local or internal.
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.
Design Principles1. Division of labour
2. Consistency
3. Continuity
Continuity is the principle of propagating the user’s state across all channels of the ecosystem.
Design MethodsWe must view the ecosystem as a cohesive whole, as well as understand how users traverse its many parts.
Design Methods1. Cross-Channel Blueprint
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.
A service blueprint created by Brandon Schauer.
Resmini and Rosati’s CHU cube diagram
Gianluca Brugnoli’s touchpoints matrix.
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
Group time
Break into groups and get ready to create your own cross-channel blueprint.
1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?
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
1. Identify user actions.
2. List the channels. What channels compose the ecosystem? Think both digital and physical.
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
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.
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
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.
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
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
Group time
Tweet your cross-channel blueprints. #UXOxford #ccblueprint
Design Methods1. Cross-Channel Blueprint
2. Experience Map
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.
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.
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.
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
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
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
Designing Cross-Channel Experiencesby @TylerTate
top related