important links
about the project
I was brought on early in the planning process for the Super Smash Bros tournament, Tech Chase Tuesday, to design the brand identity and handle production and stream graphics for the tournament. Tech Chase Tuesday is held weekly in Henrietta, NY and runs a Super Smash Bros Ultimate bracket, along with a rotating list of other fighting games, including Super Smash Bros Melee and 64, Rivals of Aether, and Nickelodeon All-Star Brawl 2.
my role
- Creating a cohesive brand for the tournament
- Producing various graphic assets for print and digital
- Designing and developing a stream overlay tool with bespoke animations and interactive elements
- Developing graphics generators to help with event production
- Helping to run and promote the tournament
goals
Create a memorable and exciting visual identity for the tournament
Create a consistent feel across all of the graphics
Provide an interesting and dynamic experience for tournament viewers on Twitch
process
After joining the TCT team, I had a fairly short turnaround time to get a visual identity together in order to promote the tournament. I began by assembling a loose moodboard with potential directions for the graphics to go in. I was suggested a pastel color palette by one of the tournament organizers I was working with, but the rest of the direction was up to me.
After receiving the other tournament organizer’s opinions and feedback, I began to quickly iterate on an idea I had, which ended up being very similar to the final design.
solution
branding
The Tech Chase Tuesday brand identity borrows its shape language from the gameplay mechanic referenced in the name. In Smash, you can stop yourself from bouncing off of a surface you are knocked into by pressing a button in time, which is known as teching. This action has benefits, but can also potentially be predicted by your opponent in order to extend their combos against you. The scenario where you have to decide whether and how to tech is called a tech chase, which is where we got our name. Smash Ultimate has a very robust system of visual effects to indicate normally invisible actions, including teching and missing a tech. I used these effects to inspire the symbol language and colors of TCT. I chose the font Newake, by Indieground Design to create a cohesive retro look.
top 8 results graphics
Top 8 Graphics show the top placements in any given event at a tournament. I designed several different variations of this graphic, which I produce weekly for the tournament. In the event I am unable to, I built a generator in the p5.js JavaScript library to create a simplified version.
stream graphics
One of my favorite parts of working on TCT is creating the stream experience, a process involving graphic design, motion, and programming. I was responsible for creating all of the overlays for our Ultimate and Melee streams, which can be found on the Twitch channels AGNEclipse and RochesterSmash respectively.
To create Twitch overlays, I used a node.js-based tool built around the NodeCG graphics framework called SmashControl, built by a Smash player who formerly lived in Rochester. I created graphics in Illustrator and used CSS to format text inputs that could then be filled with a browser-based GUI and automatically updated in OBS. I also built custom JavaScript to automatically resize, reposition, and recolor elements. I also incorporated a Python script built by another member of the Upstate Smash community to pull previous set data between the players on stream, giving viewers more context for a given match.
I also used After Effects to create stinger transitions for the stream. Additionally, I animated the Pokemon Wooper, who became our mascot because of an inside joke, and now appears on our stream. Wooper wears an outfit that can be changed by viewers in the Twitch chat by using Twitch’s channel point reward system.
conclusion
Tech Chase Tuesday continues to be one of my favorite projects to work on, as it allows to me to put my skills across many disciplines to work. I was able to be a part of the project from the beginning, building up the brand identity from scratch, and then bringing in my skills with motion design, UI, programming, and more to create a full tournament experience. In particular, I am proud of my growth in creative use of web design skills to create designs in a new context other than the traditional form of the webpage. I feel my skill in CSS, JavaScript, and jQuery have improved a lot as a result. It has also exposed me to Python and node.js, which are more beyond my comfort zone as a front end dev, but I was able to make it work.
I continue to work on Tech Chase Tuesday as a designer and tournament organizer, and have continuously updated the graphics and added many new features to stream overtime, creating, in my admittedly biased opinion, one of the best looking tournaments on a local scale. I’m looking forward to making TCT even better in the future.
