Removing barriers to broadcast by empowering streamers
Rally Cry’s tournament software, featuring dynamic, customizable templates, empowers streamers of all experience levels to broadcast and build community on the platform.
UI/UX Designer
UX Researcher
Motion Designer
Broadcast Designer
Design QA
Role
Oct 2023 - Feb 2024
(5 months)
Timeline
Figma
Tools
Lead Designer
Front End engineer
Back End engineer
Product Manager
Team
Overview
Rally Cry creates mobile and desktop software that enables clients to host public or private video game tournaments.
As the design lead, I spearheaded UI/UX for the entire platform—designing 25+ new features for 239k users using a Design System and research practices I established in collaboration with Product, Engineering, and Business teams.
The aim of this feature was to encourage players to livestream tournaments to foster community and engagement.
At a Glance
Dynamic Templates removes barriers to live streaming by simplifying the most time-consuming parts of the process: overlay creation and data management.
1
Configure template
2
Copy & Paste URL
3
Go live!
1
2
3
Image
Dynamic Template diagram
Impact
5% increase in streams and 3% increase in viewership
Saved admin and marketing resources
Major selling point used to secure
~$1 000 000
in critical client deals
The Problems
1
Few players streamed tournaments.
Broadcast is an integral part of the eSports community
Few of our players were livestreaming our events
Missed opportunity to foster community
2
Players who did stream had issues that pulled admins away from running events.
Streamers had technical difficulties
Tournament admins pulled away to troubleshoot
Admin attention diverted from critical tournament tasks
The Goal
Build something that increases streams of eSports tournaments, and fosters community on our platforms.
Increase viewership
Parent goal: Fostering community
Increase # of streams
Parent goal: Increasing engagement
Ease admin load
Parent goal: Reduce overhead costs
Context
Overlays are visuals that sit on top of a streamers live video feed.
They could be borders, chat boxes, alerts, or other graphics that display pertinent information. Think of layers in Figma or Adobe, you can layer overlays with each other.
Background
Overlay
Image
Diagram of livestream overlay
User Interviews
Uncovering Paint Points
Insights were gathered through interviews with three external streamers of varying experience levels and three internal tournament admins. Streamers shared that creating overlays could take up to a week, and many cited setup as their biggest barrier to streaming.
Over several months of conversations with our internal admin team, I learned that streamer setup issues were a major pain point, often pulling admins away from critical tournament operations to provide troubleshooting support.
1
Veteran streamers spent too long creating overlays.
2
New streamers were discouraged by the complexity.
3
Admins split their time between tournament tasks & troubleshooting streams.
Competitive Analysis
Identifying broadcast UX patterns
I analyzed Twitch, the leading esports streaming platform, and OBS to identify familiar UX patterns for streamers. I also reviewed common patterns in administration and creation dashboards to explore how these could integrate with Rally Cry’s Design System.
These insights guided scalable design decisions aligned with Rally Cry’s stretch goal of expanding streaming services. While we initially featured only official tournament streams, our long-term vision was to showcase all tournament-related streams and encourage more players to broadcast.
Twitch is a streaming platform where users can watch and broadcast content, primarily focused on video games.
Image
Twitch Homepage
Good
1
Highlights streams for increased audience reach
2
Recommends channels based on user activity
3
Offers free resources for streamers to get started
4
Incentivizes creators with payout programs
Not so good
1
Confusing copy (eg. subscribe vs. follow)
2
Visually overwhelming for new users
OBS is a software used to record and live stream media from sources such as webcams, screens, and microphones.
Image
Twitch Homepage
Good
1
Powerful functionality
2
Highly customizable
Not so good
1
Steep learning curve
2
Hidden entry point leads to confusion
Key insight
The most effective way to enable live asset updates was by providing streamers with URLs to plug directly into their preferred streaming software.
Constraints
Finding workarounds
Must support multiple stream softwares with steep learning curves
Solution
UX interviews and Competitive Analysis revealed the best way to plug in our templates was via URL, something all mainstream streaming software’s supported.
Collaboration with Operation’s team to generate a resource article, instructing users on how to use the Streamer Kit.
Scarce engineering resources
Solution
Wireframes leaned heavily into existing patterns found in our Design System, and new components followed existing patterns as closely as possible.
Juggling 2 other features in tandem
Solution
Time management was done effectively with early and often communication with the team, setting expectations, and deprioritising other projects.
Exploration
Using existing patterns to create general templates
Users could access pre-made templates and either copy and paste the URLs into their streaming software or download the PNG files. I primarily used existing components to minimize engineering effort.
Image
General templates in an existing resource library
Conversations with our admins revealed this wasn’t granular enough
Interviews with our Operations and Tournament Administration teams revealed that the initial solution lacked sufficient customization. With the nuances of different tournament formats, a one-size-fits-all approach wasn’t flexible enough.
We wanted to generate streaming assets that reflected tournament-specific details such as brackets, matches, and prizing by pre-populating templates with dynamic data.
Pivot for scope change and optimizing site architecture
Creating a more robust templatization experience
Our expansion in scope led to more tournament-specific streaming templates, which prompted me to create more entry points.
Entry Point 1. Live Stream Templates
on an existing resource page for generic templates that aren’t competition specific.
Image
General templates in an existing resource library. Cannot be customized with dynamic data.
Entry Point 2. Modules
that can have templates generated from the data, such as brackets, matches, and prizing.
Image
Module entry point to livestream templates
Entry Point 3. Streaming Tab
The streaming tab was introduced into tournaments due to a general product goal - we wanted to create space for livestreams. I believed a dedicated streaming page set the foundation for this, and it made sense to place streaming resources within this page as well.
Image
Streaming Tab entry point to livestream templates
Fine-tuning components
The customization modal allowed users to configure the information in a template.
In Option 1, users clicked directly on the graphic to edit it. While this leveraged desktop screen space, it was quickly retired due to technical and resource constraints.
Options 1 through 5 explored our existing modal pattern. The general modal was being redesigned simultaneously, so we experimented with the placement of the trash and expand icons. After team discussion, we settled on Option 5: the trash action applies broadly, while expanding an image or content is specific to that content within the modal.
We decided on Option 5, as the pattern could be scaled across our platform.
Option 1
Not viable with timeline restrictions
Option 2
Confusing to edit if fields are populated
Option 3
‘Delete’ too close to ‘Cancel’. Mis-click risk.
Option 4
‘Delete’ applies to entire modal, ‘Expand’ applies to image. Confusing placement.
Option 5
Scalable across platform
Image
Iterations of Customization Modal
User Testing
Tests showed the experience was intuitive
I tested a prototype with one beginner, one intermediate, and one professional streamer, asking them to complete simple tasks.
The only piece of feedback was to make the resource article easier to find.
I added an information tooltip next to the header as a result.
Without Dynamic Templates
based on user interviews
Hours to months
Hours to weeks
Manually create overlays
1min to days
Render and download
>1 to 5min
Upload to software
With Dynamic Templates
based on user testing
Less than 5 min
2min
Configure overlay
Instant
Copy template URL
>1 min
Paste into software
Solution - Dynamic Livestream Templates
3 months? Give me 3 minutes.
Rally Cry's Streamer Kit removes barriers to live-streaming by simplifying one of the most time-consuming parts of the process. No more time sinks in asset creation and managing individual pieces of data. Instead, take 2 minutes to customize a template, then paste the URL into your streaming software.
1
Customize your overlay
Configure the content displayed in your overlay
Image
Configuring overlay modal
2
Copy and paste the URL
Copy the overlay URL and paste into your streaming software of choice. You can also download .png’s if you want more control over the data displayed.
Image
Copying overlay URL
3
Go live!
Once you've set up all scenes, you're ready to go live! If this is the tournament stream, highlight it for all to see.
Image
Live stream
|
Key Takeaway
Thorough research, preparation, and communication aids in saving resources. Effective communication with stakeholders enabled efficient workflows, and ensured a sharp pivot in scope didn’t shatter our timelines. Flexibility and preparation go hand-in-hand in agile team collaboration.
Thanks for scrolling! Want to see more?
Data Visualization Dashboard SurveyMonkey
Let’s connect
We could be good together.
rachael.sun.ng@gmail.com
© 2026 Rachael Ng
Removing barriers to broadcast by empowering streamers
Rally Cry’s tournament software, featuring dynamic, customizable templates, empowers streamers of all experience levels to broadcast and build community on the platform.
UI/UX Designer
UX Researcher
Motion Designer
Broadcast Designer
Design QA
Role
Oct 2023 - Feb 2024
(5 months)
Timeline
Figma
Tools
Lead Designer
Front End engineer
Back End engineer
Product Manager
Team
Overview
Rally Cry creates mobile and desktop software that enables clients to host public or private video game tournaments.
As the design lead, I spearheaded UI/UX for the entire platform—designing 25+ new features for 239k users using a Design System and research practices I established in collaboration with Product, Engineering, and Business teams.
The aim of this feature was to encourage players to livestream tournaments to foster community and engagement.
At a Glance
Dynamic Templates removes barriers to live streaming by simplifying the most time-consuming parts of the process: overlay creation and data management.
1
Configure template
2
Copy & Paste URL
3
Go live!
1
2
3
Image
Dynamic Template diagram
Impact
5% increase in streams and 3% increase in viewership
Saved admin and marketing resources
Major selling point used to secure
~$1 000 000
in critical client deals
The Problems
1
Few players streamed tournaments.
Broadcast is an integral part of the eSports community
Few of our players were livestreaming our events
Missed opportunity to foster community
2
Players who did stream had issues that pulled admins away from running events.
Streamers had technical difficulties
Tournament admins pulled away to troubleshoot
Admin attention diverted from critical tournament tasks
The Goal
Build something that increases streams of eSports tournaments, and fosters community on our platforms.
Increase viewership
Parent goal: Fostering community
Increase # of streams
Parent goal: Increasing engagement
Ease admin load
Parent goal: Reduce overhead costs
Context
Overlays are visuals that sit on top of a streamers live video feed.
They could be borders, chat boxes, alerts, or other graphics that display pertinent information. Think of layers in Figma or Adobe, you can layer overlays with each other.
Background
Overlay
Image
Diagram of livestream overlay
User Interviews
Uncovering Paint Points
Insights were gathered through interviews with three external streamers of varying experience levels and three internal tournament admins. Streamers shared that creating overlays could take up to a week, and many cited setup as their biggest barrier to streaming.
Over several months of conversations with our internal admin team, I learned that streamer setup issues were a major pain point, often pulling admins away from critical tournament operations to provide troubleshooting support.
1
Veteran streamers spent too long creating overlays.
2
New streamers were discouraged by the complexity.
3
Admins split their time between tournament tasks & troubleshooting streams.
Competitive Analysis
Identifying broadcast UX patterns
I analyzed Twitch, the leading esports streaming platform, and OBS to identify familiar UX patterns for streamers. I also reviewed common patterns in administration and creation dashboards to explore how these could integrate with Rally Cry’s Design System.
These insights guided scalable design decisions aligned with Rally Cry’s stretch goal of expanding streaming services. While we initially featured only official tournament streams, our long-term vision was to showcase all tournament-related streams and encourage more players to broadcast.
Twitch is a streaming platform where users can watch and broadcast content, primarily focused on video games.
Image
Twitch Homepage
Good
1
Highlights streams for increased audience reach
2
Recommends channels based on user activity
3
Offers free resources for streamers to get started
4
Incentivizes creators with payout programs
Not so good
1
Confusing copy (eg. subscribe vs. follow)
2
Visually overwhelming for new users
OBS is a software used to record and live stream media from sources such as webcams, screens, and microphones.
Image
Twitch Homepage
Good
1
Powerful functionality
2
Highly customizable
Not so good
1
Steep learning curve
2
Hidden entry point leads to confusion
Key insight
The most effective way to enable live asset updates was by providing streamers with URLs to plug directly into their preferred streaming software.
Constraints
Finding workarounds
Must support multiple stream softwares with steep learning curves
Solution
UX interviews and Competitive Analysis revealed the best way to plug in our templates was via URL, something all mainstream streaming software’s supported.
Collaboration with Operation’s team to generate a resource article, instructing users on how to use the Streamer Kit.
Scarce engineering resources
Solution
Wireframes leaned heavily into existing patterns found in our Design System, and new components followed existing patterns as closely as possible.
Juggling 2 other features in tandem
Solution
Time management was done effectively with early and often communication with the team, setting expectations, and deprioritising other projects.
Exploration
Using existing patterns to create general templates
Users could access pre-made templates and either copy and paste the URLs into their streaming software or download the PNG files. I primarily used existing components to minimize engineering effort.
Image
General templates in an existing resource library
Conversations with our admins revealed this wasn’t granular enough
Interviews with our Operations and Tournament Administration teams revealed that the initial solution lacked sufficient customization. With the nuances of different tournament formats, a one-size-fits-all approach wasn’t flexible enough.
We wanted to generate streaming assets that reflected tournament-specific details such as brackets, matches, and prizing by pre-populating templates with dynamic data.
Pivot for scope change and optimizing site architecture
Creating a more robust templatization experience
Our expansion in scope led to more tournament-specific streaming templates, which prompted me to create more entry points.
Entry Point 1. Live Stream Templates
on an existing resource page for generic templates that aren’t competition specific.
Image
General templates in an existing resource library. Cannot be customized with dynamic data.
Entry Point 2. Modules
that can have templates generated from the data, such as brackets, matches, and prizing.
Image
Module entry point to livestream templates
Copies URL to the template autopopulated with data.
Entry Point 3. Streaming Tab
The streaming tab was introduced into tournaments due to a general product goal - we wanted to create space for livestreams. I believed a dedicated streaming page set the foundation for this, and it made sense to place streaming resources within this page as well.
Image
Streaming Tab entry point to livestream templates
Customizable templates, populated with dynamic data.
Fine-tuning components
The customization modal allowed users to configure the information in a template.
In Option 1, users clicked directly on the graphic to edit it. While this leveraged desktop screen space, it was quickly retired due to technical and resource constraints.
Options 1 through 5 explored our existing modal pattern. The general modal was being redesigned simultaneously, so we experimented with the placement of the trash and expand icons. After team discussion, we settled on Option 5: the trash action applies broadly, while expanding an image or content is specific to that content within the modal.
We decided on Option 5, as the pattern could be scaled across our platform.
Option 1
Not viable with timeline restrictions
Option 2
Confusing to edit if fields are populated
Option 3
‘Delete’ too close to ‘Cancel’. Mis-click risk.
Option 4
‘Delete’ applies to entire modal, ‘Expand’ applies to image. Confusing placement.
Option 5
Scalable across platform
Image
Iterations of Customization Modal
User Testing
Tests showed the experience was intuitive
I tested a prototype with one beginner, one intermediate, and one professional streamer, asking them to complete simple tasks.
The only piece of feedback was to make the resource article easier to find.
I added an information tooltip next to the header as a result.
Without Dynamic Templates based on user interviews
Hours to months
Manually create overlays
Render and download
Upload to software
Hours to weeks
1 min to days
>1 to 5 min
With Dynamic Templates based on user testing
Less than 5 min
Configure overlay
Copy template URL
Paste into software
2 min
Instant
>1 min
Solution - Dynamic Livestream Templates
3 months? Give me 3 minutes.
Rally Cry's Streamer Kit removes barriers to live-streaming by simplifying one of the most time-consuming parts of the process. No more time sinks in asset creation and managing individual pieces of data. Instead, take 2 minutes to customize a template, then paste the URL into your streaming software.
1
Customize your overlay
Configure the content displayed in your overlay
Image
Configuring overlay modal
2
Copy and paste the URL
Copy the overlay URL and paste into your streaming software of choice. You can also download .png’s if you want more control over the data displayed.
Image
Copying overlay URL
3
Go live!
Once you've set up all scenes, you're ready to go live! If this is the tournament stream, highlight it for all to see.
Image
Live stream
|
Key Takeaway
Thorough research, preparation, and communication aids in saving resources. Effective communication with stakeholders enabled efficient workflows, and ensured a sharp pivot in scope didn’t shatter our timelines. Flexibility and preparation go hand-in-hand in agile team collaboration.
Thanks for scrolling! Want to see more?
Let’s connect
We could be good together.
Made with Figma, Procreate, and whimsy © Rachael Ng 2026
Removing barriers to broadcast by empowering streamers
Rally Cry’s tournament software, featuring dynamic, customizable templates, empowers streamers of all experience levels to broadcast and build community on the platform.
UI/UX Designer
UX Researcher
Motion Designer
Broadcast Designer
Design QA
Role
Oct 2023 - Feb 2024
(5 months)
Timeline
Figma
Tools
Lead Designer
Front End engineer
Back End engineer
Product Manager
Team
Overview
Rally Cry creates mobile and desktop software that enables clients to host public or private video game tournaments.
As the design lead, I spearheaded UI/UX for the entire platform—designing 25+ new features for 239k users using a Design System and research practices I established in collaboration with Product, Engineering, and Business teams.
The aim of this feature was to encourage players to livestream tournaments to foster community and engagement.
At a Glance
Dynamic Templates removes barriers to live streaming by simplifying the most time-consuming parts of the process: overlay creation and data management.
1
Configure template
2
Copy & Paste URL
3
Go live!
1
2
3
Image
Dynamic Template diagram
Impact
5% increase in streams and 3% increase in viewership
Saved admin and marketing resources
Major selling point used to secure
~$1 000 000
in critical client deals
The Problems
1
Few players streamed tournaments.
Broadcast is an integral part of the eSports community
Few of our players were livestreaming our events
Missed opportunity to foster community
2
Players who did stream had issues that pulled admins away from running events.
Streamers had technical difficulties
Tournament admins pulled away to troubleshoot
Admin attention diverted from critical tournament tasks
The Goal
Build something that increases streams of eSports tournaments, and fosters community on our platforms.
Increase viewership
Parent goal: Fostering community
Increase # of streams
Parent goal: Increasing engagement
Ease admin load
Parent goal: Reduce overhead costs
Context
Overlays are visuals that sit on top of a streamers live video feed.
They could be borders, chat boxes, alerts, or other graphics that display pertinent information. Think of layers in Figma or Adobe, you can layer overlays with each other.
Background
Overlay
Image
Diagram of livestream overlay
User Interviews
Uncovering Paint Points
Insights were gathered through interviews with three external streamers of varying experience levels and three internal tournament admins. Streamers shared that creating overlays could take up to a week, and many cited setup as their biggest barrier to streaming.
Over several months of conversations with our internal admin team, I learned that streamer setup issues were a major pain point, often pulling admins away from critical tournament operations to provide troubleshooting support.
1
Veteran streamers spent too long creating overlays.
2
New streamers were discouraged by the complexity.
3
Admins split their time between tournament tasks & troubleshooting streams.
Competitive Analysis
Identifying broadcast UX patterns
I analyzed Twitch, the leading esports streaming platform, and OBS to identify familiar UX patterns for streamers. I also reviewed common patterns in administration and creation dashboards to explore how these could integrate with Rally Cry’s Design System.
These insights guided scalable design decisions aligned with Rally Cry’s stretch goal of expanding streaming services. While we initially featured only official tournament streams, our long-term vision was to showcase all tournament-related streams and encourage more players to broadcast.
Twitch is a streaming platform where users can watch and broadcast content, primarily focused on video games.
Image
Twitch Homepage
Good
1
Highlights streams for increased audience reach
2
Recommends channels based on user activity
3
Offers free resources for streamers to get started
4
Incentivizes creators with payout programs
Not so good
1
Confusing copy (eg. subscribe vs. follow)
2
Visually overwhelming for new users
OBS is a software used to record and live stream media from sources such as webcams, screens, and microphones.
Image
Twitch Homepage
Good
1
Powerful functionality
2
Highly customizable
Not so good
1
Steep learning curve
2
Hidden entry point leads to confusion
Key insight
The most effective way to enable live asset updates was by providing streamers with URLs to plug directly into their preferred streaming software.
Constraints
Finding workarounds
Constraint
Support multiple stream softwares with steep learning curves
Solution
UX interviews and Competitive Analysis revealed the best way to plug in our templates was via URL, something all mainstream streaming software’s supported.
Collaboration with Operation’s team to generate a resource article, instructing users on how to use the Streamer Kit.
Scarce engineering resources
Wireframes leaned heavily into existing patterns found in our Design System, and new components followed existing patterns as closely as possible.
Juggling 2 other features in tandem
Time management was done effectively with early and often communication with the team, setting expectations, and deprioritising other projects.
Exploration
Using existing patterns to create general templates
Users could access pre-made templates and either copy and paste the URLs into their streaming software or download the PNG files. I primarily used existing components to minimize engineering effort.
Image
General templates in an existing resource library
Conversations with our admins revealed this wasn’t granular enough
Interviews with our Operations and Tournament Administration teams revealed that the initial solution lacked sufficient customization. With the nuances of different tournament formats, a one-size-fits-all approach wasn’t flexible enough.
We wanted to generate streaming assets that reflected tournament-specific details such as brackets, matches, and prizing by pre-populating templates with dynamic data.
Pivot for scope change and optimizing site architecture
Creating a more robust templatization experience
Our expansion in scope led to more tournament-specific streaming templates, which prompted me to create more entry points.
Entry Point 1. Live Stream Templates
on an existing resource page for generic templates that aren’t competition specific.
Copy Template URL
Competition
Home
- Module
- Streaming Tab
Resources
- Live stream Templates
Image
General templates in an existing resource library. Cannot be customized with dynamic data.
Entry Point 2. Modules
that can have templates generated from the data, such as brackets, matches, and prizing.
Copy Template URL
Competition
Home
- Module
- Streaming Tab
Resources
- Live stream Templates
Image
Module entry point to livestream templates
Copies URL to the template autopopulated with data.
Entry Point 3. Streaming Tab
The streaming tab was introduced into tournaments due to a general product goal - we wanted to create space for livestreams. I believed a dedicated streaming page set the foundation for this, and it made sense to place streaming resources within this page as well.
Copy Template URL
Competition
Home
- Module
- Streaming Tab
Resources
- Live stream Templates
Image
Streaming Tab entry point to livestream templates
Customizable templates, populated with dynamic data.
Fine-tuning components
The customization modal allowed users to configure the information in a template.
In Option 1, users clicked directly on the graphic to edit it. While this leveraged desktop screen space, it was quickly retired due to technical and resource constraints.
Options 1 through 5 explored our existing modal pattern. The general modal was being redesigned simultaneously, so we experimented with the placement of the trash and expand icons. After team discussion, we settled on Option 5: the trash action applies broadly, while expanding an image or content is specific to that content within the modal.
We decided on Option 5, as the pattern could be scaled across our platform.
Option 1
Not viable with timeline restrictions
Option 2
Confusing to edit if fields are populated
Option 3
‘Delete’ too close to ‘Cancel’. Mis-click risk.
Option 4
‘Delete’ applies to entire modal, ‘Expand’ applies to image. Confusing placement.
Option 5
Scalable across platform
Image
Iterations of Customization Modal
User Testing
Tests showed the experience was intuitive
I tested a prototype with one beginner, one intermediate, and one professional streamer, asking them to complete simple tasks.
The only piece of feedback was to make the resource article easier to find.
I added an information tooltip next to the header as a result.
Without Dynamic Templates based on user interviews
Hours to months
Manually create overlays
Render and download
Upload to software
Hours to weeks
1 min to days
>1 to 5 min
With Dynamic Templates based on user testing
Less than 5 min
Configure overlay
Copy template URL
Paste into software
2 min
Instant
>1 min
Solution - Dynamic Livestream Templates
3 months? Give me 3 minutes.
Rally Cry's Streamer Kit removes barriers to live-streaming by simplifying one of the most time-consuming parts of the process. No more time sinks in asset creation and managing individual pieces of data. Instead, take 2 minutes to customize a template, then paste the URL into your streaming software.
1
Customize your overlay
Configure the content displayed in your overlay
Image
Configuring overlay modal
2
Copy and paste the URL
Copy the overlay URL and paste into your streaming software of choice. You can also download .png’s if you want more control over the data displayed.
Image
Copying overlay URL
3
Go live!
Once you've set up all scenes, you're ready to go live! If this is the tournament stream, highlight it for all to see.
Image
Live stream
|
Key Takeaway
Thorough research, preparation, and communication aids in saving resources. Effective communication with stakeholders enabled efficient workflows, and ensured a sharp pivot in scope didn’t shatter our timelines. Flexibility and preparation go hand-in-hand in agile team collaboration.
Thanks for scrolling! Want to see more?
Let’s connect
We could be good together.
Made with Figma, Procreate, and whimsy © Rachael Ng 2026