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
Context
Context
Twitch predictions only work when viewers understand them instantly
Twitch predictions only work when viewers understand them instantly
Viewers place bets using channel points in real time, during a live stream. The overlay has seconds to communicate what's happening and what to choose.
Current overlay options fall into one of these three categories:
Viewers place bets using channel points in real time, during a live stream. The overlay has seconds to communicate what's happening and what to choose.
Current overlay options fall into one of these three categories:
Only 2 outcomes
Only 2 outcomes
Most overlays cap at two choices, limiting how streamers can frame predictions and reducing strategic depth.
Most overlays cap at two choices, limiting how streamers can frame predictions and reducing strategic depth.
Hard to understand
Hard to understand
As complexity grows, overlays become cluttered. Viewers in a fast-paced stream don't have time to parse unclear information.
As complexity grows, overlays become cluttered. Viewers in a fast-paced stream don't have time to parse unclear information.
Confusion = disengagement
When viewers can't follow a prediction, they don't participate. A moment of friction becomes a missed opportunity for the streamer.
When viewers can't follow a prediction, they don't participate. A moment of friction becomes a missed opportunity for the streamer.
This project showcases an overlay that was designed to support up to twelve outcomes while staying quickly readable, regardless of what content the stream displays.
This project showcases an overlay that was designed to support up to twelve outcomes while staying quickly readable, regardless of what content the stream displays.
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
State 1 - Active Voting
Live countdown, bars fluctuate in real time
Light mode - 2 Outcomes
State 2 - Locked
Voting closed, timer & bar stop moving
Dark mode - 4 Outcomes
State 3 - Resolved
Winner is announced, points soon will be distributed
Dark mode - 3 Outcome - Highlighted winners
State 4 - Refunded
Prediction cancelled, points returned to voters
Light mode - 9 Outcomes - Shift between outcomes
Final Screens
Final Screens
Final Screens
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