1. // SECTION / SUBSECTION
Designing for multi-targeted
In Context experiences
Guillermo Torres & Aynne Valencia
UX Australia, Canberra 08.28.09
Wednesday, December 16, 2009
2. IN CONTEXT: DESIGNING MULTI-TARGETED EXPERIENCES
Aynne Valencia Guillermo Torres
Wednesday, December 16, 2009
3. IN CONTEXT: DESIGNING MULTI-TARGETED EXPERIENCES
Web Application Design
Physical Product and Devices
Mobile/iPhone applications
Software applications
Digital Advertising
Wednesday, December 16, 2009
4. IN CONTEXT: DESIGNING MULTI-TARGETED EXPERIENCES
The State Of Our Practice
Examples
Design Deliverables
Wednesday, December 16, 2009
5. // THE STATE OF OUR PRACTICE
Desktop Web
Wednesday, December 16, 2009
6. // THE STATE OF OUR PRACTICE
Wireframes
Desktop Web
Personas
Concept Model
Site Maps
Flow Charts
Wednesday, December 16, 2009
7. // THE STATE OF OUR PRACTICE
Create
Desktop Web
Design
Collaborate
Sell
Evangelize
Wednesday, December 16, 2009
8. // THE STATE OF OUR PRACTICE
Desktop Web
Widgets/ Social
Air Apps Platform
Connected Web Apps/
Apps RIA
Rich Media
Banners
Wednesday, December 16, 2009
9. // THE STATE OF OUR PRACTICE
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
Wednesday, December 16, 2009
10. // THE STATE OF OUR PRACTICE
Web Mobile
Widgets/ Smartphone
Air Apps Apps
Wednesday, December 16, 2009
11. // THE STATE OF OUR PRACTICE
Social Smartphone
Platform Apps
Web Apps/
RIA
Wednesday, December 16, 2009
12. // THE STATE OF OUR PRACTICE / Definition
Mul⋅ti⋅tar⋅get⋅ed Ex⋅pe⋅ri⋅ence
One experience that runs across multiple platforms
and is appropriate to the context of use.
Wednesday, December 16, 2009
13. // THE STATE OF OUR PRACTICE /WHO IS DOING THIS?
Who is doing this?
Publishers
Media and Advertising
Software
Wednesday, December 16, 2009
14. // THE STATE OF OUR PRACTICE / A CALL FOR ACTION
A Call For Action
Wednesday, December 16, 2009
40. // 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"
Wednesday, December 16, 2009
41. Curated
Experience
Wednesday, December 16, 2009
42. Curated
Experience
Wednesday, December 16, 2009
43. Curated
Experience
Wednesday, December 16, 2009
44. // EXAMPLE / FACEBOOK
Facebook
Wednesday, December 16, 2009
45. // EXAMPLE / FACEBOOK
Wednesday, December 16, 2009
46. // EXAMPLE / FACEBOOK
Wednesday, December 16, 2009
49. // 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
Wednesday, December 16, 2009
50. Cloned
Experience
Wednesday, December 16, 2009
51. Cloned
Experience
Wednesday, December 16, 2009
52. // EXAMPLE / TWITTER
Twitter
Wednesday, December 16, 2009
53. // EXAMPLE / TWITTER
Wednesday, December 16, 2009
54. // EXAMPLE / TWITTER
Wednesday, December 16, 2009
55. // EXAMPLE / TWITTER
Wednesday, December 16, 2009
56. // EXAMPLE / EVERNOTE
Evernote
Wednesday, December 16, 2009
57. // EXAMPLE / EVERNOTE
Wednesday, December 16, 2009
58. // EXAMPLE / EVERNOTE
Wednesday, December 16, 2009
59. // 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
Wednesday, December 16, 2009
60. Distributed
Experience
Wednesday, December 16, 2009
61. // EXAMPLE / LOST RING
The Lost Ring
Wednesday, December 16, 2009
62. // EXAMPLE / LOST RING
Wednesday, December 16, 2009
63. // EXAMPLE / LOST RING
Wednesday, December 16, 2009
64. // EXAMPLE / LOST RING
Wednesday, December 16, 2009
65. // EXAMPLE / LOST RING
Wednesday, December 16, 2009
66. // EXAMPLE / LOST RING
Wednesday, December 16, 2009
67. // 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
Wednesday, December 16, 2009
69. // 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).
Wednesday, December 16, 2009
70. // DESIGN DELIVERABLES / ELEVATOR PITCH
What is the experience?
Who is your user?
How is it different?
Wednesday, December 16, 2009
71. // 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?
Wednesday, December 16, 2009
72. // DESIGN DELIVERABLES / EXPERIENCE MAP
Ex⋅pe⋅ri⋅ence Map
A holistic visual representation of the
user experience accross locations and
channels
Wednesday, December 16, 2009
74. //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
Wednesday, December 16, 2009
76. 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
3rd party feeds/badged content
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
3rd party feeds/badged content
* 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
Wednesday, December 16, 2009