In context

// SECTION / SUBSECTION

Designing for multi-targeted experiencesIn Context

Guillermo Torres & Aynne ValenciaUX Australia, Canberra 08.28.09

Wednesday, December 16, 2009

IN CONTEXT: DESIGNING MULTI-TARGETED EXPERIENCES

Guillermo TorresAynne Valencia



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

Personas

Concept Model

Site Maps

Flow Charts

Desktop Web



Desktop Web Create

Design

Collaborate

Sell

Evangelize



Desktop Web

Widgets/ Air Apps

Connected Apps

Social Platform

Web Apps/ RIA

Rich Media Banners



Desktop Web Mobile Kiosks

Widgets/ Air Apps

Connected Apps

Social Platform

Web Apps/ RIA

Smartphone Apps

AugmentedReality

Gaming Consoles

Touchscreen

Internet Enabled TV

Rich Media Banners



Web Mobile

Widgets/ Air Apps

Smartphone Apps



Social Platform

Web Apps/ RIA

Smartphone Apps


// THE STATE OF OUR PRACTICE / Definition

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 /WHO IS DOING THIS?

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









Hub Experience


Hub Experience

main site

Facebook

YouTube Mobile

TV


main site

Facebook

YouTube Mobile

TV


main site

Facebook

YouTube Mobile

TV


main site

Facebook

YouTube Mobile

TV


More examples


// EXAMPLE / OBAMA

Obama Campaign


// EXAMPLE / OBAMA


// EXAMPLE / OBAMA


// EXAMPLE / OBAMA


// EXAMPLE / OBAMA


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


Curated Experience


Curated Experience


// EXAMPLE / FACEBOOK

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

Twitter








// EXAMPLE / EVERNOTE

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










http://www.findthelostring.com/larissa/home.do


http://www.findthelostring.com/noriko/home.do


http://www.findthelostring.com/ariadne/home.do


http://uat.findthelostring.tlr.sf.akqa.com/germanally/home.do


http://uat.findthelostring.tlr.sf.akqa.com/spanishally/home.do


http://uat.findthelostring.tlr.sf.akqa.com/chineseally/home.do




http://www.thelostgames.com/

http://www.thelostgames.com/

http://www.thelostring.com/



http://164.109.150.213/index.html

http://164.109.150.213/index.html













// 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).



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



A Day In The Life



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



Site Map


THE LOST RING

Link From Badged Content

In-store Wifi Start Page ?

Youtube Link (Heroine)

Youtube Link (Player)

Twitter Profile (Heroine)

Twitter Profile (Ally)

Experience Entry Points

Exp

erie

nce m

od

el

1.0A The Lost Ring.com

1.30

Game Rules

0.00

ParallelUniversity.com

.00

Olympicsecrets

2.00

FindthelostRing

1.00

Thelostring .com

1.10

Trailer

1.20

Story Of The Lost Ring

1.0B The Lost Ring.de

1.0C The Lost Ring.jp

1.0D The Lost Ring.es 1.0E The Lost Ring.co.uk

1.0F The Lost Ring.fr

1.0G The Lost Ring.br

1.0H The Lost Ring.cn 1.0I The Lost Ring.it

2.0 Heroine Site ****

3rd party feeds/badged content

2.3.2

Twitter

2.3.1

You Tube

2.3.3

Flickr

2.1 Game Activity Visualization

2.00

Findthelostring

2.1.2 Upcoming Events

2.3.0

RSS Feeds

10.1Create/ViewProfile

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

2.4.0 List Of Artifacts

2.4.1 Digitized Artifacts

10.3View/PostContent

3.0A French Ally Character Site


2.3.2

Twitter

2.3.1

You Tube

2.3.3

Flickr


3.00

Findthelostring


3.3.0

RSS Feeds





10.0 Shared Platform/Common Components

10.4

Search

10.4.1

Search Result

Pro!le

10.1

Create Profile

10.2.1.1

Delete Profile

10.2

View Profile

10.2.1

Edit Profile

10.2.1.2

Upload Avatar

Create pro!le

Search

10.3 Blog Archives

10.3.1 Blog Entries

10.3.1.2

Post Comment

10.3.1.2.1

Delete Comment

10.3.2

Flag Inappropriate

10.5.1

TOC/GuidelinesOpt-in link

10.5

User Texts Code to register

Create pro!le

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

10.1.1

TOC/CommunityGuidelines

10.5.2

m.thelostring

10.5.2

m.thelostring/profile

3.0C Spanish Ally Character Site

3.0B German Ally Character Site

5.0 Mandarin Chinese Ally Character Site


5.3.2

* Twitter

5.3.1

* You Tube

5.3.3

* Flickr


5.00

