In Context

1,677 views
1,547 views

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

×