Twitch Channel Subscriptions

Channel Subscriptions have always been the best way to support streamers on Twitch. A monthly contribution that comes with benefits like ad free viewing, custom emotes and badges. However as the number of features and benefits we added to subscriptions increased, so did the complexity of the purchase flow. The amount of information we were displaying at each step had grown dramatically. Moving into a modal design in 2018 gave us space to improve the information density and hierarchy, but had limited impact on our metrics. In 2021 I wanted to make more substantial improvements.

As the Commerce Design Manager I worked with Amanda from my team (Design Lead for Subscriptions) to to evaluate and rework the subscriptions experience from the ground up. The objectives were to simplify our flow, to present viewers with only the decisions that were relevant to them, and to help them understand the value subscribing would have for themselves and the creators they watched on Twitch.

Why This Project?

This was the first truly design initiated and led project for Twitch Commerce. As the Design Manager for Commerce I wrote an initial brief for the project to articulate the customer opportunities, why I believed we should invest resources into doing this work, and the value it would have for our customers and the business.  I worked with Amanda to carve out time in her schedule for this project, and asked her to write up an initial 1-Page spec and design plan. Design would not just initiate this project, but also lead on research and early product ideation.

Customer Opportunities

As our subscription and gifting products had grown in variety and complexity the modal design was reaching its limits of usability. The modal was designed for a smaller feature set, and with different goals than we had now. For new users the volume and presentation of information in the sub modal was leading to them missing details of the benefits they receive for subscribing, or that they could subscribe at higher tiers. The current unsubscribed design also assumed that all non-subscribers were entirely new to the concept of channel subscriptions, which was not the case.

Our hypothesis was that a clearer, simplified presentment of subscription benefits would increase the number of subscribers to a creator’s channel. An experience that reflects user behaviour and needs based on their usage of Twitch, such that they can fully understand all their relevant options and make an informed decision to support the streamer in the way that makes the most sense to them.

Previous Designs

When I joined Twitch in 2016 Subscriptions was a very simple product offering. A single $4.99 monthly subscription, which gave subscribers an ad-free viewing experience on that channel and custom emotes and badges from the creator. The first update I made to the UI was for the launch of Twitch Prime (now Prime Gaming), which gave Prime users one free subscription a month. The initial overlay was basic with no presentation of benefits or articulation of the value of subscribing.

In 2018 I launched a refresh to the subscriptions experience. The move into a modal gave far more space for presenting all the available options, allowing for a design that was far more visually compelling and really spotlighted the benefits you got for subscribing. However the conversion increase from the refresh was minimal, and opening the modal over the video player ultimately felt too disconnecting from the stream - the primary reason you’re on the channel page.

Both these designs also prioritized gifting subs for existing subscribers as the next best way for them to support the streamer. However there are other product offerings, such as higher tier subs, that subscribers might not know about because higher tiers are deprioritized. It takes subscribers with high intent to learn about additional benefits that come with higher tiers.

Baseline Study

Amanda’s first step, with the support of Twitch’s UXR team, was conducting a remote interview study with 10 Twitch viewers. We asked them about their general experiences with Twitch, how they found their favourite streamers, and then more directly about their experiences with Subscriptions and Sub Gifting.

The goals of the study were to:

• Develop a deeper understanding of viewers’ motivations for subscribing to creators.
• Understand what viewers value from their Subscriptions and keep them subscribing.
• Learn what causes a viewer to end a subscription.
  
• Their interest in increasing their support to creators through gifting, or higher tier subs.

These sessions were insightful, and we came out with a number of learnings. The one that resonated the most for myself and Amanda was that while benefits like emotes were loved by subscribers, they were rarely the key reason for subscribing. For the majority of participants it was far more about supporting the streamer, and being a part of a community.

Design Sprint & Early Ideation

Following this research Amanda ran a Design Sprint with Design, Product and Engineering stakeholders. This was the first time we ran one of these sprints within Commerce, so it was a big opportunity to demonstrate the value it could bring to our product development process. The team came together to brainstorm how we could help viewers with developing bonds to a new channel, and understand the ‘language’ of a creator and their community to get them in the door.

Of the many ideas that were generated during the sprint we decided to prototype and test two. The first was called Memories, a timeline of previous key moments on the channel from the creator and yourself. This was a way to remind and reinforce the connections a viewer had built with that channel. This was well received by our team, and we ultimately decided to split this off into its own standalone project, called Recaps. That became a great example of how quick design concepting could impact the direction of our future product roadmap.

