Twitch Chat

Feature Integration to help users keep up with fast-scrolling chat feeds

Twitch is a leading live-streaming platform where streamers and viewers interact through chat. The chat is an important feature that encourages engagement, increases social connection, and builds communities-- and with increasing viewership and chat participation, the fast-scrolling chat feeds are hard to read.


Feature integration for varying levels of support

To provide an easier reading experience on fast-scrolling Twitch chats we integrated features that support user engagement for contextual speed-control, quicker comprehension and increase legibility.

A video of a redesigned chat menu with a play and pause button

Chat Menu with Speed Control

A menu with frequently used functions in one place. Allows for easier discovery of custom settings, and a more control of chat pace throughout the course of the stream.

A video of a redesigned Twitch Chat Summary feature that rests on the top of the chat feed

Chat Summary

Ability to quickly understand what the crowd is saying.

A video of a redesigned Twitch Chat Summary feature that rests on the top of the chat feed

Customization Settings

Ability to personalize chat view

exploratory Research

Understanding User and Problem Framing

To understand the problem and users involved we conducted 3 explorative research methods:
(View full research report)


Online Research

User Surveys



To validate our hypothesis that fast moving chats are a problem for Twitch users

To better understand what kinds of difficulties exist, platforms, types of Twitch users.

To deeply understand pain points, motivations and goals of Twitch users


Reddit, Twitch Forum, Qualtrics

Reddit, Twitch Forum, Qualtrics

Google Docs, Teams, WebEx


Online research, screengrabs on collaborative document

Surveys distributed to discord servers, 33 respondents

6 users, 1hr interviews
Inclusion criteria: has difficulty reading chat on survey


Coding, word cloud, team discussion

Qualtrics-generated graphs

Affinity Map, Personas, Empathy Map

Research insights

Limited Attention

Skimming vs. Reading

Users generally skim to understand the overall mood.

Unaware of existing functionalities

Users didn’t know there were chat customization settings in Twitch, and 6/6 users reported of not using any other tools to relieve their painpoints.

Unique Social Behaviors

"Trolling", "Chanting" = Good!

Although trolling can get excessive, users generally enjoy watching or partake in chat banter/trolling.

Chat engagement for streamer support

Even if their messages get lost in the chat, users participate to show support for the streamers

"Regulars" look for meaningful interactions

Chat engagers are not all random, often they are "regulars" that are seek other "regulars" for meaningful interactions

How can we reduce cognitive load and increase discoverability of features?

How can we keep "crowdchant" while supporting meaningful interactions?



Using our design goals we researched emerging tech and brainstormed. We arrived at 3 concepts to test with Twitch users

A video of a redesigned chat menu with a play and pause button

Customize View in Onboarding Modal

To increase legibility, users can customize font size, chat line speed - which is discoverable in the onboarding experience each time user subscribes to a channel

A video of a redesigned Twitch Chat Summary feature that rests on the top of the chat feed

Watching TV with Friends in a Breakout Room

A club-house like experience, regulars select other regulars to create a hub and talk while watching the stream

A video of a redesigned Twitch Chat Summary feature that rests on the top of the chat feed

Chat Summary using Crowdspeak AI

Using crowdspeak AI, a chat summary appears at top of chat to support skimming


Concept Testing and Usability Testing

Concept testing with 6 Twitch users showed preference for view customization and chat summary. We moved forward with those ideas and created mid-fidelity prototypes, creating flows for 3 tasks to test: change font size, change chat speed and figure out what the chat has been saying. We measured task to completion and gathered insights from follow-up questions.

A low fidelity wireframe annotated with issues noted by user testing and expert evaluations.
usability test insights

Key Issues

Context of Use

We added the option to change playback speed, but it was hidden under settings. Users expected to be able to change the speed quickly, as the speed of the chat changes throughout the course of the stream.


By the nature of the chat functionality, the prototype needed to be more dynamic. Users wanted to see the affected changes when changing speed of the chat.

Information Hierarchy

Chat setting menu was difficult to navigate; some features such as playback speed, and chat filtering did not fit into the mental models of the users


Wording such as "Crowdspeak" confused users. We also identified opportunities to increase scannability of copy.

refining design

Incorporating Twitch UI and Testing Feedback

Next step was to incorporate fixes to the feedback received from both expert reviews and user testing. This included rewording, reviewing information hierarchy with users and creating a higher fidelity prototype that captures Twitch experience.

I evaluated the existing Twitch design system and patterns to incorporate in the design iteration.

Image of redesigned low fidelity components with  Twitch style guide.

Incorporating Twitch UI

I evaluating Twitch's existing design system and built our features using its visual elements.

User flow of new pause/play button on chat feed

Customize View in Onboarding Modal

We moved the chat speed function to the primary navigation (on the right) where they can change the line per second.

We also incorporated was a “pause/play” functionality, where users can quickly pause and play the chat, like a video, so that they can stop and read exactly what each line was said if needed. 

We added a preview functionality 3/5 users mentioned wanting to see potential changes before applying that change because they’ve already clicked in to settings.

User flow of Onboarding modal when user clicks customize chat view, another modal appears where user can customize text and filter out emotes, bitts, subscribed notices and user ID.

Changing Wording for Quicker Comprehension

We reworded all the functions on the customization view so that it starts everything starts with action words so that it can  be more easily scanned.


Next Steps

Next steps are to test the changes. With more time and iteration, I’d also like to test the frequency of use of the added features when users are actually using Twitch.

1. Chat summary - heat maps
2. Pause/Play, Playback speed, Customization settings - click rates

This would help evaluate if the changes to chat truly improved the overall Twitch experience.


Context of Use - When doing usability testing, I can test if a product works as intended, as I give users tasks their attention is fully on the task. However, when a user is using Twitch, they might be not fully attentive to the task at hand, or, their hands are pre-occupied, etc.

Strategic Fidelity Choice for Testing - Lastly, I learned it's important to choose fidelity strategically. Because our pro-Twitch users were very accustomed to Twitch UI, they were distracted by the task because the wireframes may not have matched their expectations. Next time, when usability testing with pro-users, I will consider testing a higher fidelity.

Next Case Study →