Capture the Flag Game
In this twist on traditional CTF, I was responsible for the full end to end design of this platform. It targets new users with an interest in AI Safety as well as AI experts to form an AI Safety community. The game itself prompts users to use any attack methods to try and "hack" the model by having it return dangerous prompts.
This project is ongoing and always being improved. I focus on the original version I designed, but to see how it looks right now check it out here!
Role:
Product Designer
Team:
1 PM, 2 Engineers, 1 Ops, 1 AI Engineer
Duration:
Sep 2023 - Present
Tools:
Figma, React
Game Design
With collaboration of an AI Engineer, we designed the game centers around a chatbot like interaction, where users try to get the model to return a prompt.
The gameplay design is very simple, I used a familiar interface when interacting with AI: a chat. The user types their attack and the model returns their response, then our judge model evaluates the response to determine whether or not the user has passed the level.
Platform Design Process
My first step was to understand how CTF works. As this CTF is geared towards AI enthusiasts rather than traditional hacking, this meant creating an experience that was easy to understand for people who have never come across these challenges before.
I conducted user interviews with data scientists and AI engineers, to learn more about how they would approach "hacking" a model. From there, I created user flows, personas, and wireframes.
Entry Point
Because of the unfamiliarity of a challenge like this and the need to grow this into a bigger community, I felt it was necessary to create a home page that gave new users a clear explanation on how this platform works.
However, after A/B testing, I chose to go with a more straightforward design: eliminating the home page entirely and making the challenges accessible directly through the home page. While the home page was more visually appealing, it didn't seem to add significantly to the users overall understanding of the platform. Jumping straight into the challenges onboarded the users faster.
Forum Design
After launching the initial design and getting some activity, it felt necessary to create a forum so users could discuss their strategies on the platform directly, boosting the community aspect of this project.
Designing the forum turned out to be a bigger challenge than expected. Thinking about how to clearly nest infinite comments was a unique challenge, and I turned to many existing forums for inspiration on how they solved this difficult problem.
Mobile Design
While the initial research suggested that the types of users playing our game would not be on their phones, since it is a web based website, I created designs for mobile to ensure that if someone did encounter the website on their phone they would have just a good an experience as on a computer.
Style Guide
This project required a lot of illustration! Definitely one of the hardest parts, but I'm happy with how everything turned out!
Prototype
Here's an early version prototype of the CTF design. This version was the initial version shipped to engineers that didn't include the updated home page and inclusion of forum and other features. However, the core of the design is much the same and design style stays consistent to this day!
Takeaways
This project helped me develop game design thinking. The fun illustrations and community aspects of the project made it a fun project to work on in the midst of more serious platform designs. Since the initial design, we've added a lot of new features to the game but the initial user research and design backbone remain the same.
To give it a try check it out here!