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? Modeling Product Virality Product Virality Spreadsheet Product Virality and Design UX Design Pattern Library
The Sharing/Invite Ask Sharing Mechanics Engagement - A Prospective New User The Invitation New Visitor Landing Page New Visitor Landing Page New Visitor Engagement Sign Up Sign Up - Continued Post Sign-Up Orientation Deepening User Engagement
4 4 5 6 7
Reference Sharing Design

Sharing Engagement
20
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 Porters 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, its one person sharing with another, something they liked. Its good for your business and its good for your users because its a way for them to connect with friends and share things. And in the internet age, its 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
(Susceptible)
Invitees
(Exposed)
Users
(Infected)
Potential Users
(Susceptible)
Viral Loop = Invite Rate

(Invite/User/Day)
= Conversion Rate
(Conversions/Invitations/Day)
= Attrition Rate
(Attritions/User/Day)
Viral Cycle: How users see it - step by step

Sharing Decision Sharing Mechanics The Invitation Invite Landing Page New Visitor Engagement Sign Up First Run Deepening Engagement Attrition
Product K-Factor
The K-Factor equation is the simplest equation that describes product virality. It looks like this: K = P1 x N x P2 Where: K = Virality K-Factor or Virality Coefficient P1 = percentage of users who invite others N = average number of invitations by each user who invites others P2 = percentage of invitees who become users
When K is greater than 1, your user base replaces itself and growth is exponential; however, this is the lifetime number of invites/ conversions. For any given period, K can be less than 1 and you can still get exponential growth so long as the lifetime conversion is 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. most software products)1 .
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 doesnt fit the actual real-world behavior we are trying to model and you cant compare and update your model against real-world data as it comes in. See David Skok or Mark de Vissers 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

The really important part of designing for virality is having a product which is intrinsically shared or having content that people want to share. The steps below address the mechanics of sharing but not the art. Theyre important, but not sufficient. There are two phases to virality: Sharing and Engagement. To get better insight into what designs work and why, I broke the process down into stages and then reviewed a range of designs to pull together a few examples of the design patterns used to address each step. These stages are also represented in the spreadsheet model which helps analytics and design to inform each other. The attempt is to link the virality model with specific UX design solutions so that the two perspectives inform each other. Its worth noting that while these examples illustrate the patterns they are not necessarily the best solutions for your situation.
Product Virality: Stages Sharing (Existing User)

Sharing Decision Sharing Mechanics
Engagement (New User)

Invitation Invitation Landing Page New Visitor Engagement Sign up First Run after Sign up Deepening Engagement
Note: this is a general model, steps vary for different products.
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 isnt any good. Theres 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

Geni encourages you to Invite your Relatives using a percent complete bar 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 to invite anyone they've included in their family tree. In addition, the purpose of the website (discovering family legacy) is well aligned with sharing
Basic share content

A. % who Invite B1. # of invites
From thebolditalic
FB Share, FB LIke and Tweet. Always at hand. No email option?
Content Sharing Bar with Subscription Up-sell

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.
FastCompany encourages deeper engagement when users share content
A. % who Invite
B1. # of invites
Share Content Dashboard Sharing Widgets
StumbleUpon's sharing widget is a whole dashboard which includes elements that address Social Proof and Status to Encourage Sharing
Third-party widgets provide all the options. Embedding content provides a channel into the users network.
A. % who Invite
D. Engagement
From StumbleUpon.com
A. % who Invite B1. # of invites
From SlideShare.net (Gigya.com) C1. Accepts Invite
I am Powerful. My recommendations are seen by millions Like button: 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.
Use 3rd party Social Widgets, to share content. This one is from Gigya.com
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. theres 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 isnt as great.
Sharing from a List

Once you have login credential, inviting selected contacts B1. # of invites A. % who Invite? From SlideShare.net
Inviting from a list

Invite from a list. From Quora.com
Simple means to import contacts from many sources encourages broad sharing, increasing the number of invites
Inviting as a Game
From a set of possible invitees, show only a few. From Quora.com
Inviting Selected FB Friends

