Designing Social Experiences


Go With
The Flow
erin malone :: web visions 2010
A little about me: erin malone
                                 @emalone
A little about me: erin malone
                                 @emalone
A little about me: erin malone
                                 @emalone
Agenda
Engaging & Onboarding

Bridging Real Life
flow:
To move or run smoothly with unbroken
continuity, as in the manner characteristic
of a fluid.

To exhibit a smooth o...
Engaging &
Onboarding
Initial
               Exposure                                      Viral Spread




                                    ...
diagram Joshua Porter
                      Designing the Social Web
                      bokardo.com




The Usage Lifec...
First
Awareness
News articles,         Direct
facebook and twitter   invitation
shares




Awareness
Good: Uses name in From   Good: Uses full name for better recognition




 Bad: From is a company, Bad: Erin who?
 could b...
Good: Uses name in From




                Good: Uses photos to
                show familiarity and that
               ...
Education
“The Sell”
Homepage - try before you buy
Homepage with large call to action
Header                                       Sign In

                      Awesome
                  feature highlight   ...
Header                                       Sign In

                      Awesome
                  feature highlight   ...
Header                                       Sign In

                      Awesome
                  feature highlight   ...
Header                                       Sign In

                      Awesome
                  feature highlight   ...
Header                                       Sign In

                      Awesome
                  feature highlight   ...
Feature              X         X          X          X
        Feature              X         X          X          X
    ...
Feature              X         X          X          X
        Feature              X         X          X          X
    ...
Feature              X         X          X          X
        Feature              X         X          X          X
    ...
Feature              X         X          X          X
        Feature              X         X          X          X
    ...
Landing Page
Landing Page
Registration
Could be as simple as no sign up
Could be as simple as no sign up
Making it fun - DJ name
Making it fun - DJ name
1
         2
         3


Keep it simple - 1. 2. 3.
Start the activities as part of the sign up process
Start the activities as part of the sign up process
Keep it simple - assign it to someone else
Keep it simple - assign it to someone else
Onboarding
Ease in to the breadth. Offer one or two things to do
Ease in to the breadth. Offer one or two things to do
Build something as part of the sign up process
This list looks scary
The easiest activity is offered first
The easiest activity is offered first
Suggest a list. One item is already crossed off.
Suggest a list. One item is already crossed off.
Offer a tour of what to do first
2nd visit: Reflect back and offer another activity
2nd visit: Reflect back and offer another activity
Re-engagement
Introduce new features
Introduce new features
Use social peer pressure - all the cool kids are here
Use social peer pressure - all the cool kids are here
Care and
Feeding of the
  Passionate
Feature people & contributions prominently
New questions to flesh out profile offered each visit
Both system generated
                            & community awarded




Badges, points & high reputation, reward use & q...
Enter text here
Badges, points & high reputation, reward use & quality
Share and
share alike
With some viral patterns totally
stolen from a presentation by
       Christina Wodtke
B=f(P,E)
 Behavior is a function of a
Person and his Environment
At hand
Tools for sharing are in prime real estate locations
Tools for sharing are in prime real estate locations
Tools for sharing are in prime real estate locations
Tools for sharing are in prime real estate locations
Enter text here
Tools for inviting are in prime real estate locations
Enter text here
Tools for inviting are in prime real estate locations
Frictionless
The default errs on the side of the most viral option
The default errs on the side of the most viral option
The default errs on the side of the most viral option
The default errs on the side of the most viral option
Impactful
Email this                      Network / Newsfeed

               vs.                                     consumer
 broad...
Email this



                       Network / Newsfeed




What’s your default?
Connectedness
Let users walk other
 peoples network to
  nd people they know


                                Make recommendations once...
DON’T
A word about the Password Anti-Pattern
iLike


                            Plaxo

The Password Anti-Pattern
iLike


                            Plaxo

The Password Anti-Pattern
Bridging Real
     Life
Bridging real life: User and activity flow
Dashboard of relevant events to me + network
Encourage membership
Show me what my network is doing & where
Use community created content to entice new users
Give tools for
  planning
Combine mapping, shared photos & data
Creation of events by participants can be private or public
Calendar picker, reminders and event broadcasting
Use location tools to expand event plans
Show RSVPs from group and network
Mobile versions for impromptu location meetups
Combine mobile with web
Aggregate community information per location
Give people control over what is broadcast
Provide reasons
 to come back
Event page becomes a record of the event
Dashboard showing past events
Records past events monthly
Record of achievements collected at website
Record of achievements collected at website
Personal stats dashboard
Compare my stats with others in my network
Conversations in forums, reviews & comments
Activity streams
Wrapup: Bridging real life activity flow
Initial
               Exposure                                      Viral Spread




                                    ...
Thanks

erin
@emalone               available now!
erin@tangible-ux.com   http://www.designingsocialinterfaces.com
Upcoming SlideShare
Loading in...5
×

Go With the Flow :: Web Visions 2010, May20

4,108

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
  1. A particular slide catching your eye?

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

×