In context

// SECTION / SUBSECTION

Designing for multi-targeted
In Context experiences

Guillermo Torres & Aynne Valencia
UX Australia, Canberra 08.28.09

Wednesday, December 16, 2009

IN CONTEXT: DESIGNING MULTI-TARGETED EXPERIENCES

Aynne Valencia Guillermo Torres


Web Application Design

Physical Product and Devices

Mobile/iPhone applications

Software applications

Digital Advertising



The State Of Our Practice

Examples

Design Deliverables


// THE STATE OF OUR PRACTICE

Desktop Web



Wireframes
Desktop Web
Personas

Concept Model

Site Maps

Flow Charts



Create
Desktop Web
Design

Collaborate

Sell

Evangelize



Desktop Web

Widgets/ Social
Air Apps Platform

Connected Web Apps/
Apps RIA

Rich Media
Banners



Desktop Web Mobile Kiosks

Widgets/ Social Smartphone
Platform Touchscreen
Air Apps Apps
Connected Web Apps/ Augmented Internet
Apps RIA Reality Enabled TV

Rich Media Gaming
Banners Consoles



Web Mobile

Widgets/ Smartphone
Air Apps Apps



Social Smartphone
Platform Apps

Web Apps/
RIA


// THE STATE OF OUR PRACTICE / Deﬁnition

Mul⋅ti⋅tar⋅get⋅ed Ex⋅pe⋅ri⋅ence
One experience that runs across multiple platforms
and is appropriate to the context of use.


// THE STATE OF OUR PRACTICE /WHO IS DOING THIS?

Who is doing this?
Publishers
Media and Advertising
Software


// THE STATE OF OUR PRACTICE / A CALL FOR ACTION

A Call For Action


// EXAMPLES / GO WORLD


// EXAMPLE / GO WORLD


Hub
Experience


Hub
Experience
main site

Facebook TV

YouTube Mobile


main site

Facebook TV

YouTube Mobile


More examples


// EXAMPLE / OBAMA

Obama Campaign


// EXAMPLE / OBAMA


// EXAMPLE / HUB EXPERIENCE

Content comes from centralized place on the web

Information is syndicated out

Often branded experience with single call to action

"all roads lead to Rome"


Curated
Experience


// EXAMPLE / FACEBOOK

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


// EXAMPLE / TWITTER

Twitter


// EXAMPLE / TWITTER


// EXAMPLE / EVERNOTE

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 ﬂows, features and functions


Distributed
Experience


// EXAMPLE / LOST RING

The 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 ﬂows, features or
functions


// DESIGN DELIVERABLES

Design Deliverables


// DESIGN DELIVERABLES / ELEVATOR PITCH

El⋅e⋅va⋅tor Pitch
Short 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).



What is the experience?

Who is your user?

How is it different?



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 Map
A holistic visual representation of the
user experience accross locations and
channels



A Day In The Life


//Cross-Channel
SECTION / SUBSECTION
Customize
Experience Map Routine

My Training
Overview

Browse/View
Input Resources
Results

Print out
Routine
Online Log in to Nike Training

Hit the eld
At the Field

Record Get Today’s
Results Workout

Train

Sparq Test



Site Map


THE LOST RING
Experience 1.0A The Lost Ring.com 2.0 Heroine Site 3.0A French Ally Character Site 4.0 Japanese Ally Character Mobile Site 6.0A Portuguese Language Site 7.0 Historian Site
**** 8.0 S
Entry Points 4.00
1.0B The Lost Ring.de 2.00
3.0B German Ally Character Site m.findthelostring 6.0B Italian Language Site
.jp
Findthelostring
7.00 8.00

Link From Badged Content
1.0C The Lost Ring.jp 3.0C Spanish Ally Character Site 6.0C Korean Language Site Olympic
Secrets.com
Olympic
Secrets.com

