Explorers of the Galaxy

Designing a mission-driven platform for 130+ participants, later adopted across 14 i-Days in 9 European countries.

scroll down white icon
time icon

6 min read

Design Thinking workshop transitioning into a remote innovation platform during the COVID-19 pandemic, with a collaborative workspace blending into a digital mission-based interface.

From Physical Space to Digital Structure

The Context

Loss of physical structure, remote cognitive drift

Innovation Day (i-Day) is structured around Design Thinking and traditionally unfolds in physical space. Walls covered in post-its, visible iteration, facilitation cues, and shared energy ground abstract thinking in something tangible.

In 2020, the COVID-19 pandemic eliminated the physical structure that sustained the event.

The remote edition could not rely on proximity or physical artefacts to stabilize abstraction. What had previously been sustained by space now depended entirely on interface.

When physical structure disappears, cognitive drift accelerates. Sustaining focus became the system’s responsibility.

Two event days. Multiple teams. Extended sessions. Remote fatigue.

The platform had to preserve orientation, maintain momentum, and make progression perceptible — without the ambient reinforcement of a shared room.

Structural Tension

Abstract workflow, no spatial grounding

Design Thinking is inherently abstract. In physical workshops, abstraction is stabilized by movement and collective visibility. Online, it fragments into tabs and detached documents.

The question was architectural:
How do you convert an intangible workflow into a system that feels navigable, progressive, and structured?

The narrative universe had already been partially defined. Core game concepts existed. Development constraints were real, and the timeline was limited to three months.

Architecture had to absorb complexity and produce coherence.

User flow diagram illustrating the end-to-end learning journey, including onboarding, navigation, mission progression, rewards, planet unlocking, and final collaborative session.

Simplified navigation architecture of the Innovation Day remote platform

Narrative as Architecture

Mission logic structuring progression

The sci-fi universe was not treated as decoration. It became the organizing logic of the experience.

Each Design Thinking phase translated into a mission. Progression became spatial rather than linear. Advancement was revealed through unlocked nodes, activated paths, and visible structural transformation.

The platform operated through three persistent anchors:
Start — global orientation via the Navigation Chart.
Your Ship — identity and system state.
Missions — execution and progression.

Progress was expressed through structural change. The narrative justified movement. The architecture regulated it.

Access granted message overlay on decoding challenge screen about ancient symbols with 'Perfect Pitch' answer.

Tasks Feedback Access Granted

Mission failed message overlay on decoding challenge screen about ancient symbols with wrong answer.

Task Feedback Mission Failed

A blue triangular Stargem with symbol and text congratulating the user on acquiring it.

Mission Feedback Congratulations

Mission Feedback Mission Failed

State-Driven Control

Explicit states enabling progression

The system separated progression states from interaction feedback. Locked, Unlocked, and Completed controlled access across the journey, making advancement explicit rather than implicit.

Feedback operated at two levels. Individual tasks produced immediate outcomes — Access Granted or Mission Failed — with retry and contextual hints preventing dead ends. At mission level, completion triggered a larger consequence: a Stargem fragment, followed by the coordinates required to unlock the next destination.

Because red functioned as an activation accent across the system, validation and error were not encoded chromatically. Task-level outcomes relied on check and X iconography within consistent overlays, while mission-level feedback shifted to narrative imagery: failure was represented through a fractured astronaut visor, and successful completion through the awarded Stargem.

Each layer answered a different question: Can I access this? Did my action work? Have we completed the mission? What happens next?

Seven-color interface palette with functional roles.

Functional color system

Montserrat interface typography hierarchy.

Interface type hierarchy

Progression states and task type icons.

Progression and task iconography

System and contextual button states.

Interactive button states

CAPCOM character presenting mission instructions.

Narrative guidance in context

Mission task list with completed and locked states.

Mission progression structure

Milestone collection and achievement feedback.

Achievement and reward feedback

Interface System & Motion Hierarchy

Immersion guided by structural clarity

Interface as a System

The interface was built around a multi-column grid that maintained alignment, spacing rhythm, and compositional consistency across screens.

A modular HUD-inspired system extended that structure into panels, overlays, mission stacks, instructions, controls, and milestone badges. Rather than designing each screen independently, recurring elements followed a shared visual and spatial logic.

