Channel Switcher

A new design for surfing Twitch’s catalog
Introduction

The number of live creators streaming to Twitch has grown exponentially over the last few years. Matching viewers with them has been my team’s core challenge.

We aimed to improve discoverability and stream sampling by allowing Twitch’s millions of viewers to more quickly explore its thousands of creators through more fluid, video-forward browsing.

MY ROLE

As Principal UX Designer at Twitch, I spearheaded a cross-functional effort to overhaul a fragmented process. Through strategic prototyping and user research, we designed Channel Switcher - an innovation enabling seamless discovery through video previews.

OUTCOMES
  1. Built and delivered Channel Switcher, increasing browsing conversion metrics. Viewers explored % more creators. New users used the most, retaining % more often.
  2. Ushered first redesign of browsing in years by synthesizing user needs, technical constraints, and business goals.
  3. Improved our prototyping process. As a core contributor to our React prototype ecosystem, I coordinated hosting builds on S3—resolving requests from our AppSec team—to be used in external research.
WHEN

Late 2021 – Present

TEAM SCOPE

Collaborators include a UX Designer, 3 UX Researchers, 2 Data Analysts, a Product Manager, and a team of software engineers.

TOOLS

Figma, React, Typescript, GraphQL, RITE studies, multivariate testing, mixed methods.

PROCESS SUMMARY

Discovery

Studied research about subject matter published by UXR; reviewed past experiments.

Analysis & Ideation

Made sense of our ongoing situation; came up with solutions based on reality; socialized ideas.

Wireframes

Roughed out wireframes, including a page-level carousel, a modal preview, and the persistent left nav.

Mock-ups

Designed 3 broad directions with support from teammate Ed Scherf

Concept study

Conducted a concept study of the core ideas to validate and boil down the best direction.

Static Live Prototyping

Started with Figma, then built in with live data in React, Typescript, and our Core UI library with support of engineering team.

Rapid iteration study

Rapidly Iterated Testing & Evaluation (RITE) study with over 10 participants; refined the design as opportunities arose.

Live experiment

Directly supported engineering, shipped 2 multivariate tests, and contributed to data analyses.

1.0Starting with our customers

Our user feedback service overflowed with nearly 1,200 suggestions to improve discovery. Internal research also indicated gaps in our existing features. As the team’s viewer domain expert, I knew we had a massive chasm between what our viewers were looking for and what our discovery features offered.

I had spent the previous couple of years focused on several improvements of the watching experience; it was my turn to help viewers in getting there.

When I
I want to
so I can

This structure of user stories was liberally borrowed from this Jobs-to-Be-Done (JTBD) method.

Analyzing results from past experiments and research revealed insights that informed our direction. I synthesized the research into key insights:

A UX-driven hypothesis emerged. It needed to be clear, concise, and repeatable. At its core, it needed to communicate what we were hoping for and how we believed we would get there.

THE HYPOTHESISFor viewers to find live creators they’ll watch and enjoy over time, they need to be able to seamlessly preview and switch between streams.

But everyone can read and ideate quietly on their own. I needed to socialize what I was thinking and get feedback from my peers and stakeholders. I wanted to get them excited about the idea and leadership interested in funding it further.

2.0Getting buy-in

I visualized flows and screens to share concepts with stakeholders. Seeing the core problem mapped out brought clarity. Why were we making exploration so difficult?

I analyzed our organizational structure and recognized it mirrored the fragmented user journey – siloed teams were producing disconnected experiences. My proposed holistic solution aimed to address these root internal causes. This strengthened stakeholder confidence.

Perhaps, it was a bit self-deprecating. And maybe Conway knew best all along.

(PS we’ve since re-orged!)

3.0Pushing pixels

Divergence is my favorite part of the design process. It’s rare you’ll work things out on your first paddle out. 🏄🏽‍♂️

Working closely with UX Designer Ed Scherf, Watch experience co-lead, we went wide in exploration across dozens of variations, then landed on three broad strategies that we tested with participants in a concept study.

3.1Capture Modal

This additional click after selecting a stream never quite landed. Participants found it disruptive and unnecessary.

  • PROS Layered on contextual complexity on interaction.
  • CONS Participants shared that additional clicks got in their way of joining.

3.2Left Nav

The gift of the “Left Nav” is that it’s accessible across most surfaces. It’s a familiar pattern to most users, especially on the web. It’s also a great way to keep the video player in view, which is a core part of the Twitch experience.

  • PROS Leveraged familiar patterns and simplified engineering needs.
  • CONS Lacked discoverability, especially for new users.

3.3Channel Page

