Virality Study 1

Virality Design Patterns
Prepared by Stephan Orme
Worklogistics.com
Stephan@worklogistics.com • 510-847-8537
Document Version 0.88
Virality Study Page 1 of 25

April 7, 2011 Stephan Orme • stephan@worklogistics.com • 510-847-8537
We build web and mobile software. Check us out:
worklogistics.com
This document, along with the Modeling Virality spreadsheet are available online:
http://worklogistics.com/category/design-patterns/virality/

Table of Contents
Product Virality
What is Product Virality? 4
Modeling Product Virality 4
Product Virality Spreadsheet 5
Product Virality and Design 6
UX Design Pattern Library 7
The Sharing/Invite Ask
Sharing Mechanics
Engagement - A Prospective New User
The Invitation
New Visitor Landing Page
New Visitor Engagement
Sign Up
Sign Up - Continued
Post Sign-Up Orientation
Deepening User Engagement
Reference Sharing Design 20

Sharing
Engagement
Modeling Product Virality 24
Additional Resources
• “Lessons Learned – Viral Marketing” by David Skok
http://www.forentrepreneurs.com/lessons-learnt-viral-marketing/
• “Viral marketing and user acquisition” by Andrew Chen
http://andrewchenblog.com/list-of-essays/
• “A Spreadsheet Model for Viral Growth” by Mark de Visser
http://www.markdevisser.com/2010/02/a-spreadsheet-model-for-viral-growth-2/
• Wikipedia Articles on “Exponential growth”, “Logistic Growth” and “Epidemic Model”
http://en.wikipedia.org/wiki/Exponential_growth
http://en.wikipedia.org/wiki/Logistic_growth
http://en.wikipedia.org/wiki/Epidemic_model
• Joshua Porter’s series of presentations

http://www.slideshare.net/search/slideshow?q=bokardo

Product Virality
What is Product Virality?
Product virality used to be called “word of mouth” and at its heart, it’s one person sharing with another,
something they liked. It’s good for your business and it’s good for your users because it’s a way for them to
connect with friends and share things. And in the internet age, it’s the essential means to survive in the market.
Modeling Product Virality

The design patterns below are linked to a spreadsheet model. Product virality modeling borrows ideas from
epidemiology which uses models to study the spread of diseases in populations. The simple model that I use
here (a SEIS Compartment Model for the curious), looks like this:
Viral Cycle Model

Potential Users Invitees Users Potential Users
(Susceptible) (Exposed) (Infected) (Susceptible)
Viral Loop
ß = Invite Rate ∂ = Conversion Rate Ω = Attrition Rate
(Invite/User/Day) (Conversions/Invitations/Day) (Attritions/User/Day)
Viral Cycle: How users see it - step by step
Sharing Sharing The Invite New Visitor Sign First Deepening Attrition
Decision Mechanics Invitation Landing Page Engagement Up Run Engagement
Product K-Factor
Where:
The K-Factor equation is the simplest equation that describes
product virality. It looks like this: • K = “Virality K-Factor” or “Virality
Coefficient”
• K = P1 x N x P2
• P1 = percentage of users who
When K is greater than 1, your user base replaces itself and growth is
invite others
exponential; however, this is the lifetime number of invites/
conversions. For any given period, K can be less than 1 and you can • N = average number of
still get exponential growth so long as the lifetime conversion is invitations by each user who
invites others
greater than one. The consequence of this is that a snapshot of the
K-value is not meaningful for models with ongoing sharing (i.e. • P2 = percentage of invitees who
most software products)1 . become users
1 Models that only allow each user to have one ‘sharing event‘ is one way to solve this problem, but the difficulty then is that this generally doesn’t fit the
actual real-world behavior we are trying to model and you can’t compare and update your model against real-world data as it comes in. See David Skok or
Mark de Visser’s excellent series of articles for ‘share-once’ models (see links on Table of Contents page).

Product Virality Spreadsheet
For more on modeling, see the Appendix below for additional notes as well as the Virality Modeling spreadsheet
which is part of this package.

