Creator Profiles
Overview
Creator profiles were designed to enhance the offline experience. This design showcased a channel's content, highlights, and personality, leading to a 50% decrease in offline channel bounce rates.
As the lead designer for Twitch's 2020 channel page overhaul, I introduced customizable color schemes for streamers, enhancing their ability to personalize channel aesthetics. My design streamlined navigation, making it easier for viewers to access schedules and past broadcasts. In this role, I collaborated closely with 2 other designers, 2 product managers, 2 engineering teams, and one excellent technical program manager.
blog - a new look for channel pages
the verge - twitch’s channel pages get a new look
Client
Twitch
Role
Lead Sr. Product Designer
Year
2019
✦ iOS and Android application ✦ Web Application ✦ Discovery ✦ Visual Design
Previous to this redesign, customers often landed on offline channels.
The Problem
While Twitch discovery surfaces prioritize live channels, for many viewers, the front door of Twitch is a channel page. The majority of Twitch viewers discover channels through other services, such as Twitter, Google, etc., and navigate directly to a channel page.
The most prolific creators can stream for 8 hours daily, meaning most channels are offline for 1/3 of each day. Offline channels were essentially blank TV screens—many customers who are new to Twitch struggle to understand what they are seeing. Customers who are new-to-channel have disadvantages too, not knowing the schedule, and not knowing what kind of content to expect. Yet many new and existing viewers often want to discover new channels to watch.
In the previous design, creators could add banner images to showcase their content and personality (see before image). This method was confusing to viewers, inconsistent, and left the burden of offline discovery to creators
The Solution
Creator profiles for all channels on the platform to reduce bounce rates from offline channels. This change introduced the concept of a channel state. Viewers who joined live channels would be directly to the live stream. Channels that were offline would be directed to a profile that highlighted key info - the channel schedule (when to return) and previous content (why to return).
The introduction of channel profiles included an about, schedule, and past broadcasts pages. The channels states: offline and live - became the most important information and determined the user experience.
New-to-channel viewers would see channel trailers in the hero section of the offline channel, to serve as an introduction to the channel.
Returning viewers would see previous broadcasts in the hero section since they aim to catch up with their favorite creators.
Wireframes of the overall structure of the pages without content were key for presentation meetings with executives since the content was determined by a viewer's relationship to the channel and assets of the channel. Hi-Fi mockups can distract from the overall page structure choices.
Lo-Fi mockups exploring content shelves with variations on ranking, scan lines, episodic content, and no-video info.
The live watch view remained consistent during this redesign with a few tweaks on channel metadata.
The hero section channel states - offline, new to the channel, following a channel, and hosting another channel’s content.
Channels without a profile banner received a generated background image.
Along with profiles, “creator color” was introduced. The creator color would be used in the generated profile banner and experimented with for primary buttons and accents on the page. The goal is to highlight a creator brand.
A challenge of the project was to utilize creator assets in new ways. We didn’t want to roll out this change and the creators felt that they needed to update all their assets. Yet we wanted to use existing assets to showcase personality. With millions of channels on the platform, it is impossible to see every variation prior to launch.
Empty states for channels with little content.
Final Designs
The Live channel view prioritizes the “Live Now” indicator and channel category.
The offline profile view showcases past broadcasts in the hero section and displays previous streams on the first shelf. This view also displays the following and subscriber status.
When customers land on an offline channel want to know when they should come back to catch the live broadcast. The channel schedule solves this. Since many streamers play a variety of games, the game category and channel title are displayed prominently here. Reminders would be added in subsequent releases. The addition of schedules created new paths of discovery for creators. See the TV Guide concept.
The About page includes a bio and first-party social links.
All of the changes that were implemented on the web were also designed for mobile. iOS, Android, and mobile web, including tablet sizes.
Results
Offline channel bounce rates fell by 50%. Schedule segments were adopted by 40% of creators. Channel profiles highlighted the creator's personality and brand, making the front door of Twitch feel more lively, vibrant, and exciting.