// SECTION / SUBSECTION




                                     Designing for multi-targeted
  In Context                ...
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




     Desktop                   Web   Personas

                                     Conce...
// THE STATE OF OUR PRACTICE




     Desktop                     Web

      Widgets/                   Social
      Air A...
// THE STATE OF OUR PRACTICE




     Desktop                     Web          Mobile       Kiosks

      Widgets/        ...
// THE STATE OF OUR PRACTICE




    Desktop                    Web

                                     Smartphone
     ...
// THE STATE OF OUR PRACTICE




                                Web

    Air Apps/                   Social
    Widgets  ...
// THE STATE OF OUR PRACTICE / SUBSECTION




 Mul⋅ti⋅tar⋅get⋅ed Ex⋅pe⋅ri⋅ence
 One experience that runs across multiple p...
// THE STATE OF OUR PRACTICE / SUBSECTION




 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
// EXAMPLES / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
// EXAMPLE / GO WORLD
Hub
Experience
Hub
Experience
                       main site




 Facebook                                   TV




             YouTub...
main site




Facebook                                  TV




           YouTube               Mobile
main site




Facebook                                  TV




           YouTube               Mobile
main site




Facebook                                  TV




           YouTube               Mobile
Other Models
Curated
Experience
Curated
Experience
Curated
Experience
// EXAMPLE / FACEBOOK




                        Facebook
// EXAMPLE / FACEBOOK
// EXAMPLE / FACEBOOK
// EXAMPLE / CURATED EXPERIENCE




 Consolidates snippets of information

 Sensitive to the context of the device or plat...
Cloned
Experience
Cloned
Experience
// EXAMPLE / TWITTER




                       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...
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-expe...
// DESIGN DELIVERABLES




 Design Deliverables
// DESIGN DELIVERABLES / ELEVATOR PITCH




 El⋅e⋅va⋅tor Pitch
 Short sentence, or statement describing
 the experience.

...
// 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 ma...
// DESIGN DELIVERABLES / EXPERIENCE MAP




 Ex⋅pe⋅ri⋅ence Map
 A holistic visual representation of the
 user experience a...
// SECTION / SUBSECTION




 a day in the life
//Cross-Channel
  SECTION / SUBSECTION
                                                                           Customiz...
// SECTION / SUBSECTION




 site map
// SECTION / SUBSECTION




 concept model
// SECTION / SUBSECTION
// SECTION / SUBSECTION
// DESIGN DELIVERABLES / HYPERWIREFRAME




 Hy⋅per⋅wire⋅frame
 hyperwireframe is a visual guide that suggest a common
 st...
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



       Register                        Purchase   Share
// DESIGN DELIVERABLES / STANDARDS LIBRARY




 Patterns



 v
// DESIGN DELIVERABLES / STANDARDS LIBRARY




 Components



 v
// DESIGN DELIVERABLES / STANDARDS LIBRARY




 Components



 v
// CONCLUSION




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




thank you
http://www.multitargetedexperience.com
https://xd.adobe.com
http://www.openscreenproject.com
In Context
In Context
In Context
In Context
In Context
Upcoming SlideShare
Loading in...5
×

In Context

1,438

Published on

Published in: Design, Technology, Sports

