Chen Zhang Design Portfolio

Twitch Subscription

Design the Twitch subscription iOS experience

Problem Definition & Assumptions 

I assume the core users for this feature are the Twitch viewers using iOS devices. Here are some characteristics for typical Twitch users: 

  • Primarily game players and e-sports lovers
  • Mostly young males
  • I assume mostly users are from US, but possibly from all over the world (need to verify the real data)  

Target Users


User Needs / Product Values

For Viewers

This subscription feature is already existing in Android and Web, so viewers need a similar experience for feature parity cross multiple platforms. 

Based on online data, almost 35% of the Twitch content is viewed by a mobile device, which means mobile subscription feature is quite important for the overall company strategy. 

Viewer use cases 

  • Why do I need to subscribe to a channel? What kinds of benefits will I get? (for newcomers to Twitch platform)
  • A workflow to subscribe to a channel (+Add subscription)
  • Manage my existing subscriptions 
    • Upgrade/Downgrade subscription tier to another tier
    • Edit auto-payment settings
    • Edit payment options 
    • Cancel existing channel subscription

For Streamers

  • Get financial support and rewards, Generate revenue with converting free viewers to paid viewers 

For Twitch Itself as a Platform

  • One monetization strategy besides advertisements
  • Build stronger engagement for viewers and streamers as the foundation of the community

Subscription Types

  • If the user already has Twitch Prime membership/Amazon Prime membership, the user gets a free channel subscription every 30 days;
  • Without prime membership, here're multiple subscription options: 
    • $4.99/month
    • $9.99/month
    • $24.99/month

When we have disagreements between PM, UX, Engineering and other stakeholders, it would be great to step back to bring the whole team back to the success metrics we defined previously to compare and prioritize different directions. 

Quantitive feedback from product usage tracking

User Acquisition

Button clicks for Subscription button on iOS 
Click-through-rate for the subscription wizards workflow along different funnels (from channel page or subscription page)
Subscribers counts by sub options, iOS device, region, channel etc

Qualitative feedback from user testing

SUCCESS METRICs


Walk Through Android Workflow and Ideate iOS UX

 

Walk-through Existing Android UX Workflow and Identity iOS Design Opportunity

Existing Android Subscription Workflow and iOS UX Ideation

Refine & Design Detailed Wireframes

 

Overall Subscription WOrkflow Diagram

Workflow: From Channel Detail to Channel Livestream Video and Sub Option Benefits 

 

Workflow: Apple Native Payment and Success Confirmation 


With the assumption of the only entry point for the workflow, I came up with two options to show the multiple sub options: 

Option 1: Move the Subscribe CTA button outside the video control UI, and show the value proposition of subscription to viewers. The second page is a Sub Benefit Detail page to list out the three different sub tiers. If $4.99 is selected, then show the checkbox to use Twitch Prime to cover that. 

Option 2: With creating a separate prominent space for subscription, we can directly show different sub options in that section. 

After comparing pros and cons, I chose option 1 because:

a) This design is easier to scale for adding more options in the future;

b) It's more clear to demonstrate the motivation and difference between different sub options for first-time Twitch viewers. 

 

 


Once a sub option is selected, we can follow the iOS native payment methods to finish the subscription. 

After subscribing to this channel, we can show two different content in that subscription section depending the viewers' current sub option. If the viewer is on $4.99 or $9.99, show the value prop again and upgrade button. 


Visual Design


Summary

 

When we have refined enough details before launching the iOS experience, I would return to the assumptions mentioned in the initial section to verify and figure out some open questions in my design solution: 

  • The current focus is to only design one entry point for the subscription workflow. Phase 2 can have more new entry points, such as "Search and Discover New Channel" in sub list page, Sub button in the channel detail info page and emotes selection UI. 
  • Does it make sense to change the sub option name from price to another gamer-friendly term? Such as All-time Fan, Super Fan, Ultimate Fan etc. In my opinion, streamers are viewers' idol and they may not care too much about the price tag if they want to support and subscribe.
  • Currently the difference between multiple sub options is very subtle, and I see they can be exactly the same for a few channels. I suggest we introduce some new ways to differentiate and show the benefits of higher tier sub options for viewers in the future. 
  • Design consistency between iOS, Android, Web and console UI.  

Since we already had an Android subscription experience, we can rely on real quantitive Android usage data and qualitative user testing feedback data to inform our design iteration, and also consider business strategy and technology feasibility at the same time to refine our design solution for iOS.