The Problem I Was Solving
Cybersecurity awareness training is one of the hardest briefs in L&D. The subject matter is technical, the compliance requirements are rigid, and the timelines rarely leave room for the kind of interactivity that actually changes behavior. The people building this training are doing skilled work under real constraints, and the results reflect those constraints more than any lack of talent.
But I kept thinking about what becomes possible when you remove those constraints. What if you could start from a blank canvas, with no LMS packaging requirements or seat-time mandates, and build a cybersecurity training that felt like something people would choose to engage with? I have a longstanding belief that the mechanics games use to teach players complex systems (progression, consequence, feedback loops) are exactly what workplace training needs more of. CyberWise was my chance to put that belief into practice.
The idea was straightforward: place learners inside realistic threat scenarios, let their decisions carry visible consequences, and build the kind of pattern recognition that actually transfers to the real world. But behind that idea was a broader argument I wanted to make: that game design isn't a novelty layer you add on top of training. It's a design discipline with decades of research on motivation, difficulty curves, and knowledge transfer, and it belongs at the center of how we think about learning experiences.
I set out to build something that demonstrated this on every level.
Game Design & Mechanics
The learner plays as a new Security Analyst at NovaTech Industries, navigating their first week on the job. Each day presents a different category of cybersecurity threat through 4 scenario steps with 4 choices each. The narrative framing creates immersion while the game systems reinforce learning.
Scoring System
- Optimal: +5 score, +5 trust
- Acceptable: +2 score, +2 trust
- Poor: -5 score, -3 trust
- Dangerous: -10 score, -8 trust
Ending Tiers
- Champion (80-100): Recognized at all-hands, invited to Security Ambassador program
- Getting There (50-79): Enrolled in additional security training
- Compromised (0-49): Placed on performance improvement plan
Trust Penalty Mechanic
If the player's final trust drops below 20, their ending is downgraded one tier. A Champion becomes Getting There. Getting There becomes Compromised. The downgraded ending includes additional narrative about trust erosion, reinforcing that technical competence alone isn't enough.
Achievements (10 Total)
Trigger-Based (5)
- Eagle Eye - Catch the first phishing email
- Social Shield - Resist IT impersonation
- Clean Desk Champion - Secure your workstation
- Data Guardian - Classify data correctly
- First Responder - Handle first incident alert
Computed (5)
- Security Champion - Final score 80+
- Perfect Day - All optimal in a single day
- Trust Builder - Reach 80+ trust
- Quick Learner - Optimal right after a mistake
- Zero Incidents - No dangerous choices all week
Technical Architecture
CyberWise is a fully static single-page application with no backend. All game state persists to localStorage via Zustand, and the app deploys as a subfolder of any static site. This was a deliberate choice: the training needs to be hostable anywhere without server dependencies.
The architecture separates concerns cleanly: pure game logic lives in game/, scenario content lives in data/, and React components handle rendering. Adding a new day of content means adding a new scenario file without touching game logic or UI code.
Key Technical Decisions
State persistence.
Zustand with localStorage means learners can close the tab and pick up where they left off. Choice history, scores, achievements, and current progress all survive between sessions. An undo system reverses score changes when learners use the back button.
Scenario engine.
A central hook handles all game logic: processing choices, routing into consequence branches, advancing steps, and shuffling choice order to prevent positional pattern-learning (no more "always pick A").
Simulation rendering.
A polymorphic renderer routes to the correct simulated interface (email, chat, phone, desktop) based on scenario type. Friday's mixed type combines multiple formats in a single step, mirroring how real incident response pulls from multiple channels.
Animation and pacing.
Framer Motion handles page transitions, micro-interactions, achievement toasts, and a red flash overlay on dangerous choices. Narrative text uses a typewriter effect at 18ms per character with click-to-skip, creating pacing without forcing the learner to wait.
Component Architecture
// Layout layer
AppShell (TopBar + ProgressBar + AchievementPopup)
// Page layer (7 routes)
LandingPage, ObjectivesPage, DaySelectPage,
ScenarioPage, DayTransitionPage, ResultsPage, AboutPage
// Simulation renderers
EmailClient, ChatWindow, PhoneCall, DesktopView
// HUD components
SecurityScoreGauge (SVG), TrustLevel (bar), AchievementPopup
// Interaction components
NarrativePanel, ChoiceCard, FeedbackPanel,
ConsequenceScene, TrustWarningModal
Tools & Credits
| Tool | Use |
|---|---|
| React + TypeScript | Application framework and type safety |
| Vite | Build tooling and dev server |
| Tailwind CSS | Styling and design system |
| Framer Motion | Animations, transitions, and micro-interactions |
| Zustand | State management with localStorage persistence |
| Claude (Anthropic) | Development support, scenario writing, architecture planning |
| GitHub Pages | Hosting and deployment |
Try It Yourself
Navigate your first week at NovaTech Industries. Can you spot the phishing emails, resist the social engineering, and make it to Friday with your security score intact?
Play CyberWise