Trailblazer Hero
Interactive experience design for an educational AAPI card game
Trailblazer Heroes is an educational card game that introduces AAPI role models to young audiences through storytelling and play.
To support its promotion at STEAMNASIUM, I designed an interactive web experience that allows users to create their own hero cards and engage with the product in a more immediate, personal way.
1
Timeline
Feb, 2025 - Apr, 2025
2
The Team
2 UX Designers, 1 Graphic Designer, 2 Game Designers
3
Role
I Designed a customized hero card generator that enables users to create personalized cards in seconds, turning passive viewers into active participants.
STEAMNASIUM is a K–12 exhibition where visitors explore multiple booths in a fast-paced, walk-through setting. In this context, it was difficult to communicate a content-heavy educational game within a short attention span.
Visitors interacting briefly with exhibition booths in a high-traffic environment
01
Low engagement in browsing scenarios
Visitors quickly pass by, making it hard to capture attention or explain gameplay.
02
Complex content, limited time
The game relies on storytelling and historical context, which cannot be easily conveyed on the spot.
03
Lack of interactive entry point
Without hands-on interaction, users remain passive and disengaged.
How might we turn a passive, walk-through experience into an engaging, hands-on interaction for young visitors?
Every idea we explored, mini-games, cosplay, photo booths, had the same problem: you still had to explain the game before kids would engage. Watching past STEAMNASIUM videos reframed it: kids never stopped for displays. They stopped for things they could touch. The question shifted from "how do we explain the game" to "how do we make someone stop moving?"
To address low engagement in exhibition settings, I designed a customized hero card generator that transforms product introduction into a quick, hands-on experience.
From Viewing to Participation
During STEAMNASIUM, Students create their own hero cards by imagining their identities and defining simple traits, turning abstract storytelling into a tangible, playful interaction that sparks immediate interest in the game.
Guiding young visitors through the hero card creation experience
Designed for Instant Engagement
The experience is intentionally lightweight and intuitive, allowing users to complete the interaction within seconds, making it effective in short-attention, walk-through contexts. We gathered more than 50 cards within a short exhibition timeframe.
Personalized hero cards created by users in real time
60%+
visitors participated by creating their own hero cards.
50+
4
teachers reached out in one week to adopt the game as a classroom learning tool.
The card generator created a crowd, and that crowd made teachers stop, pick up the physical game, and engage with the actual product. It's an audience we didn't expect to target our designed on.
Designing for attention, not information
Every idea we explored still required explanation before engagement. The card generator worked because it asked nothing and you were just doing it. Participation was the introduction.Design for one user, reach another
Shifting from passive browsing to active creation significantly increases emotional connection and product understanding. The card generator was built for kids. But kids creating cards in real time became the signal that made teachers stop, engage with the physical game, and follow up within the week.Prototyping for real-world contexts
Before proposing anything, I watched past STEAMNASIUM videos to see what actually made kids stop.Designing for physical environments requires simplicity, speed, and immediate feedback to fit real user behavior.
With the project team at STEAMNASIUM (second from left)