CityGuard
CityGuard turns cybersecurity awareness into an interactive whodunit for Siemens — a fully explorable isometric city where employees follow clues and solve real-world security incidents, replacing passive training with active problem-solving. As Lead Creative and Technologist for Czesnek, I established development workflows for storytelling-driven interactives, provided illustrations, and built the custom generative tools.
Client
Siemens
Design Studio
Czesnek
Project Owner
Andreas Eberharter
Creative Direction
Eduardo Barbosa
Creative Tools
Eduardo Barbosa
Illustration
Eduardo Barbosa
Frontend & Integration
Cesar Ferreira
Interactive demo available on desktop only
CityGuard turns cybersecurity education into a detective game set inside an explorable isometric city. To bring this world to life at scale, a hybrid workflow was developed—combining custom generative tools with hand-crafted vector illustration to match Siemens' brand guidelines while keeping production efficient.
The Stories
Four interconnected missions immerse players in CityGuard's world, each addressing real cybersecurity challenges across smart buildings, factories, hospitals, and supply chains. Through illustrated narratives and interactive scenarios, players learn to identify threats by solving them—not by reading about them.
story
Cyber CSI
Players investigate a factory cyber attack, tracing the intrusion from an initial phishing attempt through insider threats and compromised systems. Following clues across the city's bustling scenes, they piece together how the attack unfolded and identify the attackers.
story
The Domino Effect
A hospital's HVAC system has been remotely compromised. Players follow the chain reaction as a single breach cascades through interconnected systems, learning to spot the tipping points where early intervention could have prevented a crisis.
story
Last Line of Defense
Players protect a supply chain using Zero Trust security principles—verifying every access request, monitoring activity logs, and fortifying defenses against escalating cyber assaults targeting critical infrastructure.
story
The Weakest Link
When third-party complications and false alarms blur the picture, players must manage secure identification and spot social engineering attacks—phishing, impersonation, and insider threats—before exploitation chains take hold.
An entire city had to be created and brought to life with progressive levels of detail—from the full skyline down to individual rooms and objects within each building. The most effective strategy was a hybrid approach that combined custom generative tools with traditional vector illustration, balancing speed with style fidelity.
Creating a living city
A suite of custom tools was built on top of Paper.js to augment existing vector editing software. Each tool encodes Siemens' style guide and isometric constraints, enabling rapid prototyping while maintaining visual consistency. Assets transfer seamlessly into the production pipeline via simple copy-paste, bridging the gap between generative speed and hand-crafted quality.
Building Samples