Product Virality and Design
Product Virality: Stages
The really important part of designing for virality is having a product
which is intrinsically shared or having content that people want to Sharing (Existing User)
share. The steps below address the mechanics of sharing but not the • Sharing Decision
art. They’re important, but not sufficient. • Sharing Mechanics
There are two phases to virality: Sharing and Engagement. To get
Engagement (New User)
better insight into what designs work and why, I broke the process
• Invitation
down into stages and then reviewed a range of designs to pull
together a few examples of the design patterns used to address • Invitation Landing Page
each step. • New Visitor Engagement
These stages are also represented in the spreadsheet model which • Sign up
helps analytics and design to inform each other. The attempt is to • First Run after Sign up
link the virality model with specific UX design solutions so that
• Deepening Engagement
the two perspectives inform each other.
Note: this is a general model, steps
It’s worth noting that while these examples illustrate the patterns vary for different products.
they are not necessarily the best solutions for your situation.

UX Design Pattern Library
Note: These viral design patterns are for consumer websites; related but different patterns apply for Mobil App
and B2B Virality. (If you are interested in these topics, please contact us).
The Sharing/Invite Ask

This is the start of the process; the context is, the user is in the process of making the decision to share content
or to invite another user. The basic challenge is to get the user to decide to share. The best way to do that is to
have a compelling reason to share, no amount of clever UI design will help if your basic offering isn’t any good.
There’s two kinds of sharing described here: sharing content, i.e. a picture, video, status update, info, message,
etc. And inviting to join i.e. a network or an app.
Animated Share Bar

Once users scroll down part way, share options roll down and are revealed. Another variation of this is the share tab which
scrolls vertically with the content.
A. % who Invite? B1. # of invites www.electronista.com / Apture.com
Share Bar rolls down once user scrolls down. The

animation catches the eye and share options are
presented cleanly.
Service from http://www.apture.com/ but shown

here on the MacNN.com website.
Apture also integrates a search box which

enables users to search for content on the
webite.
Percent-Complete Progress Bar combined with Invites Basic share content

Geni encourages you to Invite your Relatives using a percent complete bar A. % who Invite B1. # of invites
A. % who Invite? B1. # of invites Geni.com
Percent Complete Bar is a

compelling pattern to
encourage users to
complete an enrollment
process. In this case, Geni
uses it to encourage users FB Share, FB LIke and
to invite anyone they've Tweet. Always at hand.
included in their family No email option?
tree. From thebolditalic
In addition, the purpose of

the website (discovering
family legacy) is well
aligned with sharing

Content Sharing Bar with Subscription Up-sell
FastCompany encourages deeper engagement when users share content
April 7, 2011
A. % who Invite B1. # of invites From Fastcompany.com
Basic sharing bar with content up-sell: from
sharing to deeper engagement and
subscription.
Fastcompany users find them through their

interesting content. This FC sharing design

points them toward deeper engagement.
Share Content Dashboard Sharing Widgets

StumbleUpon's sharing widget is a whole dashboard which includes elements that address Social Third-party widgets provide all the options. Embedding
Proof and Status to Encourage Sharing content provides a channel into the users network.
From SlideShare.net
A. % who Invite D. Engagement From StumbleUpon.com A. % who Invite B1. # of invites C1. Accepts Invite (Gigya.com)
I am Powerful. My recommendations
are seen by millions
Use 3rd party Social Widgets, to share

Like button:
content. This one is from Gigya.com
Bright, focal point
Additional Sharing
Options
Social Proof: Other

people like this
too.
Embedding content provides a channel into the

users site. Content distribution is a goal in it's own
right as it increases ad revenue. It also means
broader reach for included invite.
Stephan Orme • stephan@worklogistics.com • 510-847-8537

Sharing Mechanics
Successful viral products are successful because of superior sharing mechanics. Why? Because each of the steps
after this point decreases K, i.e. there’s a fall-off in uptake. That means that to get high K-factor numbers, sharing
must be high. Put another way, you can optimize the rest of the steps to minimize losses, but the only way to
increase K is to increase sharing.
The context here is, the user has made the decision to share and now there are two things happening: a) getting
through the invite process and b) increasing the number and frequency of invites.
The essence of this step is reaching lots of users. There are two modes to sharing in the examples below: sending
a message to selected individuals, and posting to a personal or public network, (i.e. Facebook Wall, twitter feed,
Quora, etc.) Individual sharing has better response rates but posting has much better reach.
Sharing With / Inviting Selected Individuals

Response is better when sharing/inviting with selected friends but reach isn’t as great.
Sharing from a List Inviting from a list

Once you have login credential, inviting selected contacts Invite from a list.
B1. # of invites A. % who Invite? From SlideShare.net From Quora.com
Simple means to import contacts