In Context

  1. 1. // SECTION / SUBSECTION Designing for multi-targeted In Context experiences Guillermo Torres & Aynne Valencia UX Australia, Canberra 08.28.09
  2. 2. IN CONTEXT: DESIGNING MULTITARGETED EXPERIENCES Guillermo Torres Aynne Valencia
  3. 3. IN CONTEXT: DESIGNING MULTITARGETED EXPERIENCES The State Of Our Practice Examples Design Deliverables
  4. 4. // THE STATE OF OUR PRACTICE Desktop Web
  5. 5. // THE STATE OF OUR PRACTICE Desktop Web Personas Concept Model Site Maps Flow Charts Wireframes
  6. 6. // THE STATE OF OUR PRACTICE Desktop Web Widgets/ Social Air Apps Platform Connected Rich Media Apps Banners
  7. 7. // THE STATE OF OUR PRACTICE Desktop Web Mobile Kiosks Widgets/ Social Smartphone Platform Touchscreen Air Apps Apps Connected Rich Media Augmented Internet Apps Banners Reality Enabled TV Gaming Consoles
  8. 8. // THE STATE OF OUR PRACTICE Desktop Web Smartphone Apps
  9. 9. // THE STATE OF OUR PRACTICE Web Air Apps/ Social Widgets Platform Rich Media Banners Gaming Consoles
  10. 10. // THE STATE OF OUR PRACTICE / SUBSECTION Mul⋅ti⋅tar⋅get⋅ed Ex⋅pe⋅ri⋅ence One experience that runs across multiple platforms and is appropriate to the context of use.
  11. 11. // THE STATE OF OUR PRACTICE / SUBSECTION Who is doing this? Publishers Media and Advertising Software
  12. 12. // THE STATE OF OUR PRACTICE / A CALL FOR ACTION A Call For Action
  13. 13. // EXAMPLES / GO WORLD
  14. 14. // EXAMPLES / GO WORLD
  15. 15. // EXAMPLE / GO WORLD
  16. 16. // EXAMPLE / GO WORLD
  17. 17. // EXAMPLE / GO WORLD
  18. 18. // EXAMPLE / GO WORLD
  19. 19. Hub Experience
  20. 20. Hub Experience main site Facebook TV YouTube Mobile
  21. 21. main site Facebook TV YouTube Mobile
  22. 22. main site Facebook TV YouTube Mobile
  23. 23. main site Facebook TV YouTube Mobile
  24. 24. Other Models
  25. 25. Curated Experience
  26. 26. Curated Experience
  27. 27. Curated Experience
  28. 28. // EXAMPLE / FACEBOOK Facebook
  29. 29. // EXAMPLE / FACEBOOK
  30. 30. // EXAMPLE / FACEBOOK
  31. 31. // 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
  32. 32. Cloned Experience
  33. 33. Cloned Experience
  34. 34. // EXAMPLE / TWITTER Twitter
  35. 35. // EXAMPLE / TWITTER
  36. 36. // EXAMPLE / TWITTER
  37. 37. // EXAMPLE / TWITTER
  38. 38. // EXAMPLE / EVERNOTE Evernote
  39. 39. // EXAMPLE / EVERNOTE
  40. 40. // EXAMPLE / EVERNOTE
  41. 41. // EXAMPLE / EVERNOTE
  42. 42. // 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
  43. 43. Distributed Experience
  44. 44. // EXAMPLE / LOST RING The Lost Ring
  45. 45. // EXAMPLE / LOST RING
  46. 46. // EXAMPLE / LOST RING
  47. 47. // EXAMPLE / LOST RING
  48. 48. // EXAMPLE / LOST RING
  49. 49. // EXAMPLE / LOST RING
  50. 50. // 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
  51. 51. // DESIGN DELIVERABLES Design Deliverables
  52. 52. // 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).
  53. 53. // DESIGN DELIVERABLES / ELEVATOR PITCH What is the experience? Who is your user? How is it different?
  54. 54. // 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?
  55. 55. // DESIGN DELIVERABLES / EXPERIENCE MAP Ex⋅pe⋅ri⋅ence Map A holistic visual representation of the user experience accross locations and channels
  56. 56. // SECTION / SUBSECTION a day in the life
  57. 57. //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
  58. 58. // SECTION / SUBSECTION site map
  59. 59. // SECTION / SUBSECTION concept model
  60. 60. // SECTION / SUBSECTION
  61. 61. // SECTION / SUBSECTION
  62. 62. // 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.
  63. 63. Wireframe
  64. 64. PC Mac Web
  65. 65. PC Mac Web
  66. 66. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  67. 67. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  68. 68. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  69. 69. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  70. 70. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  71. 71. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  72. 72. EXPERIENCES THAT SCALE ACROSS DEVICES TITLE TEXT
  73. 73. // DESIGN DELIVERABLES / STANDARDS LIBRARY Standards Library
  74. 74. // DESIGN DELIVERABLES / STANDARDS LIBRARY Worflows Register Purchase Share
  75. 75. // DESIGN DELIVERABLES / STANDARDS LIBRARY Patterns v
  76. 76. // DESIGN DELIVERABLES / STANDARDS LIBRARY Components v
  77. 77. // DESIGN DELIVERABLES / STANDARDS LIBRARY Components v
  78. 78. // CONCLUSION We want to hear from you http://www.multitargetedexperience.com
  79. 79. // CONCLUSION thank you http://www.multitargetedexperience.com https://xd.adobe.com http://www.openscreenproject.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×