• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing Cross-Channel Experiences
 

Designing Cross-Channel Experiences

on

  • 924 views

Presented at UXOxford on November 8, 2012. ...

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.

Statistics

Views

Total Views
924
Views on SlideShare
899
Embed Views
25

Actions

Likes
7
Downloads
13
Comments
0

4 Embeds 25

http://lanyrd.com 17
https://twitter.com 4
http://www.twylah.com 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing Cross-Channel Experiences Designing Cross-Channel Experiences Presentation Transcript

    • Designing Cross-Channel Experiencesby @TylerTate
    • Designing Cross- Channel Experiences1. A story2. Three design principles3. Two design methods
    • Story timeSketch and tweet your version of the story.#UXOxford #storysketch
    • Google’s “Project Glass” prototype
    • Predictingthefutureisntwhatitusedtobe.
    • Are there timeless approaches to designingcross-channel ecosystems?
    • Mark Weiser
    • Adam Greenfield
    • “Most of the functionality we now associatewith these boxes on our desks, these slabsthat warm our laps, will be dispersed intoboth the built environment and the wide varietyof everyday objects we typically use there.”— Adam Greenfield in “Everyware”
    • Effective design is becoming less aboutcreating the end-all-be-all website, and moreabout fostering a cohesive ecosystem wherethe digital—such as web and mobile—worksin harmony with the physical—from printmedia to the natural environment.
    • Design Principles1. Division of labour
    • Adam Smith
    • “A lot of the functions that the devices triedto do, such as editing the video or thepictures, they did poorly because they hadsmall screens and could not easilyaccommodate menus filled with lots offunctions. Computers could handle thatmore easily.”— Steve Jobs, quoted by Walter Isaacson
    • Each channel within the ecosystem shouldfocus on what it does best.
    • Design Principles1. Division of labour2. Consistency
    • “Consistency is the agreement or harmony ofparts or features to one another or a whole.”— Merriam-Webster Dictionary
    • InternalLocalExternalDimension #1: Realm
    • FunctionOrganisationAestheticsDimension #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 labour2. Consistency3. Continuity
    • Continuity is the principle of propagating theuser’s state across all channels of theecosystem.
    • Design MethodsWe must view the ecosystem as a cohesivewhole, as well as understand how userstraverse its many parts.
    • Design Methods1. Cross-Channel Blueprint
    • The cross-channel blueprint provides anoverview of the ecosystems two mostfundamental attributes: the channels ofwhich its composed, and the user actions itmust facilitate.
    • A service blueprint created by Brandon Schauer.
    • Resmini and Rosati’s CHU cube diagram
    • Gianluca Brugnoli’s touchpoints matrix.
    • Lookup Explore Compare Organize PurchasePrint 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 onlineWebsite 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 phoneTablet 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 checkoutMobile 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 editPhysical 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-goShared 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
    • Group timeBreak into groups and get ready to createyour own cross-channel blueprint.
    • 1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?
    • Lookup Explore Compare Organize PurchasePrint 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 onlineWebsite 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 phoneTablet 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 checkoutMobile 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 editPhysical 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-goShared 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
    • 1. Identify user actions.2. List the channels. What channels compose the ecosystem? Think both digital and physical.
    • Lookup Explore Compare Organize PurchasePrint 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 onlineWebsite 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 phoneTablet 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 checkoutMobile 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 editPhysical 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-goShared 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
    • 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.
    • Lookup Explore Compare Organize PurchasePrint 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 onlineWebsite 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 phoneTablet 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 checkoutMobile 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 editPhysical 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-goShared 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
    • 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.
    • Lookup Explore Compare Organize PurchasePrint 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 onlineWebsite 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 phoneTablet 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 checkoutMobile 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 editPhysical 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-goShared 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
    • 1. A global view of important user actions2. The possible channels through which users might attempt those actions3. A set of task priorities for each channel4. A set of channel priorities for each action5. An overview of which components need to be shared across channels
    • Group timeTweet your cross-channel blueprints.#UXOxford #ccblueprint
    • Design Methods1. Cross-Channel Blueprint2. 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.
    • Channel WebJouney 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 ExploreOptimismEmotion 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.
    • 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 EveryWares 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 StoreHe 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 hiscatalog, 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 onesigns 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 PurchaseAmir 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 andooking. 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.
    • Designing Cross- Channel Experiences1. A story2. Three design principles i. Division of Labour ii. Consistency iii. Continuity3. Two design methods i. Cross-Channel Blueprint ii. Experience Map
    • Designing Cross-Channel Experiencesby @TylerTate