Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Twitch Prediction Overlay Plugin
Timeline
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
Outcome
Outcome
Delivered a flexible overlay system that supports up to 12 outcomes while maintaining clarity during twitch livestreaming compared to existing 2 outcome limitations.
Which enabled streamers to run more complex predictions without sacrificing viewer understanding or engagement
Delivered a flexible overlay system that supports up to 12 outcomes while maintaining clarity during twitch livestreaming compared to existing 2 outcome limitations.
Which enabled streamers to run more complex predictions without sacrificing viewer understanding or engagement
2 outcomes (light mode)
4 outcomes (dark mode)
5 outcomes (resolved state)
The problem
The problem
The problem
Twitch prediction overlays typically support only two outcomes, limiting how streamers can present more complex scenarios.
As outcomes increase in number, current overlays struggle to clearly communicate options and odds, making it harder for viewers to quickly understand and engage during a live stream.
Twitch prediction overlays typically support only two outcomes, limiting how streamers can present more complex scenarios.
As outcomes increase in number, current overlays struggle to clearly communicate options and odds, making it harder for viewers to quickly understand and engage during a live stream.
Challenge
Challenge
Challenge
Design an overlay that scales from 2 to 12 outcomes while remaining:
Easy to read in real time
Visually subtle
Clear across unpredictable livestream backgrounds
Design an overlay that scales from 2 to 12 outcomes while remaining:
Easy to read in real time
Visually subtle
Clear across unpredictable livestream backgrounds
Key insight
Key insight
Key insight
Viewers don’t read overlays, they scan them.
Viewers don’t read overlays, they scan them.
This shifted the focus from displaying more data to prioritizing clarity, hierarchy, and speed of understanding.
This shifted the focus from displaying more data to prioritizing clarity, hierarchy, and speed of understanding.
Pivotal moment
Pivotal moment
Pivotal moment
An initial half-pie chart design worked for two outcomes but became cluttered and unreadable with more options.
An initial half-pie chart design worked for two outcomes but became cluttered and unreadable with more options.
It couldn’t scale.
It couldn’t scale.
We pivoted to a bar graph system, which allowed:
We pivoted to a bar graph system, which allowed:
Flexibility
Flexibility
Readability
Readability
Consistency
Consistency
Making the adjustment
Making the adjustment
Making the adjustment
Designed a scalable overlay system that adapted based on the number of outcomes:
Simplified information as complexity increased
Prioritized essential data (outcomes + percentages)
Used grid and multi-screen layouts for higher counts (7–12 outcomes)
Designed a scalable overlay system that adapted based on the number of outcomes:
Simplified information as complexity increased
Prioritized essential data (outcomes + percentages)
Used grid and multi-screen layouts for higher counts (7–12 outcomes)
Built with a component-based system to ensure consistency across all prediction states.
Built with a component-based system to ensure consistency across all prediction states.
Testing
Testing
Testing
Tested overlays against simulated live stream environments to ensure readability
Collaborated closely with development to validate feasibility and scalability
Tested overlays against simulated live stream environments to ensure readability
Collaborated closely with development to validate feasibility and scalability
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
Final Screens
Final Screens
Final Screens
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