Semi-transparent navigation remained continuously available without competing with deep spatial backgrounds. A seven-color system supported the interface, with white (#ffffff), signal red (#d64a4a), and petrol blue (#296377) carrying most of the visual hierarchy. Electric cyan (#00ffff) provided signal, while signal orange (#d6803e) introduced urgency. Slate (#43555b) supported hover states, and charcoal (#262f34) structured depth. Montserrat provided enough weight and scale variation to separate operational information from narrative content.

The result was a flexible interface language capable of accommodating dense information while preserving recognizable patterns across the platform.

Extending the Interface into a Universe

The visual system extended beyond the interface into the narrative objects that accompanied progression.

Capcom was developed as a tactical guide rather than a mascot. Modeled in Maya, the character translated interface geometry into physical form: hexagonal structures echoed the navigation system, while red accents and deep black connected the suit to the platform’s visual language.

The Stargem transformed progression into a tangible narrative object. Earned fragment by fragment across missions, its gradual construction made cumulative advancement visible while connecting reward mechanics to the larger journey.

Interface, character, and reward therefore shared the same formal language, allowing the fictional universe to reinforce the system rather than sit on top of it as decoration.

Motion as Narrative Structure

Motion operated at different scales according to its role. Micro-interactions confirmed input, overlays marked changes in system state, while cinematic sequences structured the larger journey.

The opening film established the fictional world and the conditions that initiated the expedition before interface interaction began. As teams progressed, short arrival sequences introduced each new planet, marking transitions between stages while reorienting participants around a new destination and mission context.

Planetary environments and shockwave sequences were constructed in After Effects through layered compositing, rotating textures, controlled parallax, and blending modes, balancing cinematic depth with production feasibility.

The final sequence completed a narrative thread developed throughout the experience. Dr. Sheldon — until then known through fragments of her Logbook — was finally revealed, connecting those accumulated traces into the resolution of the journey.

Cinematic motion therefore operated across the full experience: establishing the world, reorienting participants during progression, and resolving the narrative.

Managing Complexity

Reducing noise to preserve coherence

Early iterations introduced additional mechanics: energy layers, time indicators, denser environmental backgrounds, and more elaborate progression structures. While they increased thematic richness, they also introduced competing signals and made the system harder to read.

Refinement therefore focused on redistributing complexity rather than simply removing it. Secondary mechanics and visually dominant elements were reduced when they interfered with orientation, hierarchy, or progression. Wing-like graphic elements were also eliminated after evaluating their interpretive neutrality.

The Stargem system followed the same evolution. Early concepts embedded progression within a denser interface of metrics, locked states, and cumulative indicators. This was progressively reduced to a clearer relationship: completing a mission awarded a Stargem fragment, making advancement immediately visible and tangible.

The system evolved from concept-heavy to architecture-led — simplifying what participants needed to understand while preserving depth within the experience.

Interaction as Reinforcement

Mechanics validating understanding

Mechanics transformed progression into actions that participants had to understand and resolve.

The Quantum Sublimator turned the Stargem fragments from accumulated rewards into a spatial reasoning tool. Participants had to identify their correct position and orientation through drag-and-drop interaction, with immediate feedback validating the resulting configuration.

The Unlocking Wheel required sequential recognition, while contained errors and immediate retry allowed participants to test their reasoning without interrupting progression.

Other symbolic puzzles — including matrix-based Sudoku and cuboid decryption — introduced different forms of cognitive demand within the same narrative structure. Interaction was therefore not added as decoration: mechanics required participants to act on the logic of the system in order to advance.

Testing & Validation

External feedback informing refinement

Testing was iterative and externally conducted. Stakeholders ran multiple remote test rounds prior to launch and shared structured feedback that informed refinements to progression logic, narrative clarity, and system stability.

The platform went live without structural usability breakdowns. In a live remote setting, robustness was the primary metric.

Outcomes

Performance at scale

The platform supported 130+ participants across two event days, maintaining visible progression throughout a fully remote experience.

Originally developed for the Barcelona i-Day, the system attracted interest from other European institutions and was subsequently selected for use across 14 i-Days in 9 countries.

The Universitat de Barcelona team Parolu secured the Silver Prize at the European final. While the platform was only one of several contributing factors, it successfully supported a team progressing from the local event to European-level competition.

Architecture does not win awards. It enables performance.

External coverage
University of Barcelona ↗ · EIT Health ↗

Reflection

Clarity under abstraction

This project clarified a structural principle:
When abstraction increases, architecture must compensate.

Early interface exploration moved too quickly into visual definition. Layout, hierarchy, interaction and visual language were being resolved simultaneously, making structural changes increasingly expensive as the interface evolved.

What worked:
→ Layered progression logic
→ Persistent state visibility
→ Controlled narrative immersion
→ Simplification through removal

What evolved in my practice:
Since then, I use low-fidelity wireframes to validate interface architecture before moving into visual production. Keeping early screens deliberately simple makes hierarchy and interaction easier to challenge, rearrange and discard before visual decisions make those changes costly.

Structure sustains attention.
Clarity sustains performance.