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.
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 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.
Ability to quickly understand what the crowd is saying.
Ability to personalize chat view
To understand the problem and users involved we conducted 3 explorative research methods:
(View full research report)
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
Affinity Map, Personas, Empathy Map
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
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 club-house like experience, regulars select other regulars to create a hub and talk while watching the stream
Using crowdspeak AI, a chat summary appears at top of chat to support skimming
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.
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.
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.
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.
I evaluating Twitch's existing design system and built our features using its visual elements.
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.
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 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.