Client
Role
Design team lead
Timeline
12 weeks
Year
2023
Introduction
Cyberdom is an offline exhibition dedicated to cybersecurity of home and public spaces, industrial enterprises and infrastructure facilities.
The experience is based on a interactive game-polygon, where visitors as a white-hat cybersecurity specialists protects city infrastructure from hacker attacks
Challenge
Create a game design concept in the general style of the exhibition
Adapt 24 different scenarios in game form for two difficulty levels
Design interfaces for 5 cybersecurity tools
Draw animated illustrations for each scenario
Create and deliver to the developers sample animations for all interactions in the games
Results
The project took the team 12 weeks, and once it was completed, the team handed over a full set of artifacts to the client’s developers:
24
Sets of wireframes adapted for game-like scenarios
24
Interactive layouts, one for each game scenario
6
Interface designs for cybersecurity tools within the game
4
Animated examples of in-game interactive mechanics
100+
Animated illustrations themed around cybersecurity
UI kit
to allow the client’s designers to easily modify layouts if needed
Game cinematic
walkthrough of one complete scenario, created in After Effects, with all assets prepared for animation export for developers and stakeholder presentations
Process
The studio team had never worked on game development before, so creating an efficient workflow was essential given the tight deadlines. The team split into two groups: one focused on turning the written scenarios into wireframes, while the other worked on the visual style of the product.
Wireframes played a critical role in the project. The client used them to quickly test gameplay scenarios and task completion speed without worrying about the polished look of the designs.
The visual design team worked closely with the client’s producers to ensure the games fit seamlessly into a larger exhibition and aligned with the client’s brand guidelines.
The workflow looked like this:
1. Scriptwriters provided game scenarios, broken down into individual screens.
2. Our designers adapted the scenarios into interactive wireframes.
3. The wireframes were reviewed and approved by the scriptwriters and the client.
4. Once approved, the wireframes were turned into final designs following the brand guidelines.
5. Final layouts were handed off to developers for coding.
In parallel, the team created a video walkthrough of one full game and animated fragments of all dynamic elements (mini-games, screens, hints) to provide developers with detailed animation specs, including timing, positioning, and keyframes.
Midway through, we tested a few scenarios with users who hadn’t been involved in the project. The feedback showed that static illustrations often confused players, so we decided to replace them with animations. To stay on schedule, we created most illustrations using a consistent pattern, which made the game easier to navigate and kept us on track.
Example of video illustration, each game scenario contains from 5 to 9 similar illustrations
Finally, we conducted design reviews of the completed product. Although we couldn’t test the games in their final exhibition space due to construction delays, we ran office tests, gathered feedback, and worked with developers to fine-tune everything. Despite potential for conflicts during this phase, our team collaborated smoothly, united by the shared goal of delivering a fun and engaging player experience.
Takeaways
Establishing a solid workflow upfront saves time and effort. Setting up the right processes at the start ensures the team can successfully tackle even unfamiliar project types.
Team collaboration is essential. Fostering synergy among team members from the earliest stages helps streamline the project and prevent misalignment later.
Wireframes are a powerful tool. They enable quick iteration and testing of ideas, helping identify issues early and saving time on unnecessary visual refinements.
Design responsibility extends beyond handoff. Even in an agency setting, designers are responsible for the end product, not just the deliverables. This means being involved in all stages, including testing and refining the final user experience.
In the photo you can see an example of a scale mockup with a connected screens where the game was running