Streamer Kit

Simplify live streaming through Rally Cry’s tournament software, featuring dynamic, customizable templates that empower streamers of all experience levels to broadcast and build community.

Role

UI/UX Designer

UX Researcher

Motion and Broadcast Designer

Design QA

Timeline

Oct 2023 - Feb 2024

(5 months)

Tools

Figma

Team

Solo Designer

Front and Back-end Engineers

Product Manager

GENERAL OVERVIEW

As the design lead at Rally Cry, I’ve created and redesigned 25+ new features for 239k active users while in the Product team. Spearheading UI/UX for the entire platform, I use components from the Design System I implemented, informed by data gathered through research practices I founded, while collaborating with Product Management, Engineering, Business, and Operations.

The aim of this feature was to foster community on our platform via livestreaming, a popular public sphere tool within esports.

THE PROBLEM

Livestreaming comes with a lot of barriers and work. From spending large chunks of time to create overlays and assets, to the steep learning curve of the major streaming softwares like OBS, beginners are scared off by the task and seasoned veterans become overwhelmed by all the logistics. As a result, players are less likely to stream Rally Cry's tournaments, and with livestreaming being such an integral portion of the esports sector, this is a huge loss for fostering community and engagement.

Players that were streaming our tournaments continually faced problems, causing our administrators to spend time troubleshooting streams rather than administrating the tournaments themselves.

A DESIGN CHALLENGE EMERGED...

How might we encourage livestream engagement while lessening the load for administrators troubleshooting existing streams?

THE SOLUTION

Simplify livestream template creation with responsive, customizable, pre-made scenes. Streamers easily copy and paste these assets into their preferred streaming software, while we manage all live updates.

KEY IMPACT

Removing barriers to streaming helped increase our streams by 5%, and cut down how much time administrators were troubleshooting. Further discussion into success metrics and impact will be discussed at the bottom of this case study.

1. Increased streams by 5% and viewership by 3%

2. Admins reportedly spending less resources for livestream troubleshooting

3. Differentiated us from competitors, aiding the team in closing a major deal

QUALITATIVE INTERVIEWS UNCOVER PAIN POINTS

I collected data through external client interviews with 3 Streamers of varying experience. I also had conversations with 3 Tournament Admins part of our internal team.

I asked the streamers broad questions to gauge what their workflow and pain points were. Some streamers mentioned it took them around a week to put together their overlays while others mentioned how the biggest barrier to starting streaming was the setup.

Chatting with our internal Admin team over the course of months gave me insight into their largest pain point: Streamers struggled with setup, causing our admins to split their time between critical tournament tasks and troubleshooting.

1. Experienced streamers spent hours creating broadcast assets, while potential streamers were discouraged by the complexity of the task.

2. Streamers struggled with setup, causing our admins to split their time between critical tournament tasks and troubleshooting.

STUDYING EXISTING UX PATTERNS AND COMPETITIVE ANALYSIS

I studied the most popular esports streaming platform, Twitch, as well as popular streaming software, OBS, to identify common UX patterns that streamers may already be familiar with.

Twitch does a good job at fostering community. Their design brings relevant streams to the forefront based on viewer activity and subscriptions, as well as encourages new streamers via surfacing free resources such as templates and overlays. They also incentivize streamers with payout programs.

I also collected data on common UX patterns within administration and creation dashboards. I wanted to see how we could marry these streaming UX patterns with our existing Design System.

OBS has a steep learning curve. Studying the platform contextualized many of the pitfalls interviewees had mentioned. This helped me better understand streamer workflows and the logistics behind going live, as well as giving insight into patterns to avoid. Analyzing the platform as well as conversations with external clients and internal team members, I determined the best way to allow for live-updates on assets was through providing URL’s for streamers to plug into their streaming software of choice.

All this data helped me design for scalability, as I knew Rally Cry’s stretch goal of expanding our streaming services. At the time, we only highlighted official tournament live streams, but a stretch goal was to showcase all streams related to the tournament. We wanted to incentivize new and returning streamers within our tournaments.

DESIGNING WITH A VARIETY OF CONSTRAINTS

