Design for Cross-Channel Experiences

morville@semanticstudios.com

Design for
Cross-Channel Experiences

Samantha Starmer, REI
Peter Morville, Semantic Studios

1

who am I? morville@semanticstudios.com


3


4


5


Agenda
9:00 - 9:15 Introductions
9:15 - 10:30 IA: Beyond the Web (Peter)
10:30 - 11:00 Coffee Break
11:00 - 12:00 What is X-Channel? (Samantha)
Exercise #1: Experience Opportunities
12:00 - 1:30 Lunch Break
1:30 - 2:30 X-Channel: How (Peter & Samantha)
2:30 - 3:30 Exercise #2: Experience Mapping
4:00 - 5:00 Q&A, Discussion, Closing Remarks 6


Slides
Samantha’s
http://www.slideshare.net/sstarmer/

Peter’s
http://www.slideshare.net/morville/
http://semanticstudios.com/xchannel.pdf
http://prezi.com/aafmvya6bk7t/understanding-information-architecture/

7


Ubiquitous IA
Cross-Channel Strategy

Peter Morville, IA Summit 2012 8


#dtdt

9


Architecture
Design
Technology

Information Architecture: It’s What You Do First.
10

Polar Bear IA

in•for•ma•tion ar•chi•tec•turen.

• The structural design of shared
information environments.

• The combination of organization,
labeling, search, and navigation
systems in web sites and intranets.

• The art and science of shaping
information products and experiences
to support usability and findability.

• An emerging discipline and
community of practice focused on
bringing principles of design and
architecture to the digital landscape.

11


Fragmentation
Fragmentation into multiple
sites, domains, and identities is
clearly a major problem. Users
don’t know which site to visit
for which purpose.

Findability
Users can’t find what they need
from the home page, but most
users don’t come through the
front door. They enter via a web
search or a deep link, and are
confused by what they find.
Even worse, most never use the
Library, because its resources
aren’t easily findable.


Visual Thinking
Unwritten Rule #1

“Whoever best describes a
problem is the person most
likely to solve the problem.

…or, whoever draws the best
picture gets the funding.”

15

Web Strategy

1. One Library

2. Core Areas

3. Network Intelligence

16

Experience Across Channels

17


19

Search is a Complex, Adaptive System

Source: Search Patterns (2010) 20


21


Where architects use
forms and spaces to design
environments for inhabitation,
information architects use
nodes and links to create
environments for understanding.
Jorge Arango, Architectures

22


23
Bill Verplank, IxD11 Opening Keynote, http://vimeo.com/20285615 (00:19:30)


24


“Desire Lines” 25
Photo: Berkeley Path Gallery by Kevin Fox


26


27


Experiences Across Channels


The Future of Mobile Search

Location Aware
Location Aware Query byby Wandering
Search Wandering Multisensory

The Future of Mobile Search


World’s Best
Information Architect

31
Source: Subject to Change (2008)


33


“Collaborative Consumption
describes the rapid explosion
in traditional sharing,
bartering, lending, trading,
renting, gifting, and swapping
reinvented through network
technologies on a scale and in
ways never possible before.”

34

Desktop

Mobile

Kiosk
35


Up The Stairs
“How do we make it easier for people to learn about multi-channel possibilities?”
http://findability.org/archives/000640.php
36


37

Sensors morville@semanticstudios.com

• Location (GPS)
• Orientation (Compass)
• Motion (Accelerometer)
• Orientation/Motion (Gyroscope)
• Touch (Multi-Touch, Gestural)
• Light (Ambient)
• Proximity
• Device (Bluetooth)
• Audio (Microphone)
• Image/Video (Camera)
• RFID (Soon)
39


40


“After a half-hour, a three-tone alert sounds…If the
bottle still has not been opened, the system makes an
automated reminder phone call to the patient or a
caregiver. The GlowCap system compiles adherence data
which anyone can be authorized to track. That way the
doctor can make sure Gramps stays on his meds.”
41


42


43

find·a·bil·i·ty n
The quality of being locatable or
navigable.

The degree to which an object is
easy to discover or locate.

The degree to which a system or
environment supports wayfinding,
navigation, and retrieval.
am·bi·ent adj
Surrounding; encircling;
enveloping (e.g., ambient air)
the ability to find anyone or anything
from anywhere at anytime 44


David Rose
ambientdevices.com

45


46


47


48


BrainPort

Camera in glasses
captures video.

Image recreated on
grid of 400 electrodes.

User feels the shape
on the tongue.

Brain learns to see
through the tongue.
49

Touchpoint Taxonomy morville@semanticstudios.com
Media
Book
Channel Platform Newspaper
Web Web Magazine
Product Social Media iOS Video
Packaging Email Android Audio
Print Catalog Messaging Poster
Mac OS X Billboard
Telephone
Call Center Print
MS Windows
Website
Blog Context
Facebook Home
Twitter Work
Walking
YouTube Device Driving
Email Desktop Shopping
Direct Mail Laptop
Scale
Plane
Radio Mobile Party
Covert
Tablet Personal
Television Television
Mobile
Social
Personal
Kiosk Location
Environmental
Time
Architectural
Task
Urban 50


