Protect the Teddies

Passive Compliance at Scale

TOUS required role-specific Occupational Health & Safety training for more than 1,500 employees across Spain — warehouse, office, and retail environments. Each employee completed only the course relevant to their role. The content differed. The system could not.

The real risk was not failure.
It was passive completion.

The objective was clear: translate legal compliance into a system that required attention, validated understanding through a 19-question assessment, and remained measurable via LMS reporting.

Constraints were structural: legal rigor, unambiguous risk representation, tight production timeline, and layered interaction patterns.

Before this intervention, OHS training relied on static PDF documentation and internal video materials. Information was comprehensive, procedures were explained, and risk categories were clearly listed. The format, however, was linear.

Comprehension depended on passive consumption. There was no interaction layer, no visible state feedback, and no measurable trace of recognition before the final assessment. Understanding was assumed rather than structurally verified.

When Brand Conflicts with Safety

The experience followed a controlled progression:
Conceptual grounding → Exploration → Reinforcement → Verification.

But an early tension reframed the project.
‍
TOUS provided a well-defined visual identity, including character proportions aligned with brand language.

In theory, alignment simplifies decisions.

In practice, it can introduce friction.

The question became more precise:
What happens when a consolidated brand system does not fully support functional clarity?

In static compositions, the proportions worked.
In ergonomic risk simulation, they did not.

Posture, strain, and imbalance depend on anatomical clarity.

Compressed ‘chibi’ limbs reduced legibility.

The decision became structural:
Preserve stylistic fidelity, or prioritize risk recognition?
‍
We transitioned to slightly stylized proportions to improve anatomical clarity.

The change was visible — and necessary.

From that point forward, one principle governed the system:
If it affects understanding, it affects safety.
‍

State-Driven Learning System

Each module—warehouse, office, and retail—operated as a modular learning canvas. The scenario changed. The interface did not.

A persistent three-layer architecture structured every screen:
Top Bar → orientation and navigation
Central Canvas → interaction area
Bottom Bar → risk tracking and learning progress

This consistent spatial hierarchy prevented cognitive reset and allowed attention to remain on hazard recognition rather than interface navigation.

Visual density was deliberately controlled. Line-based characters over white backgrounds reduced visual noise, allowing meaning to emerge through interaction rather than decoration.

Semantic Communication System

Recognition Before Verification

Foundational prevention concepts—legal obligations, signage systems, and first-aid protocols—were introduced through lightweight interactions such as drag & drop, selection tasks, and expandable content.

Learning preceded exploration.

Once users entered the interactive environment, they freely explored each scenario in search of occupational hazards.

Understanding deepened only after a risk had been correctly identified in context.

Correct identification unlocked a contextual explanation together with its corresponding Carta de Prevención, transforming recognition into actionable knowledge.

‍Learn → Explore → Understand → Reinforce

‍The reinforcement card game extended this learning loop. Each collected prevention card became part of the player's deck, enabling new rounds where risk scenarios were matched with preventive actions. Immediate feedback and a visible life count reinforced understanding without relying on punishment.

Error informed. It did not punish.

Across modules, affordances remained explicit:
Hover suggested activation.
Color confirmed consequence.
Iconography categorized risk.

The interface taught itself once and reused its logic consistently.

Assets were designed for multi-scale implementation within a game engine environment, ensuring technical scalability without compromising legibility.

Interaction flows were prototyped in Figma to validate state transitions and navigation logic before asset production. Final vector assets were produced in Illustrator to align with the development pipeline and ensure clean implementation in the game engine.

Clarity Tested Against Reality

From Passive Consumption to Verified Understanding

More than 1,500 employees completed role-specific training built on this system.

A single interaction framework supported learning across office, retail and warehouse environments while preserving consistent navigation, feedback and instructional patterns.

Knowledge was verified through a timed assessment and measurable via LMS reporting.

Legal compliance was translated into a state-driven interaction system.

Legibility Over Identity

What worked: state clarity, consistent feedback architecture, anatomical precision.

Practice evolved through continuous validation and lightweight usability checks before full asset production. Even minor visual variables — such as stroke weight — proved that small decisions scale when repeated across a system.

This project clarified something fundamental: in safety-critical environments, brand language cannot override functional legibility. Visual identity must adapt when clarity becomes a matter of risk.