1.0D The Lost Ring.es 2.1 10.3 2.4.0 10.1
4.1 4.2 4.4.0
10.5
Create/View 6.00
8.10
In-store Wifi Start Page ? Upcoming Feed of List Of Artifacts
View/Post Create/View Profile Access Secret
Events Blog Entries
Game Activity Content List Of Artifacts Profile 3.00 Findthelostring 7.1 7.2 7.3 7.4 Site

1.0E The Lost Ring.co.uk Visualization
Findthelostring Episodes Pangaea Mailing List
Contact
Professor
4.4.1 Overlay Sign Up
4.2.1 8.20
Youtube Link (Heroine) 2.4.1
1.0F The Lost Ring.fr 2.1.2

Upcoming
Digitized
Blog
Entries
Digitized
Artifacts 7.1.2
7.4.1
Artifact Info

Artifacts
Events 6.4.0 Podcasts
6.1 10.3 10.1 Canned reply
4.2.2 View/Post Create/View
Youtube Link (Player) 1.0G The Lost Ring.br 3.1 10.3
View/Post
3.4.0 10.1
Create/View Post Comment
Game Activity
Visualization
Content List Of Artifacts Profile

Game Activity Content List Of Artifacts Profile 7.1.3
Visualization
Quizzes
1.0H The Lost Ring.cn 2.3.0 2.3.1 2.3.2 2.3.3 4.2.2.1 6.1.2
6.4.1

Twitter Profile (Heroine) 3.4.1 Delete Comment Digitized
RSS Feeds You Tube Twitter Flickr 3.1.2 Upcoming
Artifacts
Events
1.0I The Lost Ring.it Upcoming
Events
Digitized
Artifacts
4.2.3
7.1.3.1

Save Quiz
3rd party feeds/badged content Flag
Inappropriate
Twitter Profile (Ally)
7.1.4
Experience model

1.00
6.3.0 2.3.1 2.3.2 2.3.3
Post Comment
Thelostring
2.3.1 2.3.2 2.3.3 RSS Feeds You Tube Twitter Flickr
.com 3.3.0

RSS Feeds You Tube Twitter Flickr

4.3 4.3.1 4.3.2
3rd party feeds/badged content
RSS Feeds You Tube Flickr
1.10 1.20 1.30 3rd party feeds/badged content
Trailer Story Of The Game Rules
Lost Ring

0.00 .00 2.00

Parallel Olympicsecrets FindthelostRing
University.com

Mobile site

An imbedded Google map pro with annotations showing where artifacts were found and where labyrinths are located Limited story line
Do we want to consider placing an upcoming events badge using a third party?

5.0 Mandarin Chinese Ally Character Site
5.00

Findthelostring

5.1 10.3 5.4.0 10.1
View/Post Create/View
Game Activity Content List Of Artifacts Profile
Visualization

5.4.1
5.1.2
Digitized
Upcoming
Artifacts
Events

5.3.0 5.3.1 5.3.2 5.3.3

* RSS Feeds * You Tube * Twitter * Flickr


* Follow up to see what restrictions if any on content into Chinese domain - some inbound feeds may be restricted

10.0 Shared Platform/Common Components

10.2 Manage Profile 10.3 Content 10.4 Search 10.5 Mobile Registration
10.1 Create Profile

10.1 10.3 10.5
10.2 10.4

Create Profile Blog User Texts Code
View Profile Search
Archives to register

10.5.1
10.1.1 10.3.1 10.4.1
10.2.1
TOC/Guidelines
TOC/Community Blog Search Result
Edit Profile Opt-in link
Guidelines Entries

Create pro le 10.3.1.2
10.5.2
Post Comment
m.thelostring
10.2.1.1 10.2.1.2

Delete Profile Upload Avatar 10.3.1.2.1

Delete Comment 10.5.2

m.thelostring
/profile
Pro le 10.3.2 Search
Flag
Inappropriate
Create pro le


Flag
Inappropriate

