This is a client object in collaboration with Carnegie Mellon University Cylab. In a team of 5, we are creating an introductory game to be used in picoCTF 2022, a cyber security competition.
As the only UI/UX designer and artist in the team, I take the responsibility to design the UX experience and create all UI and art assets for building this world.
Role: UI/UX designer and Game Artist
Team: Project team at CMU ETC. 1 Game Designer, 1 Producer, 1 UI/UX Designer & Artist, 2 Programmers
Deliverables: A WebGL game that’s going to be launched through picoCTF’s website.
Tools: Sketch, Adobe Illustrator, Adobe Photoshop, Unity Engine
Development time: 5 months (In-progress)
WHAT WE ARE DOING
This web-based game will engage students in the concepts that they will encounter in the picoCTF cybersecurity competition.
The game has different sections including a navigation map, 4 mini games, the office hours, and the bulletin board.
Together, they form a whole ecosystem to connect the game with the picoCTF competition
INTRODUCTORY SCENE
The game experience starts with a introductory scene to set up the atmosphere and invite players into the world of cyber magic. By getting on the flying bus, the player becomes a student of picoCTF school to learn the basics of casting magic (coding).
LOADING SCREEN
I also take full advantage of the loading screen to ease out the anxiety and give out information.
NAVIGATION MAP
By tapping on the map, players can navigate to different area of school to try out different game content.
Points system
On the upper right corner of the map, players can see the points they’ve got.
Under different mini-game titles, they can view their current record.
This design encourages players and provides a way to measure their performance, especially since some of our games are very replayable, and players can always aim for the better record and have fun.
GAME 1: ROOM ESCAPE
In this game, players can find clues by interacting with objects inside the room, decode the information and escape. It gives the player an idea about ASCII code.
Problem 1
Solution
All interactive objects are in light color in contrast to the dark background. The hover state is implemented to give the player more confidence in clicking on them.
Problem 2
Solution
Decoding might be troublesome, so I design to streamline the process!
Once the player picks up the ASCII table, they can always access it from the book icon on the upper right corner, which pulls out the table from side of the screen. Therefore, players can easily take it as a reference for decoding.
GAME 2: COOKIE CREATURES
In this game, players use the magical control panel on the bottom of the screen to make cookies and feed the monsters. Different monsters come with different appetites, so players are to figure out how the recipes work.
Problem 1
Solution
The interface of this control panel mimics the real-life command line tool, which eases players into the concepts that will be used in the picoCTF competition.
I design this panel so that players can use the command column and two argument columns to prepare ingredients to be put inside the cookie machine, bake them into cookies, and transfer cookies into the correct conveyor belt for monsters waiting in the line. Message that shows up above the Cast Spell button can help players better understand the process.
Problem 2
Solution
When the correct cookie is served, the monster eats happily; When the wrong cookie is served, the monster looks confused; When the correct cookie isn’t served on time, the monster waiting for it appears to be angry and leaves.
The differentiated feedbacks give players the chance to learn by doing.
GAME 3: CONNECTING MAGIC
In programming, variables are placeholders which can be altered and retrieved as necessary. To play with this concept, players assign numbers to certain jigsaw placeholders, and move around the jigsaw pieces to let the magic source flow into the designated endpoint and hit its target value.
Connecting Circuit is reported as our most challenging mini-game during playtest.
Despite of spending more time in Level 4 and 5 of this game, which are the harder levels, playtesters also tend to struggle in the first level, during which many of them showed frustration trying to figure out how the different components work.
It brings up the following challenge…
Problem
Solution
In the earlier prototypes, I used shape to let players make association and identify which components should go where, but it wasn’t enough. Other than fixing the color match, I improve the clarity by adding hover and pressed states to each interactive jigsaw component and highlight where it can be put in once the player select a component.
This design breaks down the guidance into separate interaction steps and makes it easier for players to understand by limiting their options.
It receives very positive feedback in later playtests.
GAME 4: BREWING POTIONS
In Mini-game 4, players are using spells to make potions. The blank space in the potion-making sheet is limited, so they have to prepare a more efficient spell by moving around procedure blocks and utilizing the loop tool.
I continue with the approach from Game 3 to highlight where the interactive component can possibly be put in once it’s pressed.
Therefore, the interface remains clear and consistent without interfering with players’ sense of freedom. They can focus on solving the real puzzle challenge with the guidance from interface.
Problem
Solution
The game is not merely an entertaining product. We aim to also introduce some cyber-security concepts in the same time when players are having fun. This is a rare challenge, but every details in UI/UX is designed based upon the basics of cyber-security and programming.
We also implement a live animation to showcase what impact the players make when they put things down on the potion-making sheet. Therefore they can get reinforced on how statement and looping works.
PROFESSOR KOH’S OFFICE HOURS
Once player complete one mini game, they can unlock new content in the Office Hours that covers the related cyber security concept.
THE BULLETIN BOARD
Players can also get access to the related questions on the picoCTF website. So when they understand how certain concept works through the mini-games and Office Hours, this is where they can dive in more and try out the picoCTF competition questions.
WHAT’S NEXT
Our game is completed by Dec 7th. The CMU Cylab are currently working on the server and will be launching the game soon for the 2022 picoCTF.
The following is an article about our work:
