Cityguard – A Cybersecurity Game That Clicks
Cybersecurity turned detective game – explore a clickable Siemens city.
Siemens Austria wanted a quiz. We delivered an interactive cyber-detective story set in a fully clickable city. CITYGUARD lets users discover real-world digital threats – and how Siemens stops them in their tracks.
Siemens Austria wanted a quiz. We delivered an interactive cyber-detective story set in a fully clickable city. CITYGUARD lets users discover real-world digital threats – and how Siemens stops them in their tracks.
Brief & Backstory
The original request was straightforward – a multiple-choice quiz to assess cybersecurity knowledge. But real threats aren’t neatly ticked boxes. So, we transformed each question into interactive scenes, weaving a narrative that mirrors actual risks. The outcome? A city-wide adventure where players uncover clues, detect vulnerabilities, and understand cybersecurity firsthand.
The Big Idea
We designed four immersive missions inspired by genuine cybersecurity challenges across Siemens’ sectors: smart buildings, factories, hospitals, and supply chains. Each mission highlights a Siemens cybersecurity strength – from comprehensive defence strategies to integrated security solutions. Players navigate through scenarios, unravel attacks, identify patterns, and finish wiser – with helpful Siemens insights ready to download.

How We Brought It to Life
We created an intricate isometric city from scratch, aligned fully with Siemens’ brand style. Within this digital environment, four interactive stories unfold:
Cyber CSI: Unravelling a factory attack – from phishing to insider threats.
Last Line of Defence: Protecting a supply chain using Zero Trust principles.
Domino Effect: Resolving a hospital HVAC glitch remotely, preventing wider damage.
The Weakest Link: Demonstrating secure identification amidst third-party chaos and false alarms.
Each interaction deepens the narrative, simplifying complex cybersecurity concepts into intuitive experiences.
Things We Geeked Out On
- Custom isometric city rendering with Paper.js.
- Seamless zoom and pan transitions using OpenSeadragon and Libvips.
- UI integration with Siemens’ Online Essentials design system.
- Fully WCAG 2.2 compliant and keyboard-accessible.
- Direct integration into Siemens’ CMS – clean and iframe-free.
What It Did for the Client
CITYGUARD transformed cybersecurity awareness from passive learning into engaging exploration. Now, Siemens Austria users don’t just read about threats – they actively solve them. Integrated, measurable, and designed to scale, CITYGUARD is already expanding with new missions.
