// SECTION / SUBSECTION Designing for multi-targeted experiences In Context Guillermo Torres & Aynne Valencia UX Australia, Canberra 08.28.09
Nov 01, 2014
// SECTION / SUBSECTION
Designing for multi-targeted experiencesIn Context
Guillermo Torres & Aynne ValenciaUX Australia, Canberra 08.28.09
IN CONTEXT: DESIGNING MULTITARGETED EXPERIENCES
Guillermo Torres Aynne Valencia
IN CONTEXT: DESIGNING MULTITARGETED EXPERIENCES
The State Of Our Practice
Examples
Design Deliverables
// THE STATE OF OUR PRACTICE
Desktop Web
// THE STATE OF OUR PRACTICE
Personas
Concept Model
Site Maps
Flow Charts
Wireframes
Desktop Web
// THE STATE OF OUR PRACTICE
Desktop Web
Widgets/ Air Apps
Connected Apps
Social Platform
Rich Media Banners
// THE STATE OF OUR PRACTICE
Desktop Web Mobile Kiosks
Widgets/ Air Apps
Connected Apps
Social Platform
Rich Media Banners
Smartphone Apps
AugmentedReality
Gaming Consoles
Touchscreen
Internet Enabled TV
// THE STATE OF OUR PRACTICE
Desktop Web
Smartphone Apps
// THE STATE OF OUR PRACTICE
Web
Air Apps/Widgets
Social Platform
Rich Media Banners
Gaming Consoles
// THE STATE OF OUR PRACTICE / SUBSECTION
Mul⋅ti⋅tar⋅get⋅ed Ex⋅pe⋅ri⋅enceOne experience that runs across multiple platforms and is appropriate to the context of use.
// THE STATE OF OUR PRACTICE / SUBSECTION
Publishers Media and Advertising Software
Who is doing this?
// THE STATE OF OUR PRACTICE / A CALL FOR ACTION
A Call For Action
// EXAMPLES / GO WORLD
// EXAMPLES / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
Hub Experience
Hub Experience
main site
YouTube Mobile
TV
main site
YouTube Mobile
TV
main site
YouTube Mobile
TV
main site
YouTube Mobile
TV
Other Models
Curated Experience
Curated Experience
Curated Experience
// EXAMPLE / FACEBOOK
// EXAMPLE / FACEBOOK
// EXAMPLE / FACEBOOK
// EXAMPLE / CURATED EXPERIENCE
Consolidates snippets of information
Sensitive to the context of the device or platform
Smart about what to show and what to suppress
Flows and features may vary depending on where and how the user consumes them
Cloned Experience
Cloned Experience
// EXAMPLE / TWITTER
// EXAMPLE / TWITTER
// EXAMPLE / TWITTER
// EXAMPLE / TWITTER
// EXAMPLE / EVERNOTE
Evernote
// EXAMPLE / EVERNOTE
// EXAMPLE / EVERNOTE
// EXAMPLE / EVERNOTE
// EXAMPLE / CLONED EXPERIENCE
Replicates the same functionality across multiple channels
Useful for when you want the user to learn features once
Has the same basic user flows, features and functions
Distributed Experience
// EXAMPLE / LOST RING
The Lost Ring
// EXAMPLE / LOST RING
// EXAMPLE / LOST RING
// EXAMPLE / LOST RING
// EXAMPLE / LOST RING
// EXAMPLE / LOST RING
// EXAMPLE / DISTRIBUTED EXPERIENCES
There can be multiple entry and exit points
Users can have discreet "mini-experiences"
There is no consistency in user flows, features or functions
// DESIGN DELIVERABLES
Design Deliverables
// DESIGN DELIVERABLES / ELEVATOR PITCH
El⋅e⋅va⋅tor PitchShort sentence, or statement describing the experience.
The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds and 100-150 words).
// DESIGN DELIVERABLES / ELEVATOR PITCH
What is the experience?
Who is your user?
How is it different?
// DESIGN DELIVERABLES / ELEVATOR PITCH
Evernote allows you to easily capture information in any environment, and makes this information accessible and searchable at any time, from anywhere. Did we mention that it's free?
// DESIGN DELIVERABLES / EXPERIENCE MAP
Ex⋅pe⋅ri⋅ence MapA holistic visual representation of the user experience accross locations and channels
// SECTION / SUBSECTION
a day in the life
// SECTION / SUBSECTION
Online
Cross-Channel Experience Map
At the Field
My Training Overview
Customize Routine
Log in to Nike Training
Hit the !eld
Browse/View Resources
Print out Routine
Get Today’s Workout
Record Results
Input Results
Train
Sparq Test
// SECTION / SUBSECTION
site map
// SECTION / SUBSECTION
concept model
// SECTION / SUBSECTION
// SECTION / SUBSECTION
// DESIGN DELIVERABLES / HYPERWIREFRAME
Hy⋅per⋅wire⋅framehyperwireframe is a visual guide that suggest a common structure or partition across the different silos in a multitargeted experience.
Wireframe
PC Mac Web
PC Mac Web
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
EXPERIENCES THAT SCALE ACROSS DEVICES
TITLE TEXT
// DESIGN DELIVERABLES / STANDARDS LIBRARY
Standards Library
// DESIGN DELIVERABLES / STANDARDS LIBRARY
Worflows
ShareRegister Purchase
// DESIGN DELIVERABLES / STANDARDS LIBRARY
v
Patterns
// DESIGN DELIVERABLES / STANDARDS LIBRARY
v
Components
// DESIGN DELIVERABLES / STANDARDS LIBRARY
Components
v
// CONCLUSION
http://www.multitargetedexperience.com
We want to hear from you
// CONCLUSION
thank youhttp://www.multitargetedexperience.comhttps://xd.adobe.comhttp://www.openscreenproject.com