INTERACTION DESIGN | SYSTEMS THINKING

Overview

Streamers use Twitch's Creator Dashboard to upload and manage custom digital assets that are used in their channel. When I got to Twitch, each feature had a different asset management and upload experience. Streamers had to re-orient themselves to different interaction paradigms and design patterns depending on whether they were uploading emotes, Cheermotes, or Bits Tier Emotes. Not only did the UX differ from feature to feature, most of the interactions were clunky and confusing. While I was originally asked to design an upload experience for Animated Emotes, I quickly identified the larger need to consolidate and standardize Twitch's digital asset management.

Digital Asset Library & Asset Managment

The team and I used this redesign as an opportunity to completely rethink digital asset management on Twitch. In addition to redesigning the emote and digital asset management experience we introduced brand new functionality including a staging/storage library, drag-and-drop slot assignment, and emote approval status indicators.

Managing Digital Assets on Twitch is frustrating and unpredictable

Unintuitive navigation and inconsistent information hierarchy for similar experiences is creating confusion. Related assets (such as emotes versus bits tier emotes) are segmented across multiple pages causing discoverability challenges.

Users want a dedicated space to upload and store all asset types. Improving navigation and consolidating asset pages would remove the dependency on 3P tools, make it easier to locate and manage all custom content, and allow creators to:
• Discover new types of assets as they are launched
• More easily locate and manage custom content

The inability to save historically approved assets makes it challenging for streamers to respond to the needs of their communities quickly, and de-incentivizes the creation of new content. Requiring that users re-submit previously approved emotes when updating live slots contributes to a high-friction experience.

Proposed Solution

🏠

Digital Assets Home

Creation of a page that consolidates Sub Emotes, Bits Tier Emotes, & Cheermotes into a single experience

📁

Digital Asset Library

A library to store, swap, and manage assets independently from slots

📤

Standard Asset Interactions

A consistent upload experience for all asset types, and a reliable noun-verb interaction model for asset selection and assignment

Asset Library

Our usage data revealed that Creators often swapped emotes on-the-fly in order to give their subscribers a constantly refreshing emote offering, often including seasonal or limited-time emotes. Through UXR interviews with Creators it became clear that the our lack of on-platform staging for unused emotes made this behavior needlessly complex. Creators wanted a place to store all their emotes and easily swap them in and out of tiers without having to delete and reupload every time. This was one of the driving insights behind our introduction of a digital asset library within the Creator Dashboard.

Emote Upload w/ Instant Assignment

Library Assignment & Drag-n-Drop Reordering

Delete and Upload

Upload Modal

Twitch's existing upload form was clunky and confusing, and didn't scale to accommodate different asset types like Animated Emotes. I introduced the Upload Modal as a pattern that could scale to accommodate different upload criteria while providing a consistent experience across asset types.

Edge Cases & Error States

As part of our design and developer-handoff processes, we cataloged every interaction including error states and edge cases.

Animated Emotes

In addition to introducing the digital asset library and new management functionality, our team also launched platform-native animated emotes to all Affiliate and Partner Creators.

Animated Emote Upload Criteria

With the introduction of Animated Emotes we knew we'd need to design an upload experiences that extended beyond just Standard Emotes. We designed the Upload Modal to scale with additional asset criteria such as Thumbnails while maintaining a consistent look & feel. We also saw the opportunity to use smart defaults and progressive disclosure to make complicated upload flows feel simple and straightforward.

As part of our developer hand-off we inventoried the various Upload Modal states, including empty and filled states for Standard Emotes, Animated Emotes, and "Easy Animate" Emotes.

Accessibility Considerations

Because we were introducing platform-wide animated content we knew it would be especially important to account for accessibility and inclusivity in our design and feature roll-out. WCAG Guideline 2.3 provides guidance for content that is known to cause seizures or physical reactions, and we designed for AAA compliance by providing a means for users to fully disable all animations.

Viewer Experience

For Twitch Subscribers, Animated Emotes are used just like Standard Emotes. Viewers can preview them from the Subscription Modal and they live alongside existing emotes in the Emotes Picker. For Twitch viewers, Animated Emotes bring an added since of personality and chaos, but largely blend into the existing chat experience.