Escape The Breach

DESIGNER’S STATEMENT

I built this on my phone. That’s not a humble brag — it’s the point. I wanted to understand what agentic AI collaboration actually feels like in practice, not in theory. What I found is that the design thinking didn’t change. The question of what a learner needs to experience to actually change their behavior — that’s still entirely human work. What changed is how fast I could get from “I have an idea” to “I have something playable.” Escape the Breach is the answer to: what if the gap between instructional design and interactive development just… closed?

Escape the Breach is framed for a broad portfolio audience: corporate L&D directors, higher ed instructional design leaders, and consulting clients. That’s not a footnote. That’s the headline.

Five Zones. Ten Minutes. One Cyberattack to Stop.

The Hardest Part? Getting the AI to See What You See.

The logic and code for this project came together quickly. Five zones, branching decisions, a countdown timer, penalties, score tracking, and a dynamic end screen — all scaffolded in a fraction of the time traditional development would require.

The visual work was another story.

A monitor stand rendered wildly off-center. A USB drive that dwarfed the lunch bag and soda can beside it. Text dissolving into the background. A timer tucked where no player would ever find it. These weren’t code failures — the logic ran fine. But the scene didn’t make sense to a human eye, and AI has no way to know that without being told. Every correction required stopping, looking, and describing the problem precisely enough for Claude to act on it. Most of the time invested in this project lived in that loop.

For students and new AI collaborators, that’s the real lesson: the collaboration muscle matters as much as the prompt. AI moves fast. Humans still have to look.

As a deliverable, Escape the Breach fits naturally as a follow-up to live security training, a refresher before annual IT policy reviews, or a low-stakes way to keep concepts front of mind between formal cycles. Because it lives as a single HTML file, there’s almost no friction in deployment — share a link, play it on a laptop or phone, no app or LMS enrollment required. For lightweight tracking, learners can screenshot their results screen.

This version is a proof of concept, not a finished product. If it were headed into large-scale deployment, the next stop would be Storyline — tighter branching, xAPI tracking, and a level-up in production polish. The bones are strong and the scenarios are sound. What would change is the finish.

For the purpose it serves here — demonstrating rapid AI-assisted development and the instructional design thinking underneath — it does exactly what it needs to do.

THE BUILD STORY

Built on a Phone. With AI. From Scratch.

Escape the Breach was designed and built entirely on a mobile device using Claude as an agentic development partner. No desktop IDE. No pre-built game template. No prior React experience required. The entire codebase — game logic, zone navigation, timer system, feedback overlays, responsive mobile layout — was produced through an iterative collaboration between instructional design thinking and AI-assisted development.

This matters for two reasons. First, it demonstrates what’s now possible for instructional designers who understand how to direct AI tools effectively — the gap between “I have an idea” and “I have a working prototype” has collapsed dramatically. Second, it’s a proof of concept for rapid, low-cost development of interactive learning experiences that previously required a dedicated developer.

What “Agentic AI” Means in Practice

The design process worked like this: instructional design decisions — what threat scenarios to include, how the feedback should be framed, what consequence felt fair without being punitive — were made by the designer. Implementation decisions — how to structure the React component tree, how to handle state across zones, how to render the mobile UI — were handled by Claude iterating on working code in real time.

The result is a production-quality interactive experience that reflects genuine instructional design expertise, built without a traditional development workflow. The designer directed. The AI executed. The distinction matters.

PROJECT METADATA TABLE

Overview Item	Description
Type	Interactive HTML5 Game | Mobile-First Escape Room
Duration	~10 minutes (5 zones, 10-minute countdown timer)
Audience	Corporate employees | Adaptable for higher ed or onboarding contexts
Topic	Cybersecurity awareness — phishing, USB threats, rogue WiFi, social engineering, MFA
Tools Used	React 18, Babel, custom CSS — built via agentic AI collaboration (Claude)
Build Method	Designed and built on mobile using Claude as agentic development partner
Deliverable	Self-contained HTML file — runs in any browser, no installation required
Status	Zones 1–2 complete and playable | Zones 3–5 in development
Role	Instructional Designer, Game Designer, Prompt Engineer, AI Collaboration Lead

