Paula Martinho · Digital Designer

Challenge

How to translate a leadership development model for correctional professionals into a board game and a digital prototype, while maintaining pedagogical rigour, playability and visual consistency across both media?

Solution

Design of a cohesive game system — board, cards and supporting materials — with its own visual identity, complemented by a self-contained digital prototype developed through AI-assisted prototyping.

Key outcomes

The system:
- Ensures visual consistency between the physical and digital versions;
- Makes training workshops easier to facilitate;
- Allows the game to be tested and demonstrated without depending on physical production.

Approach

The project combined two complementary strands: graphic design of physical materials and AI-assisted digital prototyping (vibe coding).The process was guided by principles of:
Visual consistency across analog and digital media;
Legibility and clarity, in the context of a facilitated workshop;
Rapid iteration, with continuous validation with the team.

Empathize

Understanding the game and its context

The starting point was the game's pedagogical model: a leadership development tool, run by facilitators, aimed at professionals in the correctional system.The analysis covered:
- The game mechanics and the key moments of each session;
- The materials required (board, card decks, playing pieces);
- The conditions of use: quick reading, group handling, training environment.This analysis defined the legibility, size and hierarchy requirements for the materials.

Define

Defining the visual system

Before designing the materials, a style guide was created to ensure consistency across the entire system:Colour palette with colour codes for each card category;
Typographic hierarchy designed for reading at a distance and in groups;
Iconography and illustration aligned with the tone of the project.The guide served as a single reference for both the physical and digital media.

Ideate

Designing the physical materials

Developed in Adobe Illustrator:1. Board
Clear game structure, with a path that is legible to all players;
Composition prepared for large-format production.2. Card decks
Templates per category, with standardised fronts and backs;
Colour and iconography system for immediate identification.3. Print preparation
Export of optimised files (bleed margins, colour profiles, resolution).

Prototype

Prototyping the digital version with AI

The digital version was built through vibe coding — iterative, natural-language prototyping — with AI (Claude) as the development tool.The prototype:
- Is a single, self-contained HTML file, with no backend;
- Reproduces the board and the card decks, with category filters and card zoom;
- Includes light/dark themes and keyboard navigation.This method made it possible to test design decisions in minutes, keeping the focus on the experience rather than on technical infrastructure.

Test

Testing, iterating and reflecting

Iteration
Testing cycles identified concrete issues (home screen hierarchy, component behaviour) that were resolved with targeted fixes, without rebuilding the system.Critical reflection
The main lesson was translation between media: what works on a physical board requires reinterpretation in the digital version.This project demonstrates my ability to:
- Design visual systems that remain coherent across analogic and digital media;
- Prepare materials for print production with technical rigour;
- Use AI as a prototyping tool while retaining control over design decisions.