from many sources encourages
broad sharing, increasing the
number of invites
Inviting Selected FB Friends

Inviting as a Game Individual invitations to up to 75 friends per day. Not to
From a set of possible invitees, show only a few. be confused with posting to FB wall (see below). User
From Quora.com must select each person to invite from a list.
Geni displays two

potential invitees. This
pattern can be
combined with
inviting from list.

Posting to a Personal or Public Network
Posting to a Facebook Wall, Twitter or public network (Digg, StumbleUpon, etc) is the easiest path to reach large
numbers of users; however, sharing to selected individuals has a higher response rate.
Because the reach of these services is so much greater than individual sharing, often successful viral products are
successful because they get shared on networks. Getting users to publish content to their wall, their friends wall
or to public networks is a key mechanism for virality.
In March 2010, Facebook implemented new rules* which dramatically changed sharing dynamics, they are:
1. You cannot publish the same Feed story to more than one friend’s Wall at a time
2. Let users tag photos
3. Users should initiate and consent to publishing
* http://developers.facebook.com/blog/post/371/
User posting to their own wall

Sharing created content with network Facebook Comments
Sharing content the user creates is particularly relevant for sharing to In March 2011, Facebook implemented a commenting system that
network. A secondary effect of posting to a personal network is that it allows users to use their FB Id to login and post on 3rd party sites.
encourages better quality posts, a virtuous cycle. The widget allows users to also post comments to their Feed
which indirectly shares the article (content) and site.
From Quora Facebook Comments
Default Message
makes it easy
After making a post, a chance to let your friends

know how smart you are.
Secondary effect of posting to personal network is

it encourages better quality posts, a virtuous cycle.
User posting to their friend’s wall

Posting to friends walls greatly extends reach (publishing to your own wall reaches just your friends, posting to
your friends wall reaches all their friends). To reduce spam, Facebook rules only allows you to publish to one
friend-wall at a time.
Need Examples

Engagement - A Prospective New User
Product Virality: Stages
This is the beginning of the second phase of the viral process:
engaging our prospective new users. It starts with an invite and Sharing (Existing User)
progresses to becoming a fully active user. See list of Engagement • Sharing Decision
steps at right.
• Sharing Mechanics
The Invitation Engagement (New User)

Our potential new user has just received an invite and they are in the • Invitation
process of deciding what to do. The design goal is to get users to a)
• Invitation Landing Page
open, read, view or otherwise engage with the invite and b) accept
the invite and follow the link back to site. • New Visitor Engagement
These are some basic examples of invitations. • Sign up

• First Run after Sign up
• Deepening Engagement
Note: this is a general model, steps
vary for different products.
Basic Email Invite Email Share with Content

C1. Accepts Invite From Quora.com C1. Accepts Invite From Flikr.com
Email Subject line has
Good subject: has who Person who sent it +
from and what 'Flickr Photo'. Which
tells me a) it's from
someone I know and
Personal message
b) it's worth looking at.
What's being shared Beautiful, compelling

content, means I'm
glad I opened the
email
Link to view content,
weak sell
NO 'Join Flikr' message
anywhere on this page
Opt out of future OR the landing page if
messages I follow the content.
Poor recruitment
Email Invite with Social Proof
C1. Accepts Invite From uxshowandtell.com
The Ask, 'Click to Join' Link takes invitee back

is focal point of design to content page but no
1st run orientation or
any attempt to entice
visitor to join Flikr
Who from
What's being shared

(network of people). Basic Facebook Wall Share
Reach personal network of one user. Follow content back to original site.
Social proof
Opt out of future

messages

The context here is a new user has decided to follow a link from an invitation back to the site. This is the first time
they’ve seen the site and the goal is to welcome, engage and orient. Note: this stage is very similar to Post Sign-
Up Orientation (different kind of user but similar problems and solutions). Other resources:
• “Anatomy Of A Perfect Landing Page” - Kissmetrics Blog

http://blog.kissmetrics.com/landing-page-design-infographic/
Welcome Banner for New Visitors
When user follows Slideshare

content link banner at top of page
encourages joining network.
Social Proof High-level explanation Call to Action, Focal point of

page
Welcoming Visitors From Vimeo.com
Friendly Welcome!
Short statement tells visitor what

the site is about.
Immediately present interesting

