Facebook’s ‘Capture the Flag’ Game Design

The Challenge

Facebook approached Tank with a challenge — they needed a new approach in providing InfoSec resources to students and industry professionals trying to get more hands-on experience. They had previously developed a Capture the Flag competition platform, but it required their engineering staff to travel the world physically hosting the events. As the demand for the platform increased, Facebook knew they needed a better solution.

With a prototype developed, Facebook approached Tank to completely revamp their CTF experience to be more user-friendly, scalable and accessible by a broader community.

What We Did

Our UX team began by researching the history of CTF competitions, looking at the different types of CTF game formats, from attack-defined to challenge.

Next, we considered each audience and their style of gameplay as well as the primary tasks they were likely to perform. By identifying the audiences’ needs across the CTF engagement life cycle, we were able to help shape a flexible platform, distinguishing key requirements and engagement concepts that had the potential to enhance the overall experience.

Once the foundation was established, we turned our attention to the visual presentation of the game board. Knowing that the end product would be used across various organizations, Facebook did not want the UI to reflect traditional Facebook branding. Instead, the end look and feel needed to be familiar to the existing CTF community and approachable to new users. Tank was able to rethink the dashboard and gameplay, enabling it to mimic computer gaming and simplify gameplay navigation. 

Upon completion of the Discovery phase, we noticed that experienced users desired a quick solution that eliminated the need of the map interface. With this insight, Tank developed an interface that had all the functionality of the map interface while allowing users to navigate content in an efficient visual system.

With an open-source platform, it was essential to make sure all touchpoints were reflective of the visual look and feel of the game. At the same time, the platform needed to maintain a low barrier of entry for novice competitors and organizers. Nowhere was this more important than in the admin panel. With simplicity the priority, Tank worked with Facebook to create a new UX and UI for the administrator panel, improving the flow and organization of content, allowing all experience levels to host and run independent CTF competitions.

The portal is used as an entry point for all competitors. With lack of career visibility and understanding being a central issue faced by those looking to enter the InfoSec industry, the portal is also used as an awareness tool, containing all non-game play information.

CTF competitions are not only held at the collegiate level but across a variety of institutions drawing awareness at an early age. With this in mind, the portal contains educational information such as Facebook job listings within the InfoSec department, career descriptions and videos, and practice quizzes for each career path. To increase the educational value, Tank created a blog where players can post and learn about past challenges to find solutions post-competition.

Knowing that Facebook hosts CTF competitions of all sizes, Tank developed and produced a scalable icon system that includes over 200 icons. Due to the diverse demographics of the CTF players, Tank created a variety of icons that appeal to a wide range of audiences.

Results

In the first 12 hours alone, over 40,000 people viewed the repo page and several thousand spun up sessions to play.

The CTF went on to rank in the top 5% of overall engagement for any product or service ever open-sourced by Facebook. This success in engagement was visualized through uses in internal employee training, competition practice, and skill benchmarking with players from Fortune500 companies to military reserve units to universities and schools throughout the world.

Through a robust UX and design study, Tank conceived and developed various gameplay modes, an administrator portal and a user portal for increased engagement. The result? The game is one of the highest engaged products or services Facebook has open-sourced. Since launching, the game has been used by institutions and organizations of all sizes.