Hybrid Escape Room
Novacap: Operation Breach Containment
An educational cybersecurity escape room designed to teach phishing detection, password security, social engineering awareness, and critical decision-making through immersive gameplay.
Project Overview
Role: UX Designer & AI-assisted Front-end Developer
Duration: 12 Weeks
Team: 6 Students
Project: MSc UX university project (84%)
Tools: Figma, FigJam, Notion, Codex
Methods: Interviews, Personas, Journey Maps, Usability Testing
Outcome: Playable cybersecurity escape room with measurable learning improvements
The Challenge
Many people understand cybersecurity risks in theory but struggle to apply safe behaviours in real-world situations. Our challenge was to design an engaging educational experience that teaches cybersecurity concepts through realistic decision-making rather than traditional training materials.
My Role
I contributed across research, design, development, project management, and team collaboration throughout the project.
Contributed to user research, interviews, affinity mapping, persona creation, and journey mapping.
Developed and refined the browser-based prototype using HTML, CSS, JavaScript, and AI-assisted development with Codex.
Planned and facilitated usability testing sessions, analysed feedback, and implemented iterative improvements.
Team: 6 Members • Duration: 12 Weeks • Weekly Sprint Meetings: 1–2 per week • Project Tracking: Notion • Collaboration: Figma, FigJam, Google Meet
Research Highlights
To understand users' cybersecurity knowledge, behaviours, and learning preferences, we conducted a combination of user interviews and an online survey. This mixed-method approach helped uncover both qualitative insights and broader behavioural patterns, ensuring design decisions were grounded in real user needs rather than assumptions.
🎤 User Interviews
Explored participants' experiences with cybersecurity threats.
Investigated behaviours around passwords, phishing emails, and online safety.
Identified frustrations, motivations, and learning preferences.
📋 Online Survey
Gathered quantitative data from a wider audience.
Measured cybersecurity awareness, habits, and confidence levels.
Validated patterns identified during interviews.
Key Insights
📌 Users understood common cybersecurity risks but often failed to apply safe behaviours in practice.
📌 Password reuse and weak password habits were more common than expected.
📌 Many participants struggled to confidently identify phishing attempts under pressure.
📌 Users preferred interactive, scenario-based learning over traditional educational content.
📌 Realistic simulations were seen as more engaging and memorable than passive training methods.
Defining the Problem
How might we create a cybersecurity learning experience that helps users recognise and respond to threats under realistic pressure?
Learning Goals
Detect phishing attempts
Create strong passwords
Recognise social engineering
Evaluate digital evidence
Make decisions under pressure
Ideation
For the Ideation stage, we started by doing a brainwriting session and creating a cognitive mind map and SWOT analysis. After that, we created a storyboard and selected the best idea based on an evaluation matrix and dot voting.
From Sketches to Prototype
The prototype phase began with a series of hand-drawn lo-fi sketches, and then establishing the Digital Game Flow Design & Moodboard to start building the game with Codex.
The Final Experience
Testing & Iteration
To ensure Novacap was both engaging and educational, we conducted three rounds of usability testing with participants of varying cybersecurity knowledge levels. Each round combined observation, think-aloud testing, knowledge assessments, and satisfaction surveys to evaluate usability, learning outcomes, and overall player experience.
Testing Methods
Observation Testing: Identified where participants hesitated, became confused, or required assistance.
Think-Aloud Testing: Captured participants' thought processes while solving challenges.
Pre/Post Knowledge Tests: Measured improvements in cybersecurity awareness before and after gameplay.
User Satisfaction Surveys: Collected feedback on engagement, usability, learning outcomes, and overall experience.
Round 1 → Improving Clarity & Accessibility
Early testing revealed confusion around password requirements, cognitive overload within the phishing email challenge, and unclear puzzle instructions.
Changes made:
Added contextual hints and increased password attempts.
Simplified the phishing inbox experience and reduced information overload.
Improved puzzle instructions and guidance.
Redesigned the final investigation stage to better support evidence review.
Round 2 → Strengthening Puzzle Flow
Players were completing the experience more independently, but some still struggled to connect clues between physical and digital evidence.
Changes made:
Clarified puzzle instructions for the encrypted archive challenge.
Simplified onboarding guidance for phishing detection.
Improved pacing and progression through the final investigation sequence.
Round 3 → Refining the Experience
The final testing round focused on polishing remaining usability issues and validating previous improvements.
Changes made:
Improved visibility of important investigation elements.
Reduced interaction friction within the email challenge.
Enhanced recovery options for players who fell for social engineering traps.
Refined navigation and visual hierarchy across key screens.
How I used AI
I used Codex, an AI coding agent, to build the browser-based game from the team’s research, sketches and game flow.
My decisions
As part of the team of 6, I contributed to the research, planned and ran usability testing, and wrote the prompts that turned the game flow and moodboard into a working build.
What Codex produced
Codex built the game in HTML, CSS and JavaScript: all five stages, the timer and progress bar, the boot sequence, story screens and sound.
How I directed and reviewed it
I wrote the prompts (35 logged) and we evaluated the build as a team until it was finished. Test findings became prompts: when both test participants failed to spot the bin icon, I asked Codex to make it larger and add a label. I tested the game in Chrome, Firefox and Opera, at desktop, tablet and mobile sizes using the browser’s device toolbar.
Impact
Through three rounds of testing and iteration, Novacap evolved into a more intuitive and effective cybersecurity learning experience. User testing showed measurable improvements in cybersecurity awareness, particularly among participants with limited prior knowledge.
Key Outcomes
📈 All participants improved their post-test cybersecurity scores after completing the game.
📈 Participants demonstrated stronger phishing detection, password security awareness, and social engineering recognition.
📈 Iterative design changes reduced confusion, improved puzzle completion rates, and enabled players to progress more independently.
📈 The final experience successfully combined storytelling, gamification, and practical cybersecurity learning within a single browser-based escape room.
What I Learned
This project strengthened my understanding of how UX design can influence learning and behaviour change. While many users understood cybersecurity concepts in theory, research revealed a clear gap between knowledge and real-world decision-making under pressure.
Through interviews, testing, and iterative design, I learned the importance of simplifying complex information, validating assumptions through user research, and designing experiences that are accessible to users with varying levels of expertise.
Working within a multidisciplinary team also improved my collaboration and project management skills. Regular sprint planning, stakeholder discussions, and usability testing reinforced the value of continuous iteration and evidence-based design decisions.
Most importantly, the project showed me that successful user experiences are rarely created in a single iteration; they emerge through research, testing, feedback, and continuous refinement.
“Amine have done a great job in very short period of time. All my preferences and ideas were put together in perfect way and beautiful website.”
Kateryna Sierova - Photographer
“I am thrilled to share my experience working with an outstanding web designer Amine From the moment I engaged their services, I knew I was in capable hands. Their expertise in web design is unparalleled, and I could not be more pleased with the results.”
Sheikh Adiat - SMMA Agency
“Absolute pleasure working with Amine. Great communication, a driven developer and excellent service delivered consistently.”
Joshua Romao - Agency Owner
