Photo by Homero Cavazos

King Pong

Fame. Glory. Beer.

Ping pong is an important part of our daily routine here at thirteen23. There’s hardly an afternoon in our office where you aren’t required to dodge the occasional rogue ping pong ball while eating lunch. So when the guys at King Pong approached us to host their fourth annual Austin-wide creative agency ping pong tournament, we rallied our paddles and accepted.

However, we didn’t just want to host King Pong — we wanted to shake it up a bit. With a completely open door and two months to push out whatever we could dream up, we set out to create pieces that would be interesting and functional, all while staying true to who we are as a creative digital agency.

The Website

When we weren’t practicing our serves, we were working on a website for the event. After tossing around a couple of ideas (read: gorilla illustrations), we finally decided to design and build a website that took advantage of what gets us excited about practically anything: information.

Then I hit the books (or, well, the Internet), turning up every fact I could about ping pong in an effort to create an infographic-focused site that would be every bit informative as it was engaging.

Through a combination of real ping pong facts, information from past King Pong tournaments, and some hypothesized charts, I eventually landed on a design made up of infographic tiles that could be subtly animated. In order to make things easier during the development phase of the project, all of the assets were created in Illustrator, so they could be easily manipulated and animated.

Visit the site at kingpong.thirteen23.com.

Sketching ideas for the infographic tiles // One of the final animations from the site // Small detail of the site

The Scoring App

After talking with the King Pong co-founders, we quickly realized that between organizing volunteers, coordinating competitors, and making sure the kegs stayed full, King Pong could get a bit, well, chaotic.

With that in mind, we set out to make a real-time interactive scoring app that would make scorekeeping easy on King Pong’s volunteers and keep the bracket organized for competitors.

We initially designed the app with a solo user in mind and filled the app with information about individual games. However, we quickly realized that we should instead appeal to a slightly larger audience and focus on providing broader information about the entire tournament. The result was a bold, easy-to-digest app that could be quickly adopted by volunteers and easily understood by attendees.

Using Firebase, we created a network of six iPads running our King Pong app. Once a game score was committed by a scorekeeper in the system, it was immediately reflected in the bracket system that we projected on a nearby screen. Through this, attendees could easily keep up with the brackets, while competitors could see when they were up next. We were also able to use this to convey real-time score results during the final rounds.

The full bracket system // A referee using the iPad app // Large view of the score

Tournament Night

Although we didn’t get to keep any of the paddle trophies we designed (it was the lighting, we swear!), we did get to flex our web animation muscles and leverage technology systems for use during real-time events, which is pretty awesome. I think they’re still making our “Biggest Geeks at the Tournament” trophy. But hey, we have a whole year to practice our ping pong skills, so we’re sure to get further in the competition next year…

Official t-shirts and paddles // Our office in King Pong mode — three tables were set up side-by-side for extra tense gameplay. Photos by Homero Cavazos.

Find us on Facebook and Twitter or get in touch at thirteen23.com.