What are great examples of viral UX/UI design patterns?

Answer by Stephan Orme:

Note! An expanded version of this post is now available as a downloadable pdf which you can get here: http://worklogistics.com/category/design-patterns/virality/

How this Post is Organized

The following is part of a larger product virality study I’m working on. There are three parts here:

  • Virality K-Factor equation
  • Virality design pattern library
  • Reference sharing design

    Product Virality: Basic structure and the K-Factor Equation

    In the diagram below, I’ve broken product virality into two parts: Sharing and Engagement and I’ve organized and expanded the standard virality equation around these phases to get better insight into the factors that go into it.

    These factors are color coded and matched to specific design patterns, which follow below. The attempt here is to directly link the virality equation with specific UX design solutions so that the two perspectives can inform each other.

    UX Design Pattern Library
    The UX design patterns below are organized by phase. Each pattern is color coded to show which part of the virality K-factor equation they impact  (see above for key). There are five basic phases:

    • The act of Sharing/Inviting
    • The Invitation
    • Sign up
    • First Run Engagement
    • Deepening Engagement

    This is a general approach and the order and importance of each phase will vary for different products, for example, some products may not have a sign up at all.

    The Sharing/Invite Ask
    The context for this phase is that a user is in the process of making a decision to share content or to invite another user. The main challenges for this step are: a) getting a user to decide to share b) making it all the way through the invite process and c) increasing the number and frequency of invites.

    Each example below illustrates one or more design patterns that address these challenges. This examples come from the following sites:

    Engagement: The Invitation
    The context for this phase is that our potential new user has just received an invite and they are in the process of deciding what to do with the invite.

    The design goal is to get users to a) read, view or otherwise engage with the invite and b) accept the invite and follow link back to site (or take the next step in engagement whatever that may be). Examples come from:

    • Quora http://www.quora.com/
    • Flickr http://www.flickr.com/
    • UX Show and Tell http://uxshowandtell.com/
    • SlideShare http://www.slideshare.net/

    Engagement:  Sign Up
    Note Sign up is a major hurdle for users, instead of signing up first, often a better design is to have users use the service prior to signing up. This is called Lazy Registration and it’s used to deepen engagement and user commitment before going through sign up.

    The context here is the user is in the process of deciding if they want to sign up for the service and explore it further. Users come to this stage in several frames of mind, Joshua Porter posits there are three types: 1. Decided users (design need: fast sign up) 2. Unsure (design need: re-iterate value) and 3. Skeptical (design need: additional description, social proof, etc)

    The challenges of this phase are: a) Moving undecideds into decided and b) getting users all the way through a sign-in process. The examples below come from:

    • Geni http://www.geni.com/home
    • About.me https://about.me/
    • Square, Inc. https://squareup.com/
    • Path http://www.path.com/
    • DailyKos.com http://www.dailykos.com/
    • Quora http://www.quora.com/
    • LinkedIn http://www.linkedin.com/
    • SlideShare http://www.slideshare.net/

    Engagement: First Run

    Context: user has just completed sign up and we need to help them get started using the site. Note When the Lazy Registration pattern is used, First Run happens before users sign up.

    The First Run design challenge is to a) orient new users b) provide as much immediate value as possible c) help users discover useful new functionality. Examples come from:

    • UX Show and Tell http://uxshowandtell.com/
    • Flickr http://www.flickr.com/

    More First Run Engagement articles:

    Engagement – Deepening Engagement
    The context here is that the user is using the product.

    The design challenge is to get a) more frequent and deeper use of service. b) help users discover full feature set c) engage ongoing interest and d) support users in using and learning product.

    Increased retention and increased sharing are often outcomes of deepening engagement. Examples come from:

    Reference Sharing  Design

    Below is a generalized Sharing Use Flow diagram, this follows the following steps:

    1. The Ask
    2. Select share method
    3. Choose who to share with
    4. The Invitation
    5. Invite Landing Page – First Run (not shown)
    6. Sign Up (not shown)

    View Answer on Quora

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.