Twitch

Project

❸ – ⑤

° Info

I worked as a Product Designer at Twitch, a platform for live video streaming with over 30 million daily active users watching creative content they love and connecting with their favorite communities.

On the Community team I worked on tools for game developers and streamers to bring content closer to their audience, identity, and expression features to encourage viewers’ urges to participate, customize, and express themselves in chat.

Timeframe

2019 - 2021

Responsibilities

UI/UX, Strategy

Platforms

Web, Mobile

Drop it like it’s hot

✺

Twitch Drops enables game publishers to grant in-game rewards to Twitch viewers when streamers play their game or when they complete in-game missions. Our team was challenged with creating an end-to-end solution that would allow game publishers to launch Drop campaigns on Twitch with minimal setup through Twitch’s Developer Console.

° Team

Tarun Gangwani, Adam Butterfoss, Maninder Malhi, Chris Adoretti, Shiming Ren, Florian Helff, Tiffany Wang, Yaw Asabere, Mario Izquierdo, Lucas Leadbetter, Thomas Hawco

Streamlined management

As game publishers are creating the campaign, they will have a preview of how their campaign information and rewards will be presented to creators and viewers.

❶

The Drops Rules Engine tracks viewer watch activity, only distributing rewards based on the timeline publishers specify. Using the Enhanced Experiences API, publishers can set up missions for streamers to complete in-game to trigger a Drop to viewers watching the event live.

❷

Game publishers can create and manage which rewards were given to Viewers on a drop-by-drop basis.

❸

Game publishers visually specify the conditional pattern Drops will follow during the campaign using a Drop Dependency Tool. In the interface that pops up, they can click and drag Drops, or use the arrow icons, to create a dependency pattern.

❹

Before a Drop Campaign goes live on Twitch, Game Publishers get a ‘receipt’ of their campaign to ensure that everything is properly set up so that they have the utmost confidence that their campaign is successful.

Proven results

Twitch Drops brings the Twitch community closer to the game, ultimately helping game publishers acquire new players and re-engage their existing player base. Over 20 game publishers including Riot Games, Valve Corporation, and Electronic Arts have integrated with Twitch Drops.

Drops Analytics provides reporting on Drops Campaign performance, including full details on individual Drop reach and the top streamers engaging with campaigns.

Making moments count

✺

Twitch Moments is an experience that allows streamers to reward viewers for being part of meaningful moments on their channel. Our team built a product feature that would allow streamers to create a moment while live streaming and give their viewers a reward—attached to the reward is a short video clip associated with the moment.

° Team

Christopher Miles, Cristy Gonzalez, Maninder Malhi, Danny Chi, Brent Thompson, Joel Mizzoni, Justin Ma, Scott Porcaro, Fabien Brooke, Tristan Wiley, Michael Somoza, Marie Paoli, Kyle Crumrine, Spandana Pothuri, Carson Forter

A story driven approach

Every moment has a story behind it and so was our design process. Early on, we outlined the vision of the core experience for the feature through a low-fidelity storyboard—this brought design, product management, and engineers aligned on the same vision for the experience.

❶

A high-engagement moment just happened on stream. The creator can celebrate the moment through a quick action in the Stream Manager.


The moment will capture a period amount of time prior to when the moment was triggered and after the moment.

❷

At the end of the moment, Viewers who were there at the time the moment was triggered will receive a non-monetary reward to recognize their participation and viewership.

This is through the form of a Moments badge that will collect the moments a Viewer accumulates over time within a community.

❸

Viewers can interact with Moment thumbnails within the Viewer Profile Card Badge Carousel to learn more about past moments that viewers were a part of. 


Selecting an older moment will replay the moment clip without leaving the stream.

❹

After the moment has ended, it will be stored within the Creator Dashboard for the Creator to manage at a later time. 


Creators can refine and edit their moments by updating various parameters such as the title, description, and length.

Moments on command

Streamers can trigger Moments via Quick Action within the Stream Manager. When doing so, they will be provided with a preview of the moment they are capturing. 



Most streamers always have their chat open as a means to interact with their community. Therefore, to make triggering a Moment easy for streamers, we added a chat command functionality as well.

Streamer

Streamers can trigger a moment at anytime using a quick action. The moment captured is distributed to the viewers watching it live.

Viewer

Viewers that are part of a moment receive a callout that allows them to claim. Upon claiming, the moment is attached to the Viewer’s profile.

Loyalty that grows overtime

We built a badge progression system that was a symbol of growth over time because being a part of non-monetary moments matter.

We constructed a badge progression system to scale overtime. This allows for new viewers to progress quicker at the beginning, but also gave hardcore viewers the opportunity show their commitment for the community by dedicating more time on their favorite streamers’ channel.

An act of expression

✺

More than 1,000 messages are sent on Twitch every second. One of every five of these messages sent on Twitch uses an emote. One of every ten users have a badge attached to their username in chat.

With chat being the core of the Twitch experience, our team worked on bringing expressive tools like emotes and badges to the forefront—establishing a better baseline for viewers to participate, earn, and customize their expression.

° Team

Christopher Miles, Maninder Malhi, Danny Chi, Joel Mizzoni, Justin Ma, Markus Geyer, 
Michael Somoza, Spandana Pothuri, Carson Forter

Learn what you earn and modify it too

Badges are the only earned identity item readily available to Twitch viewers today. We worked on a pattern to aid viewers in understanding badges and dialed up a new feature that highlights the ability for viewers to see and edit their badges directly from the chat input.

As a result we saw an increase in badge earnings which improved revenue metrics. This was driven by users reviewing a badge earned by another user and then seeking that badge themselves.

Emote à la mode

20% of viewers who chat rely on the emote picker as a means of expression.
Through an audit of the current state of the emote picker which examined usage data, user feedback, and stakeholder interviews; our team identified the current structure of the navigation to be inefficient for viewers.

We worked on designing a series of quality-of-life improvements focused on making navigation of the emote picker easier, assessible, and scalable.

← After • Before →

Granular categories via a scalable vertical tab.

Accessibility on key and in hand

We included accessibility improvements for keyboard users that would allow them to access the navigation quicker by placing the navigation vertically so they could first jump to the category and then tab through the emotes within that respective category.

In addition, we added parity to the experience on web to our Twitch mobile app. This includes having a more granular navigation that falls with the general behaviour of how mobile users use emote picker—horizontally swiping instead of vertically scrolling like on web.

Keyboard accessibility

Optimized for mobile

✺ Cody Cai © 2024

Dribbble

Instagram

Twitter

Linkedin