Findthelostring


5.3.0

* RSS Feeds





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

6.0B Italian Language Site

Limited story line

6.0A Portuguese Language Site

6.0C Korean Language Site


2.3.2

Twitter

2.3.1

You Tube

2.3.3

Flickr


6.00

Findthelostring


6.3.0

RSS Feeds





4.0 Japanese Ally Character Mobile Site

4.2.2

Post Comment

4.2.2.1

Delete Comment

4.00

m.findthelostring.jp

4.2 Feed of Blog Entries

4.2.1 BlogEntries

4.1 Upcoming Events

4.2.3Flag Inappropriate



4.3.1

You Tube

4.3.2

Flickr

4.3

RSS Feeds

Mobile site



7.0 Historian Site

7.1 Episodes

7.3 Mailing List Sign Up

7.4 Contact Professor

7.1.2 Podcasts

7.1.3

Quizzes

7.00 Olympic Secrets.com

7.2 Pangaea Overlay

7.1.3.1

Save Quiz

7.1.4

Post Comment

7.4.1

Canned reply

8.0 Secret Site

8.10

Access Secret Site

8.20

Artifact Info



Tim

e li

ne

SUSPENSE

THE LOST RING.COM

HEROINE SITE FINDTHELOST RING.COM

HISTORIAN SITE PARALELLUNIVERSITY.COM

CONTENT MANAGEMENT SYSTEM (WHERE ALL SITES LIVE)

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6 WEEK 7 WEEK 8 WEEK 9 WEEK 10 WEEK 11 WEEK 12 WEEK 13 WEEK 14 WEEK 15 WEEK 16 WEEK 17 WEEK 18 WEEK 19 WEEK 20 WEEK 21 WEEK 22 WEEK 23 WEEK 24

ALLY SITE

PROFLE MANAGEMENT/STORE IN PLACE

TRACKING TOOL (FOR PUPPETMASTERS)

REVEALATION

Lostring.com Public Launch M-DAY

Lostring.com ARG Community Launch

Flag Inappropriate

User experience conceptual map ****

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

3.0A French Ally Character Site


2.3.2

Twitter

2.3.1

You Tube

2.3.3

Flickr


3.00

Findthelostring


3.3.0

RSS Feeds





3.0C Spanish Ally Character Site

3.0B German Ally Character Site 6.0B Italian Language Site

Limited story line

6.0A Portuguese Language Site

6.0C Korean Language Site


2.3.2

Twitter

2.3.1

You Tube

2.3.3

Flickr


6.00

Findthelostring


6.3.0

RSS Feeds





4.0 Japanese Ally Character Mobile Site

4.2.2

Post Comment

4.2.2.1

Delete Comment

4.00

m.findthelostring.jp

4.2 Feed of Blog Entries

4.2.1 BlogEntries

4.1 Upcoming Events

4.2.3Flag Inappropriate



4.3.1

You Tube

4.3.2

Flickr

4.3

RSS Feeds

Mobile site



7.0 Historian Site

7.1 Episodes

7.3 Mailing List Sign Up

7.4 Contact Professor

7.1.2 Podcasts

7.1.3

Quizzes


7.2 Pangaea Overlay

7.1.3.1

Save Quiz

7.1.4

Post Comment

7.4.1

Canned reply

8.0 Secret Site

8.10

Access Secret Site

8.20

Artifact Info


9.0 Puppet master Tracking Site

9.00

URL TBD

9.1

Game Activity Visualization

9.2 Regional Activity Viewer

9.3

User Inbox Tasks

9.4.1 Post To ModeratorBlog

9.5 Link to Admin Local Site

9.6.1

Add New Game Event

9.6

List Of Events

9.6.2

Event Detail

Event tracking and management*

9.7.0

View Player Profile

9.8.0

Rate Player Participation

9.4

View ModeratorBlog Entries

9.4

ModeratorBlog Archive

9.4

Latest ModeratorBlog Entry

9.6.3

Edit Event



Concept Model



Man DogWalks






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



TITLE TEXT



TITLE TEXT



TITLE TEXT



TITLE TEXT



TITLE TEXT



TITLE TEXT


// DESIGN DELIVERABLES / STANDARDS LIBRARY

Standards Library



Workflows

ShareRegister Purchase



v

Patterns



v

Components



Components

v


// CONCLUSION

http://www.multitargetedexperience.com

We want to hear from you




http://www.multitargetedexperience.comhttps://xd.adobe.comhttp://www.openscreenproject.com

Thank You




https://xd.adobe.com

https://xd.adobe.com

http://www.openscreenproject.com

http://www.openscreenproject.com

AynneGuillermo

Keep in Touch!

aynneg1sh


Technology

In context