Individual invitations to up to 75 friends per day. Not to be confused with posting to FB wall (see below). User 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 friends 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
Sharing content the user creates is particularly relevant for sharing to network. A secondary effect of posting to a personal network is that it encourages better quality posts, a virtuous cycle. From Quora Default Message makes it easy
Facebook Comments
In March 2011, Facebook implemented a commenting system that allows users to use their FB Id to login and post on 3rd party sites. The widget allows users to also post comments to their Feed which indirectly shares the article (content) and site. Facebook Comments
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 friends 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

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

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

Invitation Invitation Landing Page New Visitor Engagement Sign up First Run after Sign up Deepening Engagement
Note: this is a general model, steps vary for different products.

Basic Email Invite
C1. Accepts Invite From Quora.com Good subject: has who from and what Personal message What's being shared
Email Share with Content

C1. Accepts Invite From Flikr.com Email Subject line has Person who sent it + 'Flickr Photo'. Which tells me a) it's from someone I know and b) it's worth looking at. Beautiful, compelling content, means I'm glad I opened the email NO 'Join Flikr' message anywhere on this page OR the landing page if I follow the content. Poor recruitment
Link to view content, weak sell Opt out of future messages
Email Invite with Social Proof

C1. Accepts Invite From uxshowandtell.com The Ask, 'Click to Join' is focal point of design
Link takes invitee back 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). Social proof
Basic Facebook Wall Share

Reach personal network of one user. Follow content back to original site.
Opt out of future messages
New Visitor Landing Page

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 theyve seen the site and the goal is to welcome, engage and orient. Note: this stage is very similar to Post SignUp 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 From Vimeo.com
Welcoming Visitors
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
New Visitor Landing Page

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
No Password Sign Up
From Geni.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 - Multi-step enrollment, other questions asked later - Top aligned labels easier/faster to scan - Button says what it does - Direct language re-enforces message. - Focal point
Single Entry Password for Sign Up

From About.com
engagement with the service prior to signing up (see New Visitor Engagement, above) . This is called Lazy Registration and its used to deepen user commitment before asking for a sign up.
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 sign-in process.
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 stage in several frames of mind, Joshua Porter (see Resources on first pages) discusses three types: 1. Decided users (design goal: fast sign up) 2. Unsure (re-iterate value) and 3. Skeptical (description, social proof, etc)

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 - Top aligned labels easier faster to scan - Simple, clean emphasizes simplicity to sign up - Minimal Info lowers transaction cost
C3. Sign Up
No password, enrollment - Geni emails temp password, great for low-security situations.
Visually not as beautiful as some other other examples here.
Sign up button: 1. Communicates immediate benefit 2. Imperative statement 'Start...' 3. Focal point of design
C3. Sign Up
From SquareUp.com
Clearly states the value proposition
Sign Up button is a focal point of design, The directive Sign Up states the intention for the page.
Preferential use of Facebook Login over Native Login plus Find / Invite Friends During Sign-up Process
B1. # of invites From Quora.com
Quora preferentially displays Facebook and Twitter logins. This gives Quora access to Facebook contacts which greatly simplifies future sharing.
Universal logins simplify sign up

C3. Sign Up From DailyKos.com
Sign Up - Continued

Automatically Follow Friends fills queue with familiar names and topics. This helps with 1st run engagement.
C3. Sign Up
A. % who Invite C2. First Use
Universal logins (Facebook, Twitter, etc) eliminates need to remember yet another password
Present value prop during sign up
Always Available Sign Up Tab

From econsultancy.com C3. Sign Up
Lower Commitment during Signup Present Features and Benefits during signup
From Slideshare.com
C3. Sign Up
Join Button floats above content, always available. Bright color and Imperative statement encourage enrollment
"Takes 30 Seconds" lowers commitment key factor in users deciding to sing up. "Free" another important word
Present Features and Benefits alongside sign-up encourages uptake
Resources:
First run tour

