Designing the Game of Tweets

In the past few months, I had been working on a public visualization called “Game of Tweets” to be displayed in the social area at Twitter #flight conference. This was part of a joint project between several Twitter employees in San Francisco and the Gnip team in Colorado, with design help from Dfuzr Industries.

The final visualization can be seen in the video demo and images below.

A screenshot of the Game of Tweets. This was intended to be displayed on a touch screen, so users can press the buttons.

Physical Installation: It was displayed on a TV grid in the hallway and a panel of LED boards in the social area.

Before reaching this stage above, there were many iterations and changes in directions that happened during the development. I believe that the experience in the design process are also valuable and worth sharing. It also reminds us to appreciate not just the final outcome, but also the thoughts and labor that were put into. Therefore, in this blog post, I would like to share the story about how it was developed.

The beginning

One afternoon in June, we had a brainstorming session with one goal:

Make data come alive.

It was a productive meeting with a lot of inspirations. At the end of this meeting, each of us picked up some seed ideas to build on. My seeds were about gaming and encouraging audience’s participations. I usually build more serious visualizations, i.e. visual analytics tool for data exploration, so this event was a good chance to try something playful and creative. First I was thinking about Monopoly that users can play by tweeting. Then I watched too much Game of Thrones at that time and wanted to make something battle-related.

First mock-up

In the following meeting, I made this mock-up in Photoshop to demonstrate the idea. At that time, the plan was to have each attendee assigned to a particular team, which is named after Twitter product in Game-of-Thrones-esque way and encouraged them to fight for their team in a massive multiplayer game via tweeting. The rewards for top players would be seeing their names on the game board around the conference venue, unlimited bragging rights and perhaps some gifts.

First prototype

I spent a few days to build the first game engine. The game board was simplified to an n x n square with each team starting from each corner. After that, I learnt how to feed live tweets from Gnip PowerTrack into it to drive simulation. I also built the game board visualization and displayed it on the big screen in a common area near my desk to see colleagues’ reactions.

The game engine processed Tweets to parse the intent of the users, in particular, which cell to attack. For example, “@tweetgame Attack C1”

Reality check and pivoting

That didn’t work out well. As many were concerned, user activities were low. Tweeting with precise position were awkward and required too much attention for passerby audience. There was also some latency (~10–20s) from the time a user sent a Tweet to the time it appeared on the screen. With all these contributing factors, the board was mostly inactive.

To ensure that the board was always active. I started feeding streams of Tweets for each team, for example, any Tweets with keyword “run” for Mopub Run, Tweets with keyword “rock” for Crashlytics Rock, and so on. These Tweets were given lower attack point (1 soldier) compared to attendee’s Tweet (100 soldier). For each Tweet, the game engine then picked any region adjacent to the border of its team to attack, creating a new battle or join existing one. At the end of each round (30s), the battles were resolved and the sides with more soldier claimed the region.

Attendee’s Tweets were enhanced and displayed as swords on the screen, making it look more powerful and distinctive. There were also lists of “most tactical”, “most ferocious” and “most generous” knights to reward highly active players.

Live Tweets were added to continuously support each team. Attendee’s participation were escalated to be more powerful and represented as swords on the screen.

At this point, I started to realize that watching the Tweet streams fight by themselves were somewhat joyful to watch, even without human participation. I toyed with different hashtags and enjoyed guessing which one would dominate. As a result, I took a step back and abandoned the idea of having product-specific teams, changing the four teams into any four given hashtags. Pre-assignment of attendees equally into teams was also not necessary anymore.

I also introduced the limit of 30 rounds for each game. At the end of each game, the team with most number of regions is declared as the winner. After that, another set of hashtags are selected to start a new game, providing a different experience.

Instead of having a fixed set of teams, this was changed to a set of hashtags competing for domination.

Direct participation

Early in the development, I made a debugger which let me injected fake Tweets into the stream to simulate attendee’s Tweets without sending real Tweets from my personal account. One day, I was looking at a game between #happy, #sad, #angry and #lazy. #happy was about to eliminate #lazy, so I wanted to help #lazy just for fun and spammed the button to inject many fake #lazy Tweets. This felt actually fun and inspired me to add the buttons to the screen, so attendees could participate and support the hashtags they wanted very easily (via the touchscreen).

The buttons for sending reinforcements were added to the bottom left corner.

After these changes, the reaction to the large display in our local area was different. People sometimes mentioned that some hashtags were crushing it, or occasionally walked to the screen and spam the reinforcement buttons.

Remote control

To surprise people who were watching the screen, I created a mobile version of the controls, so I could magically add the Tweets and see their reactions.

In one meeting, I mentioned this remote control and there was a suggestion from the team to make this available to the audience. The QR code that points to the remote control was therefore added. I also made the message for these fake Tweets more playful, using Twitter-ized famous quotes as the messages.

Polishing

After this was mostly about styling to fit #flight theme and making sure that it will look nice on the TV grid display and plays well with other visualizations we are showcasing. This was done with help from Dfuzr team. I also had to build a separate game board with different colors and effects to make it work for the LED display by NVE, who organized the event.

Lastly

This was a fun design exercise. I am usually more of a scientist than an artist, but I felt that the final work suited the intention to “make data come alive” quite well, in a playful way. The most rewarding moment for me was on the conference day when I saw attendees interacted with it.

I hope these shared experience are more or less useful to the readers. Even though it does not look that complicated, you now learn that it has evolved through so many iterations (and definitely can be improved further). Having feedback from peers and observing how potential users use the prototype are super important in iterative design process. Thank you for reading and feel free to leave me comments or share this article with others.