Top Banner
Go With The Flow Designing Social Experiences erin malone :: web visions 2010
110

Go With the Flow :: Web Visions 2010, May20

Jan 28, 2015

Download

Design

erin malone

Go With the Flow talk given May 20, 2010. Covers user flows for engagement and onboarding and bridging real life.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Go With the Flow :: Web Visions 2010, May20

Go With The Flow

Designing Social Experiences

erin malone :: web visions 2010

Page 2: Go With the Flow :: Web Visions 2010, May20

A little about me: erin malone

@emalone

Page 3: Go With the Flow :: Web Visions 2010, May20

A little about me: erin malone

@emalone

Page 4: Go With the Flow :: Web Visions 2010, May20

A little about me: erin malone

@emalone

Page 5: Go With the Flow :: Web Visions 2010, May20

Agenda

Engaging & Onboarding

Bridging Real Life

Page 6: Go With the Flow :: Web Visions 2010, May20

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

To exhibit a smooth or graceful continuity

Page 7: Go With the Flow :: Web Visions 2010, May20

Engaging & Onboarding

Page 8: Go With the Flow :: Web Visions 2010, May20

The new user spiral

Initial Exposure

Education“The Sell”

Registration

Onboarding

First TimeUser Experience

Second TimeUser Experience

Third TimeUser Experience

The PassionateUser

Viral SpreadInitial Exposure

Registration

Education“The Sell”

Page 9: Go With the Flow :: Web Visions 2010, May20

The Usage Lifecycle

diagram Joshua PorterDesigning the Social Web bokardo.com

Page 10: Go With the Flow :: Web Visions 2010, May20

First Awareness

Page 11: Go With the Flow :: Web Visions 2010, May20

Awareness

News articles,facebook and twittershares

Directinvitation

Page 12: Go With the Flow :: Web Visions 2010, May20

Optimizing email invitations

Good: Uses full name for better recognition

Bad: Erin who?

Good: Uses name in From

Bad: From is a company,could be !ltered as SPAM

Page 13: Go With the Flow :: Web Visions 2010, May20

Optimizing email invitations

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

Page 14: Go With the Flow :: Web Visions 2010, May20

Education“The Sell”

Page 15: Go With the Flow :: Web Visions 2010, May20

Homepage - try before you buy

Page 16: Go With the Flow :: Web Visions 2010, May20

Homepage with large call to action

Page 17: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 18: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 19: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 20: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 21: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 22: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 23: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 24: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 25: Go With the Flow :: Web Visions 2010, May20

Anatomy of a Landing Page

Far far away, behind the word mountains, far from the countries Vokalia and

Header

Awesome

feature highlight

could rotate or be different for

different users

Sign In

Call to Action

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

Feature X X X X

Feature X X X X

Footer

Call to Action

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

Main feature points

Page 26: Go With the Flow :: Web Visions 2010, May20

Landing Page

Page 27: Go With the Flow :: Web Visions 2010, May20

Landing Page

Page 28: Go With the Flow :: Web Visions 2010, May20

Registration

Page 29: Go With the Flow :: Web Visions 2010, May20

Could be as simple as no sign up

Page 30: Go With the Flow :: Web Visions 2010, May20

Could be as simple as no sign up

Page 31: Go With the Flow :: Web Visions 2010, May20

Making it fun - DJ name

Page 32: Go With the Flow :: Web Visions 2010, May20

Making it fun - DJ name

Page 33: Go With the Flow :: Web Visions 2010, May20

Keep it simple - 1. 2. 3.

123

Page 34: Go With the Flow :: Web Visions 2010, May20

Start the activities as part of the sign up process

Page 35: Go With the Flow :: Web Visions 2010, May20

Start the activities as part of the sign up process

Page 36: Go With the Flow :: Web Visions 2010, May20

Keep it simple - assign it to someone else

Page 37: Go With the Flow :: Web Visions 2010, May20

Keep it simple - assign it to someone else

