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.
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.
User Experience Design Interaction Design Product Management
Before and After
These are some of the improvements that we made to our old design:
- Density: Better use of space and surface relevant streamer data.
- Readability: Optimized for the most common numbers of subs per user.
- Consistency: Componentized to scale across Twitch.
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:
- Qualitative Data: What do users understand about this page?
- Quantitative Data: How do people actually use this page?
- Vision: What user actions do we want to encourage?
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.
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).
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.).
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.
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.