Go With the Flow :: Web Visions 2010, May20

4,451 views
4,338 views

Published on

Go With the Flow talk given May 20, 2010. Covers user flows for engagement and onboarding and bridging real life.

Go With the Flow :: Web Visions 2010, May20

  1. 1. Designing Social Experiences Go With The Flow erin malone :: web visions 2010
  2. 2. A little about me: erin malone @emalone
  3. 3. A little about me: erin malone @emalone
  4. 4. A little about me: erin malone @emalone
  5. 5. Agenda Engaging & Onboarding Bridging Real Life
  6. 6. flow: To move or run smoothly with unbroken continuity, as in the manner characteristic of a fluid. To exhibit a smooth or graceful continuity
  7. 7. Engaging & Onboarding
  8. 8. Initial Exposure Viral Spread Onboarding Education Registration “The Sell” First Time User Experience The Passionate Initial User Exposure Second Time User Experience Education Third Time “The Sell” User Experience Registration The new user spiral
  9. 9. diagram Joshua Porter Designing the Social Web bokardo.com The Usage Lifecycle
  10. 10. First Awareness
  11. 11. News articles, Direct facebook and twitter invitation shares Awareness
  12. 12. Good: Uses name in From Good: Uses full name for better recognition Bad: From is a company, Bad: Erin who? could be ltered as SPAM Optimizing email invitations
  13. 13. Good: Uses name in From Good: Uses photos to show familiarity and that this is not from a stranger Good: Large call to action button Optimizing email invitations
  14. 14. Education “The Sell”
  15. 15. Homepage - try before you buy
  16. 16. Homepage with large call to action
  17. 17. Header Sign In Awesome feature highlight Call to Action could rotate or be different for different users Take a Tour Secondary cool feature Feature Grid Feature X X X X Feature X X X X Feature X X X X Feature X X X X Anatomy of a Landing Page Feature
  18. 18. Header Sign In Awesome feature highlight Call to Action could rotate or be different for different users Take a Tour Secondary cool feature Feature Grid Feature X X X X Feature X X X X Feature X X X X Feature X X X X Anatomy of a Landing Page Feature
  19. 19. Header Sign In Awesome feature highlight Call to Action could rotate or be different for different users Take a Tour Secondary cool feature Feature Grid Feature X X X X Feature X X X X Feature X X X X Feature X X X X Anatomy of a Landing Page Feature
  20. 20. Header Sign In Awesome feature highlight Call to Action could rotate or be different for different users Take a Tour Secondary cool feature Feature Grid Feature X X X X Feature X X X X Feature X X X X Feature X X X X Anatomy of a Landing Page Feature
  21. 21. Header Sign In Awesome feature highlight Call to Action could rotate or be different for different users Take a Tour Secondary cool feature Feature Grid Feature X X X X Feature X X X X Feature X X X X Feature X X X X Anatomy of a Landing Page Feature
  22. 22. Feature X X X X Feature X X X X Feature X X X X Main feature points Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Call to Action Footer Anatomy of a Landing Page
  23. 23. Feature X X X X Feature X X X X Feature X X X X Main feature points Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Call to Action Footer Anatomy of a Landing Page
  24. 24. Feature X X X X Feature X X X X Feature X X X X Main feature points Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Call to Action Footer Anatomy of a Landing Page
  25. 25. Feature X X X X Feature X X X X Feature X X X X Main feature points Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Far far away, behind the word mountains, far from the countries Vokalia and Call to Action Footer Anatomy of a Landing Page
  26. 26. Landing Page
  27. 27. Landing Page
  28. 28. Registration
  29. 29. Could be as simple as no sign up
  30. 30. Could be as simple as no sign up
  31. 31. Making it fun - DJ name
  32. 32. Making it fun - DJ name
  33. 33. 1 2 3 Keep it simple - 1. 2. 3.
  34. 34. Start the activities as part of the sign up process
  35. 35. Start the activities as part of the sign up process
  36. 36. Keep it simple - assign it to someone else
  37. 37. Keep it simple - assign it to someone else
  38. 38. Onboarding
  39. 39. Ease in to the breadth. Offer one or two things to do
  40. 40. Ease in to the breadth. Offer one or two things to do
  41. 41. Build something as part of the sign up process
  42. 42. This list looks scary
  43. 43. The easiest activity is offered first
  44. 44. The easiest activity is offered first
  45. 45. Suggest a list. One item is already crossed off.
  46. 46. Suggest a list. One item is already crossed off.
  47. 47. Offer a tour of what to do first
  48. 48. 2nd visit: Reflect back and offer another activity
  49. 49. 2nd visit: Reflect back and offer another activity
  50. 50. Re-engagement
  51. 51. Introduce new features
  52. 52. Introduce new features
  53. 53. Use social peer pressure - all the cool kids are here
  54. 54. Use social peer pressure - all the cool kids are here
  55. 55. Care and Feeding of the Passionate
  56. 56. Feature people & contributions prominently
  57. 57. New questions to flesh out profile offered each visit
  58. 58. Both system generated & community awarded Badges, points & high reputation, reward use & quality
  59. 59. Enter text here Badges, points & high reputation, reward use & quality
  60. 60. Share and share alike With some viral patterns totally stolen from a presentation by Christina Wodtke
  61. 61. B=f(P,E) Behavior is a function of a Person and his Environment
  62. 62. At hand
  63. 63. Tools for sharing are in prime real estate locations
  64. 64. Tools for sharing are in prime real estate locations
  65. 65. Tools for sharing are in prime real estate locations
  66. 66. Tools for sharing are in prime real estate locations
  67. 67. Enter text here Tools for inviting are in prime real estate locations
  68. 68. Enter text here Tools for inviting are in prime real estate locations
  69. 69. Frictionless
  70. 70. The default errs on the side of the most viral option
  71. 71. The default errs on the side of the most viral option
  72. 72. The default errs on the side of the most viral option
  73. 73. The default errs on the side of the most viral option
  74. 74. Impactful
  75. 75. Email this Network / Newsfeed vs. consumer broadcaster consumer consumer consumer broadcaster consumer consumer consumer One to one consumer One to many
  76. 76. Email this Network / Newsfeed What’s your default?
  77. 77. Connectedness
  78. 78. Let users walk other peoples network to nd people they know Make recommendations once you have a piece of data to pivot on, like work or school Build on someone else’s social graph Carefully consider your method to jumpstart connections
  79. 79. DON’T A word about the Password Anti-Pattern
  80. 80. iLike Plaxo The Password Anti-Pattern
  81. 81. iLike Plaxo The Password Anti-Pattern
  82. 82. Bridging Real Life
  83. 83. Bridging real life: User and activity flow
  84. 84. Dashboard of relevant events to me + network
  85. 85. Encourage membership
  86. 86. Show me what my network is doing & where
  87. 87. Use community created content to entice new users
  88. 88. Give tools for planning
  89. 89. Combine mapping, shared photos & data
  90. 90. Creation of events by participants can be private or public
  91. 91. Calendar picker, reminders and event broadcasting
  92. 92. Use location tools to expand event plans
  93. 93. Show RSVPs from group and network
  94. 94. Mobile versions for impromptu location meetups
  95. 95. Combine mobile with web
  96. 96. Aggregate community information per location
  97. 97. Give people control over what is broadcast
  98. 98. Provide reasons to come back
  99. 99. Event page becomes a record of the event
  100. 100. Dashboard showing past events
  101. 101. Records past events monthly
  102. 102. Record of achievements collected at website
  103. 103. Record of achievements collected at website
  104. 104. Personal stats dashboard
  105. 105. Compare my stats with others in my network
  106. 106. Conversations in forums, reviews & comments
  107. 107. Activity streams
  108. 108. Wrapup: Bridging real life activity flow
  109. 109. Initial Exposure Viral Spread Onboarding Education Registration “The Sell” First Time User Experience The Passionate Initial User Exposure Second Time User Experience Education Third Time “The Sell” User Experience Registration Wrapup: The new user spiral
  110. 110. Thanks erin @emalone available now! erin@tangible-ux.com http://www.designingsocialinterfaces.com

×