Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Twitch Prediction Overlay Plugin
Timeline
3 Weeks
3 Weeks
3 Weeks
Role
UX Designer
UI Designer
UX Designer
UI Designer
UX Designer
UI Designer
Team
2 Designers
1 Developer
2 Designers
1 Developer
2 Designers
1 Developer
SOW
Open Source
Web Design
Open Source
Web Design
Open Source
Web Design
Overview
Overview
I designed a scalable Twitch prediction overlay system that supports 2 to 12 outcomes while maintaining clarity in fast-paced live streams.
By prioritizing readability and information hierarchy, the solution enables streamers to run more complex predictions without overwhelming viewers, improving real-time understanding and engagement.
I designed a scalable Twitch prediction overlay system that supports 2 to 12 outcomes while maintaining clarity in fast-paced live streams.
By prioritizing readability and information hierarchy, the solution enables streamers to run more complex predictions without overwhelming viewers, improving real-time understanding and engagement.
2 outcomes (light mode)
4 outcomes (dark mode)
5 outcomes (resolved state)
The problem
The problem
The problem
Twitch predictions are designed for fast, real-time interactions, allowing viewers to place bets using channel points during a live stream.
However, most existing overlays only support cases with two outcomes, limiting how streamers can structure predictions and how clearly those predictions can be communicated on screen.
As streamers deal with more complex scenarios, this limitation creates friction. Overlays become harder to read, outcomes become unclear, and viewers have less time to process information in an already fast-paced environment.
In a livestream, confusion will lead to disengagement.
Twitch predictions are designed for fast, real-time interactions, allowing viewers to place bets using channel points during a live stream.
However, most existing overlays only support cases with two outcomes, limiting how streamers can structure predictions and how clearly those predictions can be communicated on screen.
As streamers deal with more complex scenarios, this limitation creates friction. Overlays become harder to read, outcomes become unclear, and viewers have less time to process information in an already fast-paced environment.
In a livestream, confusion will lead to disengagement.
Challenge
Challenge
Challenge
How might we design a prediction overlay that can support up to twelve outcomes while remaining readable, unnoticeable, and easy to understand in real time?
How might we design a prediction overlay that can support up to twelve outcomes while remaining readable, unnoticeable, and easy to understand in real time?
This challenge was shaped by a few key constraints:
This challenge was shaped by a few key constraints:
This challenge was shaped by a few key constraints:
Limited space:
The overlay needed to fit within a 448×160 area without obstructing the stream
Character limits:
Titles (45 characters) and outcomes (25 characters) needed to remain readable at max length
Color limitations:
Multi-outcome predictions rely on a single color, reducing visual distinction
Dynamic states:
Overlays needed to clearly communicate prediction states (active, locked, resolved, canceled)
Unpredictable backgrounds:
Designs had to remain legible across constantly changing stream content
Understanding what matters
Understanding what matters
Understanding what matters
Before exploring layouts, we needed to understand how viewers actually process prediction overlays during a live stream.
This raised a critical question:
What does a viewer NEED to understand a prediction in just a few seconds?
Before exploring layouts, we needed to understand how viewers actually process prediction overlays during a live stream.
This raised a critical question:
What does a viewer NEED to understand a prediction in just a few seconds?
Analyzing existing overlays revealed a consistent pattern. Regardless of style, most prioritized:
Analyzing existing overlays revealed a consistent pattern. Regardless of style, most prioritized:
Analyzing existing overlays revealed a consistent pattern. Regardless of style, most prioritized:
The prediction question
The prediction question
Outcome options
Outcome options
Percentage distribution
Percentage distribution
Supporting data (odds, total points, votes)
Supporting data (odds, total points, votes)
From this, a key insight emerged:
From this, a key insight emerged:
Viewers don’t read overlays, they scan them.
Viewers don’t read overlays, they scan them.
This shifted our focus from displaying more information to structuring information by priority:
This shifted our focus from displaying more information to structuring information by priority:
Primary:
Primary:
What is being asked?
What are the outcomes?
Secondary:
Secondary:
Which outcome is leading?
Tertiary:
Tertiary:
Additional supporting data
A direction that didn’t scale
A direction that didn’t scale
A direction that didn’t scale
Our initial concept explored a half-pie chart visualization, aiming to make predictions feel dynamic and engaging during a stream.
Our initial concept explored a half-pie chart visualization, aiming to make predictions feel dynamic and engaging during a stream.
For two outcomes, the design worked well. The split was clear, visually balanced, and easy to interpret.
However the design broke down with additional outcomes.
For two outcomes, the design worked well. The split was clear, visually balanced, and easy to interpret.
However the design broke down with additional outcomes.
What started as an engaging solution revealed a critical flaw:
What started as an engaging solution revealed a critical flaw:
It couldn’t scale.
It couldn’t scale.
This forced us to step back and re-evaluate our priorities.
Were we solely focused on designing something visually unique or for clarity in a livestream environment?
Pivoting toward clarity
Pivoting toward clarity
Pivoting toward clarity
To support scalability, we shifted to a bar graph structure.
This approach provided a more flexible foundation:
Outcomes could expand or compress without losing readability
Viewers could quickly compare results through alignment
Labels and percentages remained legible across different scales
This pivot marked a shift in focus from just expressive visuals to the addition of clarity, hierarchy, and adaptability.
To support scalability, we shifted to a bar graph structure.
This approach provided a more flexible foundation:
Outcomes could expand or compress without losing readability
Viewers could quickly compare results through alignment
Labels and percentages remained legible across different scales
This pivot marked a shift in focus from just expressive visuals to the addition of clarity, hierarchy, and adaptability.
Designing for scale
Designing for scale
Designing for scale
As the number of outcomes increased, each step introduced new constraints and tradeoffs.
At smaller scales, we were able to display all the information, including supporting statistics
As outcomes increased, space became limited, which required us to reduce or reposition secondary data
At higher counts, we displayed everything at once created visual overload, which lead to simplified layouts and grouped presentations
As the number of outcomes increased, each step introduced new constraints and tradeoffs.
At smaller scales, we were able to display all the information, including supporting statistics
As outcomes increased, space became limited, which required us to reduce or reposition secondary data
At higher counts, we displayed everything at once created visual overload, which lead to simplified layouts and grouped presentations
At the largest scale (7–12 outcomes), we introduced a multi-screen approach, allowing viewers to process outcomes in smaller, more digestible sets.
At the largest scale (7–12 outcomes), we introduced a multi-screen approach, allowing viewers to process outcomes in smaller, more digestible sets.
Designing for consistency and constraints
Designing for consistency and constraints
Designing for consistency and constraints
To maintain clarity across different layouts and prediction states, we built the overlay using a component-based system.
This allowed us to:
Reuse elements across multiple prediction formats
Maintain consistency between different outcome counts and states
Adapt quickly as constraints changed
To maintain clarity across different layouts and prediction states, we built the overlay using a component-based system.
This allowed us to:
Reuse elements across multiple prediction formats
Maintain consistency between different outcome counts and states
Adapt quickly as constraints changed
These additional decisions supported readability and usability:
These additional decisions supported readability and usability:
Takeaways
Prediction Question
Timer
Prediction Outcome
Bar Percentage
Icon Size
Prediction Size
448 * 160
Stats Logic
1 - 999 = Full Number
1,000 - 999,999 = 1K - 999.99K
1,000,000 - 999,999,999 = 1M - 999.99M
Typeface
Roboto
Typogrpahy:
Selected for clarity at small sizes
Numerical limits:
Large values were abbreviated to prevent overcrowding
Color adjustments:
Slight modifications improved contrast while staying aligned with Twitch’s visual language
These choices ensured the overlay remained legible, even under tight spatial and visual constraints.
These choices ensured the overlay remained legible, even under tight spatial and visual constraints.
Testing in live stream environments
Testing in live stream environments
Testing in live stream environments
Because overlays exist on top of unpredictable live content, we tested designs against simulated streaming environments.
Because overlays exist on top of unpredictable live content, we tested designs against simulated streaming environments.
This helped validate whether key information remained visible across:
This helped validate whether key information remained visible across:
Fast-moving gameplay
Bright or low-contrast scenes
Visually noisy backgrounds
At the same time, close collaboration with the developer ensured that design decisions were technically feasible.
Early feedback, especially during the half-pie chart phase, helped identify scalability issues and guided the transition toward a more flexible system.
At the same time, close collaboration with the developer ensured that design decisions were technically feasible.
Early feedback, especially during the half-pie chart phase, helped identify scalability issues and guided the transition toward a more flexible system.
Final Adjustments
Final Adjustments
Final Adjustments
Testing revealed opportunities to further reduce visual obstruction and improve clarity.
Testing revealed opportunities to further reduce visual obstruction and improve clarity.
Key refinements included:
Key refinements included:
Breaking up the background: Replacing a full overlay background with segmented sections reduced screen blockage while maintaining readability
Redesigning the timer: Integrating the countdown with the title improved clarity and state transitions
Improving scannability: Zebra striping the usernames made it easier to track winners and losers as lists updated (Within resolveed state of prediction)
Breaking up the background: Replacing a full overlay background with segmented sections reduced screen blockage while maintaining readability
Redesigning the timer: Integrating the countdown with the title improved clarity and state transitions
Improving scannability: Zebra striping the usernames made it easier to track winners and losers as lists updated (Within resolveed state of prediction)
Each adjustment was driven by how the overlay performed in context, not just how it looked in isolation.
Each adjustment was driven by how the overlay performed in context, not just how it looked in isolation.
Outcome
Outcome
Outcome
The final design produced a scalable overlay system capable of supporting predictions from two to twelve outcomes while maintaining clarity in a live streaming environment.
By prioritizing readability, hierarchy, and adaptability, the system allows streamers to create more complex predictions without sacrificing viewer understanding or engagement.
The plugin is currently in development.
The final design produced a scalable overlay system capable of supporting predictions from two to twelve outcomes while maintaining clarity in a live streaming environment.
By prioritizing readability, hierarchy, and adaptability, the system allows streamers to create more complex predictions without sacrificing viewer understanding or engagement.
The plugin is currently in development.
Reflection
Reflection
Designing for context matters as much as the interface itself
Live stream environments are unpredictable, requiring solutions that remain clear under constantly changing conditions
Constraints drive better decisions
Limited space and time forced a focus on what truly matters, strengthening information hierarchy and clarity
Collaboration improves outcomes
Early and consistent communication with engineering helped surface limitations quickly and ensured solutions were both usable and feasible
Designing for context matters as much as the interface itself
Live stream environments are unpredictable, requiring solutions that remain clear under constantly changing conditions
Constraints drive better decisions
Limited space and time forced a focus on what truly matters, strengthening information hierarchy and clarity
Collaboration improves outcomes
Early and consistent communication with engineering helped surface limitations quickly and ensured solutions were both usable and feasible
OTHER PROJECTs.
OTHER PROJECTs.
Created a more immersive and impactful experience through emotional storytelling
Project Overview: Project: View / Received Capsule Redesign Timeline: 3 Months Role: Solo UX / UI Designer Team: 1 Designer, 2 Developers
Mobile App
Virtual Time Capsule
“Received Capsule” Experience Redesign
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Project Overview: Project: View / Received Capsule Redesign Timeline: 3 Months Role: Solo UX / UI Designer Team: 1 Designer, 2 Developers
Open Source
Web Design
Virtual Time Capsule
“Received Capsule” Experience Redesign
Created a more immersive and impactful experience through emotional storytelling
Project Overview: Project: View / Received Capsule Redesign Timeline: 3 Months Role: Solo UX / UI Designer Team: 1 Designer, 2 Developers
Open Source
Web Design
Virtual Time Capsule
“Received Capsule” Experience Redesign