The second idea was an update to our modal that focused on the level of support given to the creator. It used a draggable bar to bring a more tactile experience to selecting a support level. We also tried to make each level feel more meaningful with unique titles and descriptions. The highlight of the prototype was an animated disco ball and colourful gradient that appeared when you selected the highest support amount. This was a first attempt at bringing some fun into a traditionally dry experience. We knew subscribing should be an exciting moment for a viewer and we wanted to bring some of that energy into our designs.

The three modals below are some of the earliest designs Amanda worked on after the sprint. These were to give us an idea of how much of our text we could remove from the layout without losing understanding. Also to help decide if we should lean into our Subscription tiers, or focus on our core Tier 1 ‘$4.99’ subscription.

Below the Channel name is a new support callout, highlighting the value your subscription has for the creator. The benefits are contextualized with a ‘thank you’ message. Both of these are designed to reinforce the value your subscription will have in financially supporting the creator, so they can keep streaming for you.

Because the overlay’s space was much smaller than a modal we had to be strict with the information that went above the fold. We reduced the copy as much as possible, and pulled in design elements from our mobile app, such as icons for the ‘even more benefits…’ section. For the custom emotes two lines are shown by default, with an option to expand and see them all.

Subscription Tiers

In our effort to simplify the subscription decision we decided to move the more expensive Tier 2 and 3 subscriptions into an expandable accordion. The rationale here was we saw very small usage of the higher tier subscriptions by new subscribers, and we knew from research the three tiers lead to cognitive load and some confusion. By hiding these options by default the choice became subscribe at $4.99, or subscribe with Prime.

Gifting

Gifting needed to go through a redesign of its own to accommodate the change in size. The previous image blocks put too much of the content below the fold, so Amanda reworked it into a list. While not quite as exciting as the large imagery of the prior modal it still conveyed the increasing size of the gift bundles well and did a better job of surfacing the higher bundles than before.

An even larger change to the gifting experience came in the second stage of our experiments - splitting gifting out into its own button on the Channel page. This gave Gifting and Subscription Management there own spaces, so each could be optimized and built upon in the future without having to worry about the impact a change for one might have for the other. It also removed the incongruity of having ‘Gift a Sub’ be the descriptor for a space that included information about your subscription. Which was nice.

Results & Learnings

We launched this redesign initially as a 2 week experiment to 25% of all viewers not subscribed to a channel. Our primary success metric, Sub Modal to Checkout Conversion, increased +644bps. Day-over-day breakouts showed a sustained lift in the conversion rate. The follow up variant that split out the Gifting and Subscription buttons also had positive results. Increase in Multi-Month transactions increased by +110bps, and ASPU (Average Spend Per User) by +10bps, without having any negative impact to gifting ASPU or Subscription retention.

The biggest issue we saw in the results was the number of people entering the flow then leaving had dramatically increased, but without impacting our ARPU. We surmised this was due to the reduction in prominence of the Prime callout. We made an update to the design that moved the Price into the button, making it clearer you were about to enter a transaction flow. This update brought us back to normal conversion levels.

The results overall had been positive, but not have been quite to the level we had initially hoped. However they still showed we were on the right path, and the new design gave us a much better foundation for future work. We launched the redesign fully in the second half of 2021 to all users.

The other impact the project had was on our work process as a design team. I learnt a lot of things from this project that I took forward into how I approached future design-lead projects as a manager:

• As we went through the redesign it became clear we needed more structure on how Commerce teams approached design changes and product updates within the subscriptions flow. I asked Amanda to put together a project tracker for any project that touched the subscriptions overlay, and and schedule a bi-weekly sync with product and design stakeholders to keep everyone aligned.
• The baseline study and design sprint lead to insights and discussions that would benefit all future subscriptions projects. ‘Support’ became the primary we talked about the value of subscriptions and benefit to viewers and streamers within the Commerce team.
• The reduction in space pushed us to start making choices on which features we wanted to prioritize, and how to simplify the experience for new users. Amanda and I had to get better at leveraging data to try and maintain a high bar for simplicity in the product, pushing back on some product decisions when we believed it would be detrimental to the core customer journeys.