Bringing Ping Pong Into The Future
At Eight Bit Studios, we’re really good at two things: solving problems through digital products, and playing ping pong. Taking a break for a quick game or two is a core part of our company culture, and for good reason. Ping pong (professionals call it ‘table tennis’; we are not professionals) is a great way for us to stay active in an office environment. It gets the blood flowing and gives your mind a much-needed break every now and then. We think everyone should play ping pong at work, or their dorm, or at home, or in the park, or at a bar — basically, everyone should play ping pong, wherever they can.
Being the intrepid problem solvers that we are, we decided to take a look at our beloved game to see if we could improve the experience of playing using technology. Here’s how we did it.
Getting the Ball Rolling
We assembled a small team and got to work. Immediately there were a few problems we knew needed to be solved. Keeping track of both score and who is serving has historically been a pain point for us and, as with everything else in our lives, we would rather make a computer do that for us. We also wanted a way to record wins and losses over time, and the ability to rank players based on their performance. Some sort of board for leaders, if you will.
We didn’t want to force players to walk away from the table in order to update their score, so we decided to add buttons to our table, one at each end. Whenever a team scored, they would be able to simply press the button and the scoreboard would update automatically, easy-peasy. After some exploration, we found some Bluetooth-enabled adhesive buttons that fit our needs perfectly.
At this point, we had the basic product outlined. But there was still so much more we knew we could add to the experience. So we put out a call for suggestions. We created a brainstorm using Candor, an awesome tool we developed to streamline collaborative brainstorming, asking the question, “what features would you like to see in our ping pong app?” and sent it out to the entire company.
We got a lot of responses. Way more than we expected, in fact. Some of the ideas were pretty wild, such as tracking the ball using a depth sensor and automatically updating the score (a feature we would still love to implement, by the way). Others were more grounded, such as giving players the ability to set a custom avatar for themselves. We separated the suggestions based on category (administrative features, interactions, fun stuff, etc.) and on ease of implementation. Although we would have liked to add everything, we knew we needed to prioritize in order to get the project done.
Serving it Up
Once we had a sense of what features we wanted to implement in Version 1, we got to work defining the overall structure of the interface. Mostly consisting of whiteboard sketches, this was a crucial part of the process. We knew early on that we would run the app on a tablet such as an iPad, so we could assume the screen would be roughly a certain size. But players wouldn’t be holding the tablet, it would be mounted near the table. So we needed to ensure interactions within the app were easy to perform from a standing position and that information throughout was clearly legible. During gameplay users would be even farther from the screen — as much as several feet — and we needed to design a scoreboard experience that could be read and understood at a distance.
Interactions within the app were also important to consider, and we had a lot of questions to answer. How do you select a player? How do you choose the team that player belongs to? How do we structure the list of players so it’s easy to find someone? What information do we show to players at any given time? Quick sketch sessions allowed us to visualize concepts quickly to assess their effectiveness. We needed the app to be intuitive, and we wanted it to be enjoyable.
Returning the Shot
Once we had a fairly strong idea of the overall structure of the app, we were ready to move on to high-fidelity designs. Our initial instinct was to brand the app similar to other sports-related media such as products from Nike or ESPN’s network graphics. But rather than follow the conventional path, we decided on a direction that was a little more ‘us.’ We found inspiration in the interfaces of video games from the 1990s, which usually featured chunky graphics and shiny metallic accents. For an internal-use project such as this, it was the perfect opportunity to be a bit outlandish in our designs.
The video game inspiration was more than just skin-deep. In an effort to make the experience as intuitive and fun as possible, interaction patterns were also modeled after video game interfaces. Our player select screen, for example, was inspired by head-to-head fighting games such as Super Smash Bros. and Street Fighter. Players are each listed as tiles, with large avatars above names. Tapping on a player allows them to be assigned to one of four slots in the trays below, two for each team (team names in this version are based on company in-jokes, though they may soon change to a more straightforward ‘home’ and ‘away’). And a large, distinct button right in the middle starts the game.
Before the game starts, players must determine who will be serving first. An exciting ‘head to head’ screen is displayed, prompting players to press one of two buttons situated at either end of the table in order to indicate the side that starts with the ball.
Once the game has started, a scoreboard is displayed. The scoreboard is broken up into three panels, a box for each team and a marquee below. Within each team’s box is their score and player avatars. For the serving team, a message indicating as such and a serve counter is also displayed in their box.
The marquee’s contents change based on game state, similar to the jumbotron at a sporting event. There are dozens of game states available in the marquee such as EQUALIZER (tie game), RESPECTABLE (the losing team reached 10 points), and GAME POINT (one team has the possibility of winning if they earn the next point). These visuals add a bit of fun and excitement to the game, and also sometimes provide some fodder for trash talk.
It’s pretty rare for anyone around here to play just one game of ping pong. It’s an unwritten rule that every match consists of two games, with a possible third tie-breaker. Re-selecting all four players after every round creates friction that discourages continued of the app, so we added a large ‘rematch’ button to the win screen that automatically swaps teams to the other sides of the table and starts a new game. This makes it much easier to continue our heated battles.
Of course, what’s the point of keeping track of scores if we can’t rub them in each other’s faces? We added a leaderboard to the app to track wins and losses and rank players by how well they perform.
Grabbing the Win
The project was then built as a web app using React, which allows for easy deployment and testing. Native CSS transitions are paired with animated backgrounds in order to provide a dynamic and seamless experience. And a simple administrative interface allows for easy management of players and game data.
Even though the project was designed to fuel our own ping pong needs, we know it can be taken further. This is a game that appeals to everyone, and we want to share our tech. So we implemented a system that allows tables to be grouped under organizations, enabling us to test the app in multiple locations while keeping game data separate.
Time for a Rematch
So what’s next for our app? Ping pong is a great way to stay active, and we want to encourage others to get up and play. We think the best way to do that is to connect people. Just as multiplayer video games encourage players to keep competing, trying for a high score and comparing their skills with friends, we’ve built a platform that could be used to do the same for ping pong. So we’re planning features to enable a global network of players, allowing them to play on any table, anywhere, all while keeping track of their stats and scores.
By leveraging magical technology from the future such as Bluetooth and The Internet, we’ve taken the experience of playing ping pong to the next level. It’s more exciting and engaging than ever, and it has allowed us to bring together our passion for making great digital products with our love of games.
