Cyber Magic

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. Currently, the game is a work in progress.

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.

UI AND UX DESIGN

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).

01. Get on the flying school bus
02. Answer 5 team-sorting questions

03. View tips about cyber security knowledge where loading
04. Navigate to different mini-games by clicking on different rooms

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 we 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 makes the table show up along side the screen.

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 different expressions of a monster provide feedbacks and give players the chance to learn by doing.

PROFESSOR KOH’S OFFICE HOURS

Each time the player successfully completes a mini-game, they unlock some new content in Professor Koh’s office. They can tap on Professor Koh on the school map and check out the cyber security concepts related to the game they just played.

WHAT’S MORE

Meanwhile, we are still working on our third and fourth mini-games and more content of the game wrapper. The complete game is going to be launched for the 2022 picoCTF.