Twitch Overlays
Context
In Fall 2018, I brought two designers on board to Brown Esports, Brown University's gaming club of which I am co-president. Together, we collaborated and constructed overlays to be used with broadcasting on Twitch.tv -- and I made sure that they were modular, easy to use, and adaptable when used with OBS.
DEMO
WHY
The goal was to create excellent interfaces that provided a great viewer experience -- in order to persuade viewers to watch our content more easily, we need to provide the smoothest viewing environment.
Without great overlays and professionally managed and timed transitions, our club's potential for streaming success is deeply lowered.
​
Additionally, I wanted to create a simple downloadable package for all streamers for Brown Esports to use and adopt quickly and simply in their own OBS version.
Research and Feedback
When determining exactly what type of layout I thought would look best for BEST (Brown Esports), I decided that it would be best to look at what others in the industry constructed for their overlays.
​
As I have learned from various psychology courses, people like what is most familiar to them; therefore, a successful overlay is one that is familiar, but still unique. Thus, we set out to find an overlay that was familiar and common in the community, and then adapting it to be themed for BEST.
​
One such example is from the Big House 6, a Super Smash Bros. Melee Tournament.
​
​
​
​
I actually messaged the screenshot to the left to my design team, mentioning that I really liked the Big House's overlay.
Afterwards, we decided to match the color schemes of our Games@Brown logo, our more casual side of Brown Esports. The logic was that it felt less intimidating and very welcoming -- which is exactly what you want in a broadcast.
.png)
With this in mind, we decided to take the Big House overlay and adopt it to work with our theme.
In OBS, I set all of the text elements and sponsor slideshow, while making sure that each element stayed properly spaced and centered no matter the input.
Each element in the source list above is locked, so that any individual on our esports team could edit the scene without accidentally moving anything.
The most important portion of this overlay system lies in the fact that it is consistent across all screens. For example, when we swap from the above screen to the player cam screen below, the:
Player Right
Player Left
Stream Title
sources are all consistent across screens. This allows for seamless transitions during the broadcast that shows we care about consistency for our viewers.
Applying our overlays to Smash Ultimate
Although the above overlay is fantastic for Super Smash Bros Melee, it is problematic for the most recent iteration of the series, Super Smash Bros Ultimate.
​
Melee's resolution is SD, while Ultimate's is HD -- this means Ultimate will not fit nicely in the "box" for gameplay above.
​
SOLUTION:
​
We needed to construct another overlay suitable for HD games, but still themed with Brown Esports / Games@Brown in mind. Thus, again, we followed a similar solution as for the above overlay.
​
​
.png)
However, this design is not consistent with the player cam setup from the other overlay.
​
Look at the player cam boxes in both overlays. In the SD overlay, camera boxes are vertical, while the HD version's are horizontal. To make using the same cameras and orientations simple, consistent, and looking good, we then changed the box orientation to vertical for the HD version.
Now we're in business.
​
On December 8th, 2018, Brown Esports held a Super Smash Bros Ultimate invitational and decided to try out our new overlays.
​
On the first match, this is what it looked like in action:
This made me realize a crucial element of the designing process: you won't think of everything the first time, and testing a first draft can provide irreplaceable insight.
In Super Smash Bros, the pace of the game is determined by how high a players' "percent" is, as well as how many "stocks" they have.
​
The above overlay is covering one of the crucial elements of information for a good viewer experience:
the stock count.
In the bottom of the overlay, Meep and Tomoki's stocks (the little character icons under their names) are hidden!
​
After this first match, I immediately opened the overlay in Photoshop and removed the bottom portion of the overlay to provide this view information.
Now, the viewer is able to see all of the desired information, and understand the exact pacing of the match -- cleanly.
​
​
Conclusion / Takeaways
After this event, I found myself longing to broadcast again -- I discovered that running a broadcast well is extremely exciting, rewarding, and interesting. I also realized core components of the design process such as actively testing one's designs, making them consistent across each other, and designing for an audience's user experience.
​
​
When all elements of the broadcast, between designs, commentary, player cams, transitions, and properly timed scene swaps are put together, the below production happens.
Overall, any opportunity involving esports, broadcasting, or designing relating to all of the above is what I am particularly passionate about.
The experience above solidified my passion!