new content to engage
Compelling Content on Landing Page

In this design: a striking picture + music which automatically start playing + floating
commentary add up to a very engaging experience
From TheSixtyOne.com
Music automatically
begins when page is
loaded. Music is always
something compelling
Interesting commentary
about band pops up
randomly. Each comment
appearing in different
spot. Really engaging.
Interesting picture fills

the screen

This design optimized for re-sharing content - leading to very fast viral cycles.
Compelling Content for Landing Page Draft design for Hitpost.com
Immediately Re-Share
content for very fast viral
cycle
Engage with site. Value

prop to visitor: "Find
sports updates hela fast"
Second way to engage

with site: follow Robert

New Visitor Engagement
The context here: we have a new visitor that we are coaxing into continued use of the site. Note: this stage is very
similar to post-sign-up engagement (different kind of user but similar issues). The goal is generally to get the
user to explore the site, re-share content and/or sign up.
• See Deepening User Engagement for examples.
Need Examples

Sign Up
April 7, 2011
sign-in process.
No Password Sign Up Single Entry Password for Sign Up
C3. Sign Up From Geni.com From About.com
- Clear description
- Short, clarifying explanation

Beautiful women and cool charts together
at last! I want what they're selling.
- Dead-simple enrollment, Just three fields

to sign up. No password confirm
No password, enrollment - Geni - Multi-step enrollment, other questions

emails temp password, great for asked later
low-security situations.
- Top aligned labels easier/faster to scan
Sign up button:
Visually not as beautiful as some - Button says what it does
1. Communicates immediate benefit
other other examples here. - Direct language re-enforces message.
2. Imperative statement 'Start...'
- Focal point
3. Focal point of design
C3. Sign Up From SquareUp.com C3. Sign Up From Path.com C3. Sign Up General Rules
General Form Entry Design Issues
- Lazy registration: users can use site w/o registering
- Indicate required fields
- Real-time data validation
- Top aligned labels
- Minimize data entry
- Multi-Step process to break up complex entry
Registration and it’s used to deepen user commitment before asking for a sign up.
- Top aligned labels easier faster to scan

- Simple, clean emphasizes simplicity to sign up
- Minimal Info lowers transaction cost
Clearly states the Sign Up button is a focal point of

value proposition design, The directive Sign Up states
the intention for the page.
engagement with the service prior to signing up (see New Visitor Engagement, above) . This is called Lazy
users (design goal: fast sign up) 2. Unsure (re-iterate value) and 3. Skeptical (description, social proof, etc)
stage in several frames of mind, Joshua Porter (see Resources on first pages) discusses three types: 1. Decided
Sign up is a significant hurdle for users, instead of signing up first, often a better design is to have users deepen
The challenges of this phase are: a) Moving undecideds into decided and b) getting users all the way through a
The context here is the user is in the process of deciding if they want to sign up for the service. Users come to this

Preferential use of Facebook Login over Native Login plus Universal logins simplify sign up
Find / Invite Friends During Sign-up Process
C3. Sign Up A. % who Invite C2. First Use B1. # of invites C3. Sign Up From DailyKos.com
April 7, 2011
Quora preferentially
From Quora.com
displays Facebook and
Twitter logins.
This gives Quora access to

Sign Up - Continued
Facebook contacts which

greatly simplifies future

sharing.
Universal logins (Facebook,

Twitter, etc) eliminates
Automatically Follow need to remember yet
Friends fills queue with another password
familiar names and topics.
This helps with 1st run
engagement.
Present value prop
during sign up
Always Available Sign Up Tab Lower Commitment during Signup

Present Features and Benefits during signup
C3. Sign Up From econsultancy.com C3. Sign Up From Slideshare.com
Join Button floats above content,

always available. Bright color and
Imperative statement encourage
enrollment
"Takes 30 Seconds" lowers commitment - Present Features and

key factor in users deciding to sing up. Benefits alongside sign-up
"Free" another important word encourages uptake

•
•
Resources:
Users Select First run tours
April 7, 2011
First run tour From Path.com tailored to specific uses
Friendly Welcome,
three options here:
- Tour
- Skip tour and jump in From Behance.com
- Help

Presenting simple steps
Post Sign-Up Orientation
lowers commitment
and encourages users
to take tour.
Select the tour that

