Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Cross channel 2

  1. 1. Designing Cross- Channel Experiences by @TylerTate
  2. 2. Designing Cross- Channel Experiences
  3. 3. Designing Cross- Channel Experiences 1. A story 2. Three design principles 3. Two design methods
  4. 4. Story time Sketch and tweet your version of the story. @camusability #sketchnote
  5. 5. Google’s “Project Glass” prototype
  6. 6. Predicting the future isn't what it used to be.
  7. 7. Are there timeless approaches to designing cross-channel ecosystems?
  8. 8. Mark Weiser
  9. 9. Adam Greenfield
  10. 10. “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”
  11. 11. 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.
  12. 12. Design Principles
  13. 13. Design Principles 1. Division of labour
  14. 14. Adam Smith
  15. 15. “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
  16. 16. Each channel within the ecosystem should focus on what it does best.
  17. 17. Design Principles 1. Division of labour 2. Consistency
  18. 18. “Consistency is the agreement or harmony of parts or features to one another or a whole.” — Merriam-Webster Dictionary
  19. 19. Internal Local External Dimension #1: Realm
  20. 20. Function Organisation Aesthetics Dimension #2: Nature
  21. 21. 1. The function of a channel should be optimized for its own comparative advantage.
  22. 22. 2. Organizational consistency usually favor the external ecosystem over the local or internal.
  23. 23. 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.
  24. 24. Design Principles 1. Division of labour 2. Consistency 3. Continuity
  25. 25. Continuity is the principle of propagating the user’s state across all channels of the ecosystem.
  26. 26. Design Methods We must view the ecosystem as a cohesive whole, as well as understand how users traverse its many parts.
  27. 27. Design Methods 1. Cross-Channel Blueprint
  28. 28. 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.
  29. 29. A service blueprint created by Brandon Schauer.
  30. 30. Resmini and Rosati’s CHU cube diagram
  31. 31. Gianluca Brugnoli’s touchpoints matrix.
  32. 32. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  33. 33. Group time Break into groups and get ready to create your own cross-channel blueprint.
  34. 34. 1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?
  35. 35. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  36. 36. 1. Identify user actions. 2. List the channels. What channels compose the ecosystem? Think both digital and physical.
  37. 37. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  38. 38. 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.
  39. 39. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  40. 40. 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.
  41. 41. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  42. 42. 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
  43. 43. Group time Tweet your cross-channel blueprints. @camusability #sketchnote
  44. 44. Design Methods 1. Cross-Channel Blueprint 2. Experience Map
  45. 45. 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.
  46. 46. 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.
  47. 47. 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.
  48. 48. Channel Web Jouney Amir is invited on a He realizes he needs He searches He clicks on each of camping trip in two Google for "mens weeks time. before the trip. outdoor jackets". browses the selection of several online retailers. Goal Explore Optimism Emotion Amir is excited He doesn’t know Amir doesn’t know He is overwhelmed about the trip much about jackets, where to look— at the hundreds of and is daunted by too many different jackets available. the task. vendors.
  49. 49. Channel Web Jouney Amir is invited on a He realizes he needs He searches He clicks on each of Eventually, he He returns to Google He arrives on Amir looks through He adds 4 of the camping trip in two Google for "mens determines that an and searches for EveryWare's outer every page of results, jackets to his weeks time. before the trip. outdoor jackets". browses the selection outer shell jacket "mens outer shell shell jackets landing clicking on about a favorites list. of several online would be ideal for jackets". EveryWare page. There are over dozen jackets along retailers. his trip. is the second link. 50 jackets listed. the way. Goal Explore Organize Optimism Emotion Amir is excited He doesn’t know Amir doesn’t know He is overwhelmed Amir becomes much He’s purchased Amir is a bit Most of the jackets He’s reasonably about the trip much about jackets, where to look— at the hundreds of more optimistic something from frustrated that don’t match his happy with his and is daunted by too many different jackets available. once identifying the EveryWare before. there are so many needs, so he’s progress so far. the task. vendors. type of jacket that soft shell jackets pleased that he can to look through. narrow his selection. Catalog Catalog/Phone Computer Phone Store He clicks on a link The EveryWare He spots another two Amir reviews his Still unsure, Amir Walking down the Searching for the Amir adds the jacket Arriving at the store, Having tried several o request a print catalog arrives in the jackets that he likes, favorites list from his decides to go to the street, Amir sees brand name in the to his favorites list, Amir makes his way on, Amir pays for his catalog, and then which he adds to his computer, adding a EveryWare store and someone wearing an EveryWare app, Amir and shares it with a to the jackets section. new jacket—the one signs off. through it over favorites list using his comment to each try the jackets on. outer shell jacket that friend along, asking he had seen on the breakfast. phone. jacket. he really likes. for his friend’s opinion. jackets on his list. way to the store. Explore Organize Lookup Organize Lookup Purchase Amir is weary of Amir is pleased He’s pleased to There’s no clear He’s a bit frustrated That’s it! That’s Amir is happy to Amir is just a bit Amir is pleased and ooking. when the catalog winner, and Amir that he has to exactly what I want! see that EveryWare giddy and needs to feels a weight lifted arrives. possibilities, but doesn’t love any spend his afternoon Amir’s optimism carry the jacket. share his excitement the items on his from his shoulders: feels even further of them. going into the store. immediately soars. with someone. favorites list in the he can now look away from a decision. store itself. forward to his trip.
  50. 50. 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
  51. 51. Designing Cross- Channel Experiences by @TylerTate

×