Twitch

Subscriptions

We made managing your subscriptions on Twitch a whole lot easier and a lot less cluttered.

Twitch is the world’s largest video streaming platform with over 140 million monthly active viewers. My role is to create better experiences for Subscriptions and Payments, which is the primary way that streamers on Twitch make a living.

Background

Users who enjoy a streamer’s content can choose to spend $5 to $25 per month via Subscriptions to show monetary support. In addition, they are recognized, get exclusive benefits from Twitch and the streamer, and in many cases, become a part of that streamer’s community.

One of my first projects was to redesign the long-standing Subscription Management page, where users go to view and manage their subscriptions. I took this opportunity to build out a solution that scales across the platform and accommodates future iterations.

My Contributions

  • User Experience Design
  • Interaction Design
  • Product Management
  • Redesign

    Before and After

    Before

    After

    These are some of the improvements that we made to our old design:

    1. Density: Better use of space and surface relevant streamer data.
    2. Readability: Optimized for the most common numbers of subs per user.
    3. Consistency: Componentized to scale across Twitch.

    Constraints

    The main challenge was that engineering resources were scarce for this project. This forced me to think create designs systematically so that we could create a great experience for MVP. The initial prompt was to simply give this page a “refresh”, but I saw an opportunity to make tangible improvements

    How did we get there?

    This is the only place on Twitch where users can see all of their subscriptions in one place. It is also the only place where users cancel their subscriptions, so create a clear flow to ensure users have full control was paramount.

    Prior to designing, there were 3 sources of insights to triangulate:

    1. Qualitative Data: What do users understand about this page?
    2. Quantitative Data: How do people actually use this page?
    3. Vision: What user actions do we want to encourage?

    The previous Subscriptions Management UX Flow

    Qualitative Data

    We were able to derive core use cases by speaking to users of various levels of Twitch expertise and observing usage patterns. Looking at common use cases allowed us to better prioritize UI elements and information presentment.

    Quantitative Data

    A key data point was to understand the “number of subscriptions per user” and more importantly, its distrubtion. That would help inform what are the common cases and break-points we would account for in each category and also the global maximum (making sure the experience doesn’t break for the people who have 1000+ subs).

    Vision

    When designing, It’s not only important to be solving user problems but also look ahead to predict what users want out of a feature or page. I saw potential in this page not only manage your subs but to manage your sub status on Twitch (all of your sub badges, gift badges, bits badges, etc.).

    Subscription Card

    The cards were designed so that users could easily identify the streamer's brand and collect them like inventory. They are designed with a sense of rhythm so that in a crowd, they could be easily skimmed through, but they can still stand out as unique individuals.

    Subscription Cards

    Key information is highlighted such as Sub Tier, Sub Badge, Renewal/Expiry Date, etc. Aside from accounting for variants like different Subscription types, we also created these components to work for different languages and text overflow.

    Testing the cards for localization

    Cancellation Flow

    Before and after of the Subscription cancellation form

    Our existing cancellation form was not very effective. Only a small percentage of users filled out the text box to explain why they’re cancelling. With reducing cancellations as a key metric, redesigning the form accomplishes a few things:

    1. Creates layer of perceived friction (selector actually optional).
    2. Gives users who are cancelling an outlet.
    3. Gives Twitch and the creator feedback into how to improve.

    Try it yourself

    This project launched in May of 2018. We will continue building out features for Subscriptions to make them more comprehensive and approachable for new users.

    If you have subs of your own, check it out here!


    What I learned

    It always helps to bring in fresh eyes and fresh perspectives. Don’t spend too long honing in on creating the perfect design. Throw together 2-3 rough ideas and simply shop them around to the people around you, no matter what their roles are. This helps build quick pitch skills and facilitating feedback.

    Every design project needs a one-page document that outlines the problem, success metrics, customer needs and collected data. Suck it up and do this at the beginning of a project and it will pay for itself, I promise you. :)

    Getting buy-in from stakeholders is crucial in a large organization. Make the most of your time by being very deliberate about each session and make the intended outcomes clear.


    Next Project:

    Case Study: Flipp Coupons