interests you.
Startup Videos website: http://startup-videos.com/
Numbered steps encourage users to try all three engagement actions Orientation Email
C2. First Use D. Engagement
From Flikr.com
From Flikr.com
Flkr Intro Bar shows three common

activities they want you to know
how to perform. Hovering over
each item displays pop-up
explaining the feature.
Focal point is a) Welcome and b)
Presenting at 3 steps encourages
Three get started activities.
user to explore all three
Providing Direction during initial use
The design challenge here is to orient and provide users a clear way to discover useful functionality.
simplifies user uptake

Quora thread: http://www.quora.com/What-are-some-good-examples-of-startup-product-demo-videos
very similar to New Visitor Orientation (the problems and solutions are similar, but the kind of user is different)
Context: user has just completed sign up and we need to help them get started using the site. Note: this stage is

April 7, 2011
Quests for fun and engagement Badges or Achievement levels
From theSixtyOne.com
D. Engagement From FourSquare.com

Users earn badges by

participating in the service
Earn Points
Earn Reputation and Like points. Like
points can be 'spent' by voting up
songs you like
Quests
Quests entice users to trying features of the site, following
the musical tastes of three other users in this example.
Quests are fun and they teach users a new way to discover
music which reinforces the basic value of the site - brilliant!
Progress Bar to encourage completion of multi-step process Content Discovery: Slide-out dialog suggest next article
There are a huge range of engagement strategies, this is just a small sample.
D. Engagement From Geni.com D. Engagement From NYTimes.com
Slide-out dialog suggests next article.
Dialog only appears when you scroll to

Progress Bar pattern is the end of an article. Reminding user at
compelling way to encourage the exact moment user is looking for
users to complete a multi-step new content.
process
others. Increased retention and increased sharing are natural outcomes of deepening user engagement.
and deeper use of service. b) Help user discover full feature set c) Engage interest d) get them to share site with
The context here is that the user is signed up and using the product. The design challenge is to a)more frequent

That’s it! You’ve converted your invitees into visitors
into engaged, active users who are all ready to send
out the next batch of invites.
Return to step 1


Virality Study 1

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Virality Study 1

Загружено:

Авторское право:

Доступные форматы

Virality Design Patterns

Prepared by Stephan Orme

Virality Study Page 1 of 25

Virality Study Page 2 of 25

Reference Sharing Design 20

Modeling Product Virality 24

• Joshua Porter’s series of presentations

Virality Study Page 3 of 25

Modeling Product Virality

Viral Cycle Model

(Susceptible) (Exposed) (Infected) (Susceptible)

Viral Cycle: How users see it - step by step

Virality Study Page 4 of 25

Virality Study Page 5 of 25

Virality Study Page 6 of 25

The Sharing/Invite Ask

Animated Share Bar

Share Bar rolls down once user scrolls down. The

Service from http://www.apture.com/ but shown

Apture also integrates a search box which

Percent-Complete Progress Bar combined with Invites Basic share content

Percent Complete Bar is a

In addition, the purpose of

Virality Study Page 7 of 25

Fastcompany users find them through their

Virality Study Page 8 of 25

Share Content Dashboard Sharing Widgets

Use 3rd party Social Widgets, to share

Social Proof: Other

Embedding content provides a channel into the

Stephan Orme • stephan@worklogistics.com • 510-847-8537

Sharing With / Inviting Selected Individuals

Sharing from a List Inviting from a list

B1. # of invites A. % who Invite? From SlideShare.net From Quora.com

Simple means to import contacts

Inviting Selected FB Friends

Geni displays two

Virality Study Page 9 of 25

User posting to their own wall

From Quora Facebook Comments

After making a post, a chance to let your friends

Secondary effect of posting to personal network is

User posting to their friend’s wall

Virality Study Page 10 of 25

The Invitation Engagement (New User)

These are some basic examples of invitations. • Sign up

Basic Email Invite Email Share with Content

What's being shared Beautiful, compelling

The Ask, 'Click to Join' Link takes invitee back

What's being shared

Opt out of future

Virality Study Page 11 of 25

• “Anatomy Of A Perfect Landing Page” - Kissmetrics Blog

Welcome Banner for New Visitors

When user follows Slideshare

Social Proof High-level explanation Call to Action, Focal point of

Welcoming Visitors From Vimeo.com

Short statement tells visitor what

Immediately present interesting

Compelling Content on Landing Page

Interesting picture fills

Virality Study Page 12 of 25

Engage with site. Value