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

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

// EXAMPLE / GO WORLD

Hub Experience

main site

Facebook

YouTube Mobile

main site

Facebook

YouTube Mobile

main site

Facebook

YouTube Mobile

main site

Facebook

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

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

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

1.0A The Lost Ring.com

Game Rules

ParallelUniversity.com

Olympicsecrets

FindthelostRing

Thelostring .com

Trailer

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

Twitter

You Tube

Flickr

2.1 Game Activity Visualization

Findthelostring

2.1.2 Upcoming Events

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

Twitter

You Tube

Flickr

Findthelostring

RSS Feeds

10.0 Shared Platform/Common Components

Search

10.4.1

Search Result

Pro!le

Create Profile

10.2.1.1

Delete Profile

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

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

* Twitter

* You Tube

* Flickr

Findthelostring

* 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

Twitter

You Tube

Flickr

Findthelostring

RSS Feeds

4.0 Japanese Ally Character Mobile Site

Post Comment

4.2.2.1

Delete Comment

m.findthelostring.jp

4.2 Feed of Blog Entries

4.2.1 BlogEntries

4.1 Upcoming Events

4.2.3Flag Inappropriate

You Tube

Flickr

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

Quizzes

7.00 Olympic Secrets.com

7.2 Pangaea Overlay

7.1.3.1

Save Quiz

Post Comment

Canned reply

8.0 Secret Site

Access Secret Site

Artifact Info

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

Twitter

You Tube

Flickr

Findthelostring

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

Twitter

You Tube

Flickr

Findthelostring

RSS Feeds

4.0 Japanese Ally Character Mobile Site

Post Comment

4.2.2.1

Delete Comment

m.findthelostring.jp

4.2 Feed of Blog Entries

4.2.1 BlogEntries

4.1 Upcoming Events

4.2.3Flag Inappropriate

You Tube

Flickr

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

Quizzes

7.2 Pangaea Overlay

7.1.3.1

Save Quiz

Post Comment

Canned reply

8.0 Secret Site

Access Secret Site

Artifact Info

9.0 Puppet master Tracking Site

URL TBD

Game Activity Visualization

9.2 Regional Activity Viewer

User Inbox Tasks

9.4.1 Post To ModeratorBlog

9.5 Link to Admin Local Site

Add New Game Event

List Of Events

Event Detail

Event tracking and management*

View Player Profile

Rate Player Participation

View ModeratorBlog Entries

ModeratorBlog Archive

Latest ModeratorBlog Entry

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

EXPERIENCES THAT SCALE ACROSS DEVICES

TITLE TEXT

// DESIGN DELIVERABLES / STANDARDS LIBRARY

Standards Library

Workflows

ShareRegister Purchase

Patterns

Components

// CONCLUSION

http://www.multitargetedexperience.com

We want to hear from you

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

Thank You

AynneGuillermo

Keep in Touch!

aynneg1sh

In context

Technology

Information in Context

SKA in context

Graffiti in context

Learning in Context

Confidence in Context

CGI in Context

Structure in context

GRAMMAR IN CONTEXT

Context Driven Testing in an Agile Context [Read-Only] · Context Driven Testing in an Agile Context Mark Richards ... James Bach, CemKaner–http ... Microsoft PowerPoint - Context

enginnering in context

Designing in Context

Peter Burke Context in Context

Earth in context

O’Connor in Context

Terrorism in Context

Nagarjuna in Context

CCSS in Context

Book in context

Paper in context

Art in Context