reFraming
1. Classic Information Architecture(Polar Bear).

2. Web Strategy (Web, Mobile, Social).

3. Cross-Channel Strategy (Physical, Digital).

4. Intertwingularity (Ubiquitous, Ambient).

51


52

What is Information Architecture?

http://www.maya.com/the-feed/what-is-information-architecture 53


What architects do for
buildings, information architects do
for…


55


“There is a problem in discussing systems only
with words. Words and sentences must, by
necessity, come only one a time in linear, logical
order. Systems happen all at once. They are
connected not just in one direction, but in many
directions simultaneously. To discuss them
properly, it is necessary to use a language that
shares some of the same properties as the
phenomena under discussion.”


"In an era of cross-channel
experiences and product-service
systems, it makes less and less
sense to design sitemaps and
wireframes without also..."


“…mapping the customer journey, modeling the system dynamics, and
analyzing impacts upon business processes, incentives, and the org chart."


59


The fast parts learn, propose, and
absorb shocks; the slow parts
remember, integrate, and constrain.

The fast parts get all the attention.
The slow parts have all the power.

Steward Brand on “Pace Layering”


62


Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).

http://is.gd/iaprezi


65


Agenda
9:00 - 9:15 Introductions
9:15 - 10:30 IA: Beyond the Web (Peter)
11:00 - 12:00 What is X-Channel? (Samantha)
Exercise #1: Experience Mapping
12:00 - 1:30 Lunch Break
1:30 - 2:30 X-Channel: How (Peter & Samantha)
2:30 - 3:30 Exercise #2: Experience Mapping
4:00 - 5:00 Q&A, Discussion, Closing Remarks 66


A Framework for

Peter Morville, IA Summit 2012 67


68

goals, strategy, brand,
process, technology,
resources, politics, culture…

objects, types, metadata, audiences, user needs,
structure, relationships, use cases, mental models,
source, volume, growth vocabulary, behavior
69


70


Design Principles

71


http://findability.org/archives/000652.php

Composition multi- or cross-channel; mix of
platforms, devices, media; coherence

Consistency brand, features, organization, interaction
balanced against value of optimization

Connection links, tags, signs, maps; call to action

Continuity bookmark, resume playback, flow
Context personal, social, location, time, task
72
Conflict identify/resolve, org chart, free-riding


Adapted from Cross-Platform Service User Experience
73
portal.acm.org/citation.cfm?id=1851637


Today's “service systems” may include interrelated
sub-systems (e.g., person-to-person, self-service)
across multiple locations, devices, and channels; and
customer satisfaction is “influenced by the extent of
integration and consistency” across those channels.

Bridging the “Front Stage” and “Back Stage” in Service System
Design by Robert J. Glushko and Lindsay Tabas

74


Craft beautiful designs that deliver a quality experience
to your users no matter how large (or small) their display.
1. Fluid Grids
2. Flexible Images
3. Media Queries

75


76

Why Separate Mobile & Desktop Webmorville@semanticstudios.com
Pages at Bagcheck?
With a dual template system, we were able to optimize:
1. Source Order
2. Media (Speed, Quality, Interaction)
3. URL Structure Navigation
4. Application Design at Top

Navigation at
Bottom

77

Mobile

78
Source: Mobile First (2011) by Luke Wroblewski


79
Source: Mobile First (2011) by Luke Wroblewski


81


82


83


84


85

Transmedia Design by Jakob Nielsen morville@semanticstudios.com
http://www.useit.com/alertbox/3-screens-transmedia.html

“The highest-value use will stay predominantly on desktop.”
PC
Big Screens
Better Input Devices
Faster Bandwidth
Hardware Oomph
Software Maturity
Printing

Mobile
“The best computer is
the one you have with
you.”

“Most companies must support both device classes
…with separate UI designs.” 86


To make the right decisions about composition and
consistency, you need a cross-channel strategy.

87


Design for Connection

88


Over 50% of REI
online business is
picked up in a store.

89


90


91

Barcode
Identifies a Product (e.g. Kellogg’s Frosted Flakes 14 oz.)

QR Code
Initiates a Response (e.g., URL, Message, Phone, SMS, Email)

92


Price Check
Product Detail
Endless Aisle 94

Continuity morville@semanticstudios.com

95

Conflict morville@semanticstudios.com

96

Context morville@semanticstudios.com

97


Cross-Channel
We must leave our
Marathon
comfort zones, cross-train,
and collaborate.

Triathlon 98


99


100


101


102


Source:delightability.com

103

Mental Models
Tasks

Features

http://www.rosenfeldmedia.com/books/mental-models/ 104


105


106


http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
107


108

UX Swimlanes

109


110
Urban Sensing by Dan Hill

Resources morville@semanticstudios.com

111


IA Therefore I Am
Peter Morville

Understanding IA (Prezi)
http://is.gd/iaprezi

Blog
http://findability.org/

Twitter
@morville
112

Design for Cross-Channel Experiences

More Related Content

Design for Cross-Channel Experiences