From Path.com
Users Select First run tours tailored to specific uses
Post Sign-Up Orientation
very similar to New Visitor Orientation (the problems and solutions are similar, but the kind of user is different) The design challenge here is to orient and provide users a clear way to discover useful functionality.
Context: user has just completed sign up and we need to help them get started using the site. Note: this stage is

Friendly Welcome, three options here: - Tour - Skip tour and jump in - Help From Behance.com Presenting simple steps lowers commitment and encourages users to take tour.
Startup Videos website: http://startup-videos.com/
Select the tour that interests you.
Numbered steps encourage users to try all three engagement actions

From Flikr.com
Orientation Email
From Flikr.com
C2. First Use
D. Engagement
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. Presenting at 3 steps encourages user to explore all three Focal point is a) Welcome and b) Three get started activities. Providing Direction during initial use simplifies user uptake
Quora thread: http://www.quora.com/What-are-some-good-examples-of-startup-product-demo-videos
Deepening User Engagement

Badges or Achievement levels
D. Engagement From FourSquare.com From theSixtyOne.com
Deepening User Engagement
There are a huge range of engagement strategies, this is just a small sample.
and deeper use of service. b) Help user discover full feature set c) Engage interest d) get them to share site with others. Increased retention and increased sharing are natural outcomes of deepening user engagement.
The context here is that the user is signed up and using the product. The design challenge is to a)more frequent

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 for fun and engagement
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

From Geni.com
Content Discovery: Slide-out dialog suggest next article

D. Engagement From NYTimes.com
D. Engagement
Slide-out dialog suggests next article. Dialog only appears when you scroll to the end of an article. Reminding user at the exact moment user is looking for new content.
Progress Bar pattern is compelling way to encourage users to complete a multi-step process
Thats it! Youve 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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Virality Study 1

Uploaded by

Copyright:

Available Formats

Virality Design Patterns

Prepared by Stephan Orme

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

Virality Study Page 2 of 25 April 7, 2011

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

Reference Sharing Design

Modeling Product Virality

Virality Study Page 3 of 25 April 7, 2011

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

Modeling Product Virality

Viral Cycle Model

Viral Loop = Invite Rate

Viral Cycle: How users see it - step by step

Virality Study Page 4 of 25 April 7, 2011

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

Product Virality Spreadsheet

Virality Study Page 5 of 25 April 7, 2011

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

Product Virality and Design

Product Virality: Stages Sharing (Existing User)

Engagement (New User)

Note: this is a general model, steps vary for different products.

Virality Study Page 6 of 25 April 7, 2011

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

UX Design Pattern Library

The Sharing/Invite Ask

Animated Share Bar

Percent-Complete Progress Bar combined with Invites

Basic share content

FB Share, FB LIke and Tweet. Always at hand. No email option?

Virality Study Page 7 of 25 April 7, 2011

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

Content Sharing Bar with Subscription Up-sell

FastCompany encourages deeper engagement when users share content

Virality Study Page 8 of 25 April 7, 2011

Share Content Dashboard Sharing Widgets

A. % who Invite B1. # of invites

From SlideShare.net (Gigya.com) C1. Accepts Invite

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

Sharing With / Inviting Selected Individuals

Sharing from a List

Inviting from a list

Inviting Selected FB Friends

Virality Study Page 9 of 25 April 7, 2011

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

Posting to a Personal or Public Network

User posting to their own wall

User posting to their friends wall

Virality Study Page 10 of 25 April 7, 2011

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

Engagement - A Prospective New User

Product Virality: Stages Sharing (Existing User)

Engagement (New User)

Note: this is a general model, steps vary for different products.

Email Share with Content

Link to view content, weak sell Opt out of future messages

Email Invite with Social Proof

What's being shared (network of people). Social proof

Basic Facebook Wall Share

Opt out of future messages

Virality Study Page 11 of 25 April 7, 2011

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