Phish or Flee - A cybersecurity escape room · Hand-coded HTML, CSS, JavaScript · Four rooms
The problem
Phishing training is mostly compliance theater — a slide deck, a quiz, an annual checkbox. People pass it and still click the link, because spotting a phishing attempt isn't knowledge recall. It's a judgment call made in about two seconds, while you're busy and the email looks routine.
What I built
A four-room escape room set inside a fictional company. Learners work through simulated inboxes and interfaces, make decisions under something closer to real conditions, and unlock a terminal digit for each room they clear. A persistent map tracks progress across the building; a floor directory holds the ending shut until all four rooms are solved; the experience closes with a reflection and a certificate.
It's hand-coded in HTML, CSS, and JavaScript rather than assembled in an authoring tool. That meant designing the interactions rather than picking from a menu of them — the terminal mechanic, the unlock logic, the navigation, and the pacing of feedback are all purpose-built for this experience.
How I built it
The project runs on a documented design system: a two-family typography rule applied across every screen, locked component sizes, a consistent terminal treatment across all four rooms, and a shared navigation pattern.
Development followed a freeze-and-checkpoint discipline — no build advanced until the previous one was approved and frozen, with every learner-facing screen rendered at a fixed resolution and compared against spec before sign-off. Ninety-plus checkpoints over the course of the build.
My role
Instructional designer and creative director. I defined the instructional model, the room structure, and every screen specification; set the typography and component systems; and ran the QA standard. Development was AI-assisted — I wrote the specs, reviewed each render, and approved or rejected every build against them.