My stakeholders and I identified business constraints at the beginning of the design process. I went back to engineering, operations, and administration teams each round of designs to gather feedback, where new technical constraints were often identified.

TRACKING VIEWERSHIP AND STREAMS FOR SUCCESS METRICS

Before conceptualizing, I set markers for success. Comparing data from before and after implementation enables data-driven iteration.

ITERATION 1 Generating general templates using existing patterns in Design System

My first series of designs led to an entrypoint on a pre-existing resource page; where users could access general pre-made templates and quickly copy+paste the URL’s into their software (or download the .png). The design mostly utilized existing components to lessen engineering load.

General templates in an existing resource library, using premade patterns from the Design Library.

Interviewing our Operations and Tournament Administrations team revealed that the problem was this option didn’t provide enough customization. With the nuances of different tournament styles, this one-size-fits-all solution wasn’t granular enough.

This round of designs revealed to our team that we wanted to do more than provide generic animated backgrounds, logos, and general templates - we wanted to generate streaming assets that covered the tournament-specific details like brackets, matches, and prizing. We needed to pre-populate the templates with dynamic data.

ITERATION 2 Pivot for scope change & experiment with entry points to optimize site architecture

Our expansion in scope led to more tournament-specific streaming templates, which prompted me to create more entry points and a different approach.

I made 3 entry points to accessing streaming templates:

The existing resource page for generic templates that weren’t competition specific.
Modules that could have streaming templates generated from the data, such as brackets, matches, and prizing.
And a dedicated streaming tab within the tournament page itself. This choice was made due to the aforementioned stretch goal - we wanted to give a space to feature user livestreams of the competition as they were happening. I believed a dedicated streaming page set the foundation for this, and it made sense to place streaming resources within this page as well.

ITERATION 3 Surfacing buttons and altering layout based on user testing

After 3 rounds of iterations, I conducted user testing. I reached out to 1 beginner, 1 intermediate, and 1 professional streamer.

Providing a prototype of the Streamer Kit, I requested them to complete simple tasks. My findings indicated the experience was mostly intuitive and easy to use for all interviewees.

“This is going to save me so much time, and the [template] looks better than what I have now.”

- Streamer 2

During the design phase, I reached out to our Operations team to generate a resource article, giving step-by-step instructions on how to use our kit. Some streamers don’t know how to get started, and although the ideal design would be so intuitive that an article is unnecessary, we had to insert ourselves into the user journey of complex streaming software. The one bit of feedback we got was to surface this resource. The solution was an information tooltip next to the header text, redirecting curious users to our article.

HAND OFF & DESIGN QA WHILE JUGGLING OTHER FEATURES

When handing off designs to engineers, I generate style guides for any new components the feature uses, while adding them to our Design System. I use Figma’s Dev Mode feature to annotate designs with pertinent information, such as what data certain designs should draw from, interactions, and animations. Answering questions during a hand off call, I receive an estimate on when I will be able to do Design QA.

Since this feature was done in tandem with 2 others, it was pertinent that I had an estimate on when to allocate time for QA, to avoid bottlenecking our team. Juggling multiple features at once required stricter prioritization of design resources, and some tasks had to be placed on the back burner.

Easy and Fast Overlays

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.

Customize your overlay

Take 2min to configure the content displayed in your overlay.

Copy and paste the URL

Download overlays or copy the URL. Scenes with dynamic content won't have the outdated data downloaded in the .png. Simply paste this into your streaming software of choice.

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.

IMPACT OF THE STREAMER KIT

User Impact: Within organizations that had access to the Streamer kit, we saw an increase of 5% in players streaming the tournaments they were partaking in. By surfacing streams on tournaments, we saw a 3% increase in viewers on tournament streams

Internal Impact: Our Operations and Marketing team’s saved resources by quickly using this kit to whip up social media graphics, rather than making them from scratch. We inadvertently created a graphic template where our internal team’s could quickly input pertinent info and export a graphically interesting asset. Alongside this, we accomplished our initial goal of lessening admin load with troubleshooting.

Business Impact: This feature was a huge selling point to new clients, aiding in new contracts, including the United States Air Force.

KEY TAKEAWAY

Thorough research, preparation, and communication aid in saving resources. Effective communication with stakeholders enabled efficient workflows.