This placement conflicted with the Channel Page architecture. Prepending atop video and chat introduced overloaded information density. Disrupting mature interfaces adds risk of coordination bottlenecks.

  • PROS Maintained familiar, existing patterns.
  • CONS Added to crowded Channel Page space. Does not scale well.

3.4Browse Page

Let’s do it

Testing revealed this reimagined Browse page best resolved discovery pain points. Participants cited reduced friction sampling streams and greater control while exploring.

  • PROS Lessened pogo-sticking and afforded design flexibility. Less coordination required.
  • CONS Necessitated changes to information architecture.

This bolder direction caught users before channel commitment, enabling easy previewing. However, overhauling the existing architecture posed tradeoffs. Still, the ability to smoothly trial channels led this to emerge as the winning concept.

The power of design is we can get folks’ big ideas, out of their heads, before their eyes. Showing my Product Manager SteveMz these designs got him singing this poetry:

my chaos muppet brain is thinking that this would be the default and the list would be an opt in
Product Manager

With leadership urging boldness, we pursued the most ambitious direction. We wanted to explore wholesale-replacing the existing Browsing experience.

4.0Design, Build, Test, Repeat

A series of rapid prototypes, interviews, and experiments both changed and validated our thinking and helped us move forward.

  1. Why not [signal] on a card?

    Progressive disclosure focuses browsing.

    Limiting cards to key attributes helped with comparison between streams. Saving additional details for post-selection manages cognitive load.
  2. Is this good for everyone?

    New users especially engaged with this browsing mechanic.

    This discovery mode drove improvements in their adoption and retention.
  3. Does autoplay impact discovery?

    Autoplay works great – except when it’s unexpected.

    An easy play/pause toggle maintains agency while allowing for the benefits of autoplayed content.
  4. Do we allow controlling audio?

    Audio controls doesn’t have to mean “volume slider”.

    Users just wanted to quickly mute unexpected, loud streams – we built a click-based 0% 50% 100% system.
  5. Do we keep the grid view?

    More streams can be compared in the grid.

    We eventually prioritized it as the default view, after exploring different approaches to adopt it.
  6. Does Chat help discovery?

    Chat speed, variety, and subject matter communicate vibes.

    Chat previews concisely showcase engagement quality – how the community engages each other and discusses diverse subjects.
  7. Should we punt users after awhile?

    Shorter previews may maintain momentum.

    60-second previews appeared to outperform 150-seconds in separate tests. A causal link isn’t certain without isolating preview length as a variable.
  8. Where do we stop on responsive?

    Optimize for common viewport sizes.

    Supporting heights below 720px aligned with data showing prevalence of smaller screens.
  9. So, what happens when we do this?

    Exposure alone may not solve discovery.

    Static recommendations degrade with browsing depth. Responsive models may better match emerging content.

This is what lended us to our current design. It’s a combination of the best parts of the three directions, with a healthy dose of new thinking informed by both qualitative and quantitative customer feedback.

A new layout with a stream preview

Simplifying the process of evaluating preferred dimensions while exploring new content.

Category information popover

Diving into the category's current status, including descriptions from IGDB and real-time stats on viewers actively engaged within streams.

Hiding the preview

Preferences around concealing previews directly from the interface.

Alternate carousel layout

The original layout that started it all. However, we deprioritized it due to expected behavior around vertical scroll.

Onboarding

Providing context (and an introduction to settings soon™) around the divergent, new experience, and how to use it.

Clips playback

Using the traversal-forward interface for quickly getting through popular Clips in a category.

Stream collections (non-category)

Applying the same interface to collections of streams, like those created for homepage discovery.

Previous design ~2019

Fun fact: I actually designed this layout when we added new sorting features—where my PM graced me with the opportunity to redesign it at-large—in 2019. 😅 Teaching me that if you stick around long enough, you’ll inevitably have to contend with your past decisions.

5.0Closing

How lucky I am to say that my work is in continously connecting viewers with creators and their communities. They’re why I do it. For the memelords, the gamers, the lurkers, the moderators, the musicians—everyone who’s found a home on Twitch. As memes and technologies evolve, it’s important that our service does, too.

The experience did exactly what it was intended to – getting viewers to more creators. Some cohorts faired better than others. Perhaps, it’s intended to be that the work never stops.

More experienced viewers may evaluate differently when they’re sampling new creators. It could be that these sorts of decisions are influenced by realtime factors. When you don’t know who’s on the other side, you might care more about what’s going on.

With a big year of investing in more responsive recommendations models in mobile, we’re well positioned to adapt learnings into this experience. We have a lot of work ahead of us. Seeing it all come together is exciting.