User experience
3.0A French Ally Character Site 4.0 Japanese Ally Character Mobile Site 6.0A Portuguese Language Site 7.0 Historian Site
**** 8.0 Secret Site 9.0 Puppet master Tracking Site
4.00

3.0B German Ally Character Site m.findthelostring
.jp
6.0B Italian Language Site 9.00

7.00 8.00 URL TBD

3.0C Spanish Ally Character Site 6.0C Korean Language Site Olympic
Secrets.com
Olympic
Secrets.com

4.1 4.2 4.4.0
10.5 8.10
9.1 9.2 9.3 9.4 9.5 9.6 9.7.0 9.8.0
Feed of Create/View 6.00 Regional
Upcoming List Of Artifacts Access Secret
Blog Entries Profile Game Activity Activity Viewer User Inbox Latest Moderator Link to Admin List Of Events View Player Rate Player
Events Findthelostring 7.1 7.2 7.3 7.4 Site
3.00 Visualization Tasks Blog Entry Local Site Profile Participation
Contact
Findthelostring Episodes Pangaea Mailing List Professor
Overlay Sign Up 9.4.1
4.4.1 8.20 9.6.1
4.2.1
Post To Moderator
Digitized Artifact Info Add New Game
Blog 7.1.2 Blog
Artifacts Event
Entries 7.4.1
6.4.0 Podcasts
6.1 10.3 10.1 Canned reply 9.4
4.2.2 View/Post Create/View
Game Activity Content List Of Artifacts Profile View Moderator 9.6.2
3.1 10.3 3.4.0 10.1
View/Post Create/View Post Comment Visualization Blog Entries
7.1.3 Event Detail
Game Activity Content List Of Artifacts Profile
Visualization
Quizzes
6.4.1 9.4
4.2.2.1 6.1.2 9.6.3
Digitized Moderator
3.4.1 Delete Comment Upcoming Edit Event
3.1.2 Artifacts Blog Archive
Events
Digitized 7.1.3.1
Upcoming
Artifacts
Events 4.2.3
Flag
Save Quiz Event tracking and management*
Inappropriate

7.1.4

6.3.0 2.3.1 2.3.2 2.3.3
Post Comment

2.3.1 2.3.2 2.3.3 RSS Feeds You Tube Twitter Flickr
3.3.0

RSS Feeds You Tube Twitter Flickr

4.3 4.3.1 4.3.2
RSS Feeds You Tube Flickr


Mobile site

An imbedded Google map pro with annotations showing where artifacts were found and where labyrinths are located Limited story line
Do we want to consider placing an upcoming events badge using a third party?

SUSPENSE REVEALATION

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEE
Lostring.com ARG Community Launch
THE LOST RING.COM

Lostring.com Public Launch M-DAY
HEROINE SITE FINDTHELOST RING.COM

HISTORIAN SITE PARALELLUNIVERSITY.COM
Time line

ALLY SITE

TRACKING TOOL (FOR PUPPETMASTERS)

PROFLE MANAGEMENT/STORE IN PLACE

CONTENT MANAGEMENT SYSTEM (WHERE ALL SITES LIVE)



Concept Model



Walks
Man Dog


// SECTION / SUBSECTION


// DESIGN DELIVERABLES / HYPERWIREFRAME

Hy⋅per⋅wire⋅frame
hyperwireframe is a visual guide that suggest a common
structure or partition across the different silos in a
multitargeted experience.


Wireframe


PC Mac Web


EXPERIENCES THAT SCALE ACROSS DEVICES

TITLE TEXT


// DESIGN DELIVERABLES / STANDARDS LIBRARY

Standards Library



Workﬂows

Register Purchase Share



Patterns

v



Components

v


// CONCLUSION

We want to hear from you
http://www.multitargetedexperience.com


Thank You

http://www.multitargetedexperience.com
https://xd.adobe.com
http://www.openscreenproject.com

Keep in Touch!

Aynne
Guillermo

g1sh aynne


In context

More Related Content

Similar to In context

Recently uploaded

In context