Katatlyst: Introductory to picoCTF 2022

Katalyst is an interactive onboarding experience designed to help users build foundational knowledge and confidence in a complex domain. Developed in collaboration with Carnegie Mellon University CyLab, the project supports new learners entering the picoCTF cybersecurity competition.

Responsibilities

As the sole UI/UX designer on a five-person team, I led the end-to-end experience design, creating the interface system and interaction patterns that guided users from initial exposure to applied problem solving.

Client

Carnegie Mellon University Cylab

Timeframe

2021

Category

Learning experience, WebGL, gamification

Problem

New participants entering the picoCTF cybersecurity competition struggled to get started.

They were expected to understand unfamiliar concepts (e.g., encoding, command-line tools, logic puzzles) and apply them quickly, but existing onboarding relied heavily on text-based explanations and external resources.

Goal

Design an interactive onboarding experience that helps new picoCTF participants quickly understand and apply core cybersecurity concepts, lowering the barrier to entry and building confidence to engage with real challenges.

Approach

The experience began with an introductory scene that established the game’s atmosphere and immersed players in a world of cyber magic. Players assumed the role of new students at the picoCTF School, where they began learning the fundamentals of “casting magic” — a metaphor for coding and cybersecurity concepts.

Designing a Guided Learning System

Rather than presenting content passively, I structured the experience as an integrated system of exploration and feedback, including:

A central navigation hub
Modular learning units (mini-experiences)
Contextual support resources
A transition path to real-world application

This system allowed users to learn, practice, and apply knowledge within a single continuous flow.

Introductory Scene

Click to get on the flying school bus

Answer 5 team-sorting questions

Loading Screen

I also leveraged the loading screens to reduce user anxiety and communicate helpful contextual information during transition moments.

Navigation Map

I designed the navigation system to balance exploration with clear progress tracking.

A central map provided spatial organization, while persistent progress indicators and per-module performance records gave users visibility into both overall advancement and individual improvement.

This dual-layer feedback system encouraged users to revisit challenges, supporting iterative learning rather than one-time completion.

Reducing Cognitive Load Through Contextual Guidance

To support beginners, I focused on making interactions self-explanatory and low-friction:

Chapter 1. Room Escape

Clear affordances

Interactive elements were visually highlighted to signal actionability

Progressive disclosure

Information was revealed at the moment it was needed

Embedded references

Key resources (e.g., lookup tables) were accessible without disrupting the task flow

Supporting Learning Through Feedback Loops

To support beginners, I focused on making interactions self-explanatory and low-friction:

Chapter 2. Cookie Machine

Command-line Metaphor

I designed the control panel to reflect the logic of a command-line interface, translating a technical workflow into an approachable, interactive system.

By experimenting with different input combinations, users learn how structured commands produce outcomes—building intuition for concepts they will later encounter in real-world tools.

Feedbacks Loops

Immediate visual responses to correct vs. incorrect inputs
Clear state changes that communicate outcomes
Time-based feedback to reinforce urgency and iteration

This allowed users to form mental models through experimentation, rather than relying solely on instruction.

Bridging Conceptual Understanding and Interaction

To make abstract concepts more accessible, I translated them into intuitive interaction models:

Chapter 3. Connecting Magic Circuit

Circuit Metaphor

To make abstract concepts more accessible, I translated them into intuitive interaction models:

System behaviors were mapped to familiar metaphors (e.g., structured input systems)
Problem-solving tasks were broken into step-by-step interactions
Visual cues guided users toward valid actions, reducing ambiguity

This approach enabled users to learn complex ideas through direct manipulation and exploration.

Iteration Through Playtesting Insights

Playtesting revealed that the “Connecting Circuit” module posed the greatest challenge for users.

While increased time spent on later levels (4–5) aligned with expected difficulty, a key issue emerged: many users struggled even at Level 1, where core mechanics were first introduced. Participants showed visible frustration, often pausing or experimenting without clear direction.

This indicated that the challenge was not purely difficulty-related, but rooted in a lack of initial understanding of the system’s interaction logic.

This insight reframed the design problem:

How might the interface guide users to understand underlying mechanics, rather than leaving them to infer the rules through trial and error?

Translating Insights into Clear Interaction Guidance

In early prototypes, I relied primarily on shape cues to help users associate components and determine valid placements. However, playtesting revealed that this approach did not provide enough clarity for first-time users to understand the system’s logic.

To address this, I redesigned the interaction to introduce step-by-step guidance directly within the interface.

Added hover and pressed states to clearly signal interactivity and selection
Highlighted valid placement locations upon selection, narrowing available actions
Refined visual differentiation (e.g., color matching) to strengthen component relationships

These changes transformed the interaction from open-ended exploration into a guided sequence of decisions.

By progressively revealing valid actions at each step, the system reduces cognitive load and helps users focus on understanding how the mechanics work, rather than guessing what to do next.

Chapter 4. Brewing Potion

Designing for Learning Through Interaction

I approached the experience as a learning system, where engagement and comprehension needed to work together.

Instead of separating instruction from interaction, I designed the interface so that system behaviors directly reflect underlying concepts—allowing users to learn through doing, rather than being told.

Around Game Experience

Progressive Learning Through Unlocks

Each completed mini-game unlocked new content in the Office Hours section, where players could explore the cybersecurity concepts behind the challenge and deepen their understanding.

The Bulletin Board

After learning cybersecurity concepts through mini-games and Office Hours, players were directed to related questions on the picoCTF website, allowing them to apply their knowledge to real competition challenges.

Impact

Successfully launched alongside picoCTF 2022, which attracted over 18,000+ participants, marking a notable increase in engagement compared to surrounding years
Improved accessibility for beginners entering a highly technical domain
Demonstrated strong engagement, with users continuing to request access after the event

The project shows how UX design can go beyond usability to actively support learning, confidence-building, and long-term engagement.

Successfully launched alongside picoCTF 2022, which attracted over 18,000+ participants, marking a notable increase in engagement compared to surrounding years
Improved accessibility for beginners entering a highly technical domain
Demonstrated strong engagement, with users continuing to request access after the event

The project shows how UX design can go beyond usability to actively support learning, confidence-building, and long-term engagement.

Here is an article about our game: https://www.cylab.cmu.edu/news/2021/12/17-katalyst.html

Some of my other work

Decision support, engagement

Team Planner Redesign

2022-2025

Task management app

Switch-it

2020

Game mode

Call of Duty Mobile

2021

Tianying Lyu

Tianying Lyu

Tianying Lyu

Katatlyst: Introductory to picoCTF 2022

Impact

Some of my other work

Team Planner Redesign

Switch-it

Switch-it

Call of Duty Mobile

Call of Duty Mobile

Hit me up if you have a project in mind or would like to chat

Hit me up if you have a project in mind or would like to chat