Page 38: Go With the Flow :: Web Visions 2010, May20

Onboarding

Page 39: Go With the Flow :: Web Visions 2010, May20

Ease in to the breadth. Offer one or two things to do

Page 40: Go With the Flow :: Web Visions 2010, May20

Ease in to the breadth. Offer one or two things to do

Page 41: Go With the Flow :: Web Visions 2010, May20

Build something as part of the sign up process

Page 42: Go With the Flow :: Web Visions 2010, May20

This list looks scary

Page 43: Go With the Flow :: Web Visions 2010, May20

The easiest activity is offered first

Page 44: Go With the Flow :: Web Visions 2010, May20

The easiest activity is offered first

Page 45: Go With the Flow :: Web Visions 2010, May20

Suggest a list. One item is already crossed off.

Page 46: Go With the Flow :: Web Visions 2010, May20

Suggest a list. One item is already crossed off.

Page 47: Go With the Flow :: Web Visions 2010, May20

Offer a tour of what to do first

Page 48: Go With the Flow :: Web Visions 2010, May20

2nd visit: Reflect back and offer another activity

Page 49: Go With the Flow :: Web Visions 2010, May20

2nd visit: Reflect back and offer another activity

Page 50: Go With the Flow :: Web Visions 2010, May20

Re-engagement

Page 51: Go With the Flow :: Web Visions 2010, May20

Introduce new features

Page 52: Go With the Flow :: Web Visions 2010, May20

Introduce new features

Page 53: Go With the Flow :: Web Visions 2010, May20

Use social peer pressure - all the cool kids are here

Page 54: Go With the Flow :: Web Visions 2010, May20

Use social peer pressure - all the cool kids are here

Page 55: Go With the Flow :: Web Visions 2010, May20

Care and Feeding of the

Passionate

Page 56: Go With the Flow :: Web Visions 2010, May20

Feature people & contributions prominently

Page 57: Go With the Flow :: Web Visions 2010, May20

New questions to flesh out profile offered each visit

Page 58: Go With the Flow :: Web Visions 2010, May20

Badges, points & high reputation, reward use & quality

Both system generated & community awarded

Page 59: Go With the Flow :: Web Visions 2010, May20

Enter text hereBadges, points & high reputation, reward use & quality

Page 60: Go With the Flow :: Web Visions 2010, May20

Share and share alike

With some viral patterns totally stolen from a presentation by

Christina Wodtke

Page 61: Go With the Flow :: Web Visions 2010, May20

B=f(P,E)Behavior is a function of a

Person and his Environment

Page 62: Go With the Flow :: Web Visions 2010, May20

At hand

Page 63: Go With the Flow :: Web Visions 2010, May20

Tools for sharing are in prime real estate locations

Page 64: Go With the Flow :: Web Visions 2010, May20

Tools for sharing are in prime real estate locations

Page 65: Go With the Flow :: Web Visions 2010, May20

Tools for sharing are in prime real estate locations

Page 66: Go With the Flow :: Web Visions 2010, May20

Tools for sharing are in prime real estate locations

Page 67: Go With the Flow :: Web Visions 2010, May20

Enter text hereTools for inviting are in prime real estate locations

Page 68: Go With the Flow :: Web Visions 2010, May20

Enter text hereTools for inviting are in prime real estate locations

Page 69: Go With the Flow :: Web Visions 2010, May20

Frictionless

Page 70: Go With the Flow :: Web Visions 2010, May20

The default errs on the side of the most viral option

Page 71: Go With the Flow :: Web Visions 2010, May20

The default errs on the side of the most viral option

Page 72: Go With the Flow :: Web Visions 2010, May20

The default errs on the side of the most viral option

Page 73: Go With the Flow :: Web Visions 2010, May20

The default errs on the side of the most viral option

Page 74: Go With the Flow :: Web Visions 2010, May20

Impactful

Page 75: Go With the Flow :: Web Visions 2010, May20

broadcaster

consumer

Email this Network / Newsfeed

consumer

consumer

consumer

consumerconsumer

consumer

consumer

broadcaster

vs.

One to one

One to many

Page 76: Go With the Flow :: Web Visions 2010, May20

What’s your default?

Email this

Network / Newsfeed

Page 77: Go With the Flow :: Web Visions 2010, May20

Connectedness

Page 78: Go With the Flow :: Web Visions 2010, May20

Let users walk otherpeoples network to !nd people they know

Carefully consider your method to jumpstart connections

Build on someoneelse’s social graph

Make recommendations once you have a piece of data to pivot on, like work or school

Page 79: Go With the Flow :: Web Visions 2010, May20

A word about the Password Anti-Pattern

DON’T

Page 80: Go With the Flow :: Web Visions 2010, May20

The Password Anti-Pattern

iLike

Plaxo

Page 81: Go With the Flow :: Web Visions 2010, May20

The Password Anti-Pattern

iLike

Plaxo

Page 82: Go With the Flow :: Web Visions 2010, May20

Bridging Real Life

Page 83: Go With the Flow :: Web Visions 2010, May20

Bridging real life: User and activity flow

Page 84: Go With the Flow :: Web Visions 2010, May20

Dashboard of relevant events to me + network

Page 85: Go With the Flow :: Web Visions 2010, May20

Encourage membership

Page 86: Go With the Flow :: Web Visions 2010, May20

Show me what my network is doing & where

Page 87: Go With the Flow :: Web Visions 2010, May20

Use community created content to entice new users

Page 88: Go With the Flow :: Web Visions 2010, May20

Give tools for planning

Page 89: Go With the Flow :: Web Visions 2010, May20

Combine mapping, shared photos & data

Page 90: Go With the Flow :: Web Visions 2010, May20

Creation of events by participants can be private or public

Page 91: Go With the Flow :: Web Visions 2010, May20

Calendar picker, reminders and event broadcasting

Page 92: Go With the Flow :: Web Visions 2010, May20

Use location tools to expand event plans

Page 93: Go With the Flow :: Web Visions 2010, May20

Show RSVPs from group and network

Page 94: Go With the Flow :: Web Visions 2010, May20

Mobile versions for impromptu location meetups

Page 95: Go With the Flow :: Web Visions 2010, May20

Combine mobile with web

Page 96: Go With the Flow :: Web Visions 2010, May20

Aggregate community information per location

Page 97: Go With the Flow :: Web Visions 2010, May20

Give people control over what is broadcast

Page 98: Go With the Flow :: Web Visions 2010, May20

Provide reasons to come back

Page 99: Go With the Flow :: Web Visions 2010, May20

Event page becomes a record of the event

Page 100: Go With the Flow :: Web Visions 2010, May20

Dashboard showing past events

Page 101: Go With the Flow :: Web Visions 2010, May20

Records past events monthly

Page 102: Go With the Flow :: Web Visions 2010, May20

Record of achievements collected at website

Page 103: Go With the Flow :: Web Visions 2010, May20

Record of achievements collected at website

Page 104: Go With the Flow :: Web Visions 2010, May20

Personal stats dashboard

Page 105: Go With the Flow :: Web Visions 2010, May20

Compare my stats with others in my network

Page 106: Go With the Flow :: Web Visions 2010, May20

Conversations in forums, reviews & comments

Page 107: Go With the Flow :: Web Visions 2010, May20

Activity streams

Page 108: Go With the Flow :: Web Visions 2010, May20

Wrapup: Bridging real life activity flow

Page 109: Go With the Flow :: Web Visions 2010, May20

Wrapup: The new user spiral

Initial Exposure

Education“The Sell”

Registration

Onboarding

First TimeUser Experience

Second TimeUser Experience

Third TimeUser Experience

The PassionateUser

Viral SpreadInitial Exposure

Registration

Education“The Sell”