Twitch Chat
Background
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.
Solution
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.
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.
Chat Summary
Ability to quickly understand what the crowd is saying.
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)
Method
Online Research
User Surveys
Interviews
Reason
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
tools
Reddit, Twitch Forum, Qualtrics
Reddit, Twitch Forum, Qualtrics
Google Docs, Teams, WebEx
Process
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
Analysis
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?
ideation
Brainstorming
Using our design goals we researched emerging tech and brainstormed. We arrived at 3 concepts to test with Twitch users
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
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
Chat Summary using Crowdspeak AI
Using crowdspeak AI, a chat summary appears at top of chat to support skimming
mid-fidelity
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.
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.
Fidelity
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
Copy
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.
Incorporating Twitch UI
I evaluating Twitch's existing design system and built our features using its visual elements.
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.
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.
reflection
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.
Takeaways
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.