PROJECT OVERVIEW

The Challenge

Cybersecurity awareness training has a reputation problem. Click-through compliance modules produce compliance, not behavior change. Employees learn to complete the training, not to recognize threats. The design challenge isn’t content — it’s engagement. How do you create a training experience compelling enough that someone actually thinks while they’re in it?

The Solution

Escape the Breach drops the learner into a cyberattack already in progress. You have ten minutes and five zones to navigate before the building locks down. Every decision — which emails to flag, whether to plug in a USB, which WiFi network to trust — mirrors a real threat scenario with real consequences: wrong answers cost you time. The escape room frame isn’t decoration. It creates the stakes that compliance training can’t manufacture. When the timer is running and the breach alert is live, learners engage differently than they do with a progress bar at the top of a slide deck.

❖  For corporate L&D audiences: lead with the behavior change angle. For higher ed audiences: lead with the game design and Bloom’s application. For consulting clients: lead with the build story — zero-cost tooling, delivered as a single HTML file, no LMS required.

GAME ARCHITECTURE

IMPACT/OUTCOMES

• Covers five core cybersecurity threat vectors: phishing, USB baiting, rogue WiFi, social engineering, and MFA
• Immediate corrective feedback at each decision point with explanation of the threat mechanism — not just right/wrong
• Time penalty system creates real consequence for wrong answers without removing the learner from the experience
• Three-tier ending system based on time banked — differentiates expert from novice performance
• Runs entirely in a browser with no installation, no LMS, no account — maximum accessibility
• Fully self-contained single HTML file — embed anywhere, share as a link, host on any server

DESIGN DECISIONS

Decision 1: Escape Room Frame Over Scenario Branching

Traditional cybersecurity scenarios present one threat at a time in isolation. The escape room frame creates a connected narrative — you’re moving through a building under attack — that sustains urgency across multiple threat types. The zones aren’t just content containers. They’re locations with distinct visual environments that signal context shift without breaking immersion.

Decision 2: Time Penalty Instead of Failure State

Wrong answers cost time, not progress. The learner is never kicked out of the experience for a wrong decision — they’re slowed down. This is a deliberate pedagogical choice: the goal is reflection, not punishment. Removing someone from a learning experience the moment they make an error removes the learning. Keeping them in it with a consequence they can recover from keeps the stakes real while preserving the instructional moment.

Decision 3: Feedback That Teaches the Mechanism

Every feedback overlay in Escape the Breach explains not just whether the learner was right or wrong, but why the threat works the way it does. “Real IT never threatens suspension or asks you to click a link to verify credentials” is more transferable than “Incorrect — that was phishing.” The game is building mental models, not just testing recognition.

Decision 4: Mobile-First by Design

The phone form factor was intentional. Cybersecurity threats happen on every device employees use — including their phones. A training experience that lives in a mobile browser normalizes the context. It also reflects where a lot of microlearning actually gets consumed. The constraint became the design direction.

WHAT WAS BUILT

Screenshots Coming….

ADD HTML CODE

EXPLORE THE INTERACTION

HTML5 Published Portfolio Version Published as HTML5 and hosted directly on the portfolio site for immediate access — no LMS login required. Available for stakeholder review and employer portfolio evaluation.

❖  ❖  ❖

The breach is contained.

For now.

TECHNICAL SPECIFICATIONS

Overview Item	Description
Framework	React 18 (via CDN) + Babel standalone — no build step required
Rendering	Client-side only — single HTML file, fully self-contained
Compatibility	Any modern browser | Mobile-first responsive layout
Timer system	10-minute countdown with real-time visual indicator and color-coded urgency states
Scoring	Time-bank model — wrong answers deduct seconds (30–45 sec per error)
Feedback	Immediate overlay feedback with threat explanation at every decision point
Endings	Three score-based endings tied to time remaining (planned for Zone 5)
Build Method	Agentic AI collaboration via Claude — designed and iterated on mobile
Hosting	Single HTML file — embeds in any webpage, LMS-independent
Status	Complete

April 4, 2026