Designing Cross-
Channel Experiences
by @TylerTate

Designing Cross-
Channel Experiences

Designing Cross-
Channel Experiences
1. A story
2. Three design principles
3. Two design methods

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

Google’s “Project Glass” prototype

Predicting
the
future
isn't
what
it
used
to
be.

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 Principles

Design Principles
1. 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 Principles
1. 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 Principles
1. Division of labour
2. Consistency
3. Continuity

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

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

Design Methods
1. 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.

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

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?

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

1. Identify user actions.
2. List the channels. What channels compose the
ecosystem? Think both digital and physical.

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

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 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

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 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

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.
@camusability #sketchnote

Design Methods
1. 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.

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.

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.

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
by @TylerTate