Status

Tech

Team

Ramón Andrío · Head of Product
Fede Maches · Product Manager
Jose Alvarez · Frontend developer
David Marín · Backend developer

What did I do?

My role

As a Senior Product Designer I was part of 2 members design team, first team was in charge of iterating current features and my team was in charge of exploring, testing new ideas and also focused on acquisition.

My role was designing end-to-end process of the whole experience and the final outcome:

Research: surveys/quantitative and user interviews/qualitative
Ideation and conceptualization.
Workshop alongside with Head of Product and a Product Manager to ideate set the MVP
Product Design, all the flows and updates to the Design System with new components
Marketing Design: designed and some coding for the landing website

Context

Streamers cut is decreasing in Twitch

Twitch is modifying the price on twitch subscriptions, and there is an ongoing conversation on social media around subs, streamers are tired of only making 50% revenue in Twitch subscriptions. Twitch cut is high, and it will be increased again eventually, right now is 50% affiliates and 40% for partners and also is pushing streamers to stream more hours per month to monetize.

A culture has been created where the streamer treats subscribed people differently, especially the longer you've been a subscriber. If you buy 10 chests from him every month, you are part of the community that comes and supports the streamer, but if you are subscribed you become part of the family.

Complaints about Twitch and old survey streamers income

The Goal

New Subs

I was given a goal, build a subscription system to allow content creator/streamers monetize their content on a monthly basis. Technically speaking: we needed to bring New Sellers, 20 per month, and have a Renewal Rate > 70%, keeping in mind the viewers users, which are the ones that will spend money. Viewer spend money > Streamer get that money > Streamloots get revenue.

Having that goal in mind I needed to translate that:

Constraints

Focus only on Twitch Streamers, 90% of our users.
Do not add extra work for Streamers, they spend so much time streaming 40h.
Focus on Desktop device.
Most streamers are very bad salespeople.
Country: US.
Launch an MVP.

Kickoff

Competitor Analysis

We were in a rush, fast paced environments are what it is, there were no projects that last more than 1-2 weeks in Streamloots, and this was intented for 2 weeks.

Competitor analysis: strengths, weaknesses, oppoortunities and threats

Twitch, Youtube, Patreon, Facebook, Memberful, Ko-Fi and buy me a coffee.
Twitch has 3 subs tiers, 95% of subscribers belongs to the tier 1.
Ko-fi is becoming an all 1 one platform (merch, donations, crowdfunding).
Facebook and Youtube are not real competitors of Twitch (low discoverability, complex flow to subscribe).
Perks to subscribers: Access to premium content, Chat, Merch, Download digital content, Promos and disccounts.

Patreon and Ko-fi analysis

Users

Empathise

In this phase, which was the most important, I gathered information and insights from user interviews, online surveys, Customer Support team and round tables.

First of all, I prepared the online surveys with Typeform, which could take more time to be filled out by our streamers and viewers.

Online surveys

Insights and data from online surveys

60% of our streamers think Twitch is offering enough to keep viewers susbscribed.
Viewers and streamers love emotes and chat perks.
The hay creator cuts
3.5 stars Twtich subs rating.
80% want us to launch reactions and emotes.
They are open to new features like Discord channels, private videos, etc as perks for a Streamloots Sub
64,7% of the viewers are willing to pay extra money for filters and reactions.

While I was waiting for responses I managed to schedule 5 user interviews. The main goal here was to find out what are the feelings and motivations about Twtich Subs. My main target was streamers who have never used Streamloots before with and average of viewers 100-500.

I was able to build mapping insights and findings from user interviews:

Mapping insights and findings

Ideation

Setting the MVP

This phase was intented to diverge with the team, cluster ideas, evaluate impact vs cost and finally set the MVP.

Ideation Workshop · MVP

We agreed on a new module/product: Subscriptions, with the main perks were reactions and emotes. In the end we needed to build a system to allow streamers monetize their streams by allowing the viewers interact in real time with reactions and emotes.

Those meant to have a new section in our current crowed Streamer Dashboard to allow them to upload custom and predefined reactions and emotes, and at the same time show that reactions in the Streamer public page.

Let's get started

Flows, Wireframes and user testing

I designed every single detail and implemented it in the WordPress site. Sometimes I needed to customize some CSS rules, but I could manage that, I designed some basic UI Kit, not a design system, which allowed me to design faster and smarter.

Setting up Subscriptions · Streamer user

Wireframes

Usability test · Maze

Findings

New Sellers: they don’t know where to set up the widget and Subs.
“Save” CTA it’s a problem, they don’t see it, scrolling in Reactions tab.
Uploading content: We will follow the approach of cards.
Warning: Information architecture is messy, overwhelming, no clear paths.
Warning: “Go to Subs” task: Misclick Rate 20%, 3.5 stars Twtich subs rating.
Warning: Where will they test reactions?

Actions

Information architecture redesign (feature oriented) and new menu styles.
Automatic saving settings, remove “Save” CTA, and we display a toast on every change.
Uploading content: We will follow the approach of cards
Subs settings will include a test environment.

Old menu and the new one

Updating the design system

New components

Building a new feature not always means to create new components, but in this case we needed to create, three main ones: Cards (Public Reactions, Powers and Collections), Medals and Selectors (Reactions and emotes)

Card component for Reactions, Powers and Collections

Achievements, Selector and Awards

Dashboards

Streamer

We allowed streamers to set Reactions and Emotes, setting even custom ones. There was an important thing that they wanted to be able to track their subscribers, so we created another tab with some filters.

Reactions

Customizing Reaction

I would like to mention, specifically, the emotes. At first emotes were going to be launched only as "rain" mode, from top to bottom, but we found the chance to change that and we allowed them to have 4 different types of launchers: Astronaut (bottom to top curve), Ballons (bottom to top), Rain (top to bottom) and Unikorn farts (bottom to top).

There was a problem, we haven't enough frontend people to build those animations, so I took care about the Astronaut and the Unikorn. You can check the final animations in CodePen: Astronaut and the Unikorn

Emotes

Subscribers

Settings

Public side

Viewers

Marketing Team didn't have enough time to deal with the Subs, so I needed to build a promotional landing in 1 day. Obviously I chose WordPress because I were in a rush. The landing was intented as a main entry point for promotional Subs Ads in social media. You can still check the Landing

Reactions

We also created new categories in our public Streamer lists and by the way we tweak a bit the visuals including backgrounds and allowing the viewers to browse faster and easier.

Browsing Streamers

Streamer public page

After release

Let's track

After releasing the Subs, we started to track down Reactions and Emotes amount among the Streamers.

First surprise was that the most used reaction was the Twerking Hot Dog created by us, the following reaction was the Iceman Twerking reaction.

They key in those results was that Subs were higher in the days that we released a couple of new Reactions so all the viewers wanted to check that out first. So New Reactions means more Subs, which means more revenue for the Streamer.