Escape Room Digital Experience

Client

Humber Polytechnic is one of Canada’s leading post-secondary institutions. Within its many divisions, the Innovative Learning Department focuses on developing new educational tools for teachers and students.

One of its latest projects is a space-themed educational escape room designed to immerse educators and learners in emerging technologies.

Impact

My Role

  • Conducted a literature review on escape rooms and gamified design
  • Explored narrative and UX writing with the help of AI
  • Designed the brand identity (logo, color palette, typography)
  • Designed the UX & UI of multiple digital touchpoints
  • Documented design specifications for handoff to development

Team

Solo designer, meeting with lead designer as needed

💡 The Ask

How might we create a brand identity for an educational space-themed escape room that scales across multiple touchpoints?

Final Designs at a Glance

UX & UI

Onboarding players in the game

Providing hints to players during the game

PROJECT HANDOFF

As a design contractor, I needed to ensure the team could access all design specifications before I wrapped up the project. That’s why I made sure elements like spacing, layout, color palette, and typography were clearly documented for the development team, aiming for efficiency and scalability.

Device-specific spacing rules

Implementation of layout grids

Colour usage documentation

Use of responsive font styles

Design Process

Let's understand what the team wants to build

Sean, Tanya, and Rob (Humber College faculty) want to transform emerging technology education into an immersive experience through an escape room. To achieve this, they've been developing puzzles that challenge students and faculty to solve problems using technology. They also have the perfect theme: you're a crew member aboard a spaceship trying to return home.

The challenge? The team has been struggling to create a clear, professional-looking visual identity that unifies these ideas across physical and digital touchpoints.

Literature and documentation review

This was a crucial step to ensure the project was grounded in an academic foundation, especially important given its context as a leading college investment. The more I learned, the clearer it became that storytelling and playfulness would play a key role in shaping the brand identity.

Exploring story with AI-generated narrative and images

The team created a narrative using ChatGPT. After reading the story—about a spaceship called Nebula Dawn on a mission to reach the Starheart, a legendary artifact, before losing control of the ship—I began generating AI images of the characters to better visualize the narrative. While doing this, I began to remember my favorite sci-fi series: Star Trek Voyager, a spaceship trying to return home.

A branding inspired by Star Trek's UI

As a Star Trek fan, I’ve always been inspired by how the series envisions humanity coexisting with technology—through holograms, AI, futuristic gadgets, and more. The show was visionary in its creation of playful, distinctive user interfaces that became a visual hallmark of the series.

Drawing from this inspiration, I aimed to create a brand identity that reflects a similar vision—because this is exactly what the team hopes to achieve with the escape room: to make emerging technologies feel fun, engaging, and approachable. To do this, I began studying the interface design used in Star Trek.

Building a logo aligned with the story

With the story in mind, I began exploring imagery inspired by the words nebula, dawn, spaceship, futuristic, Starheart, and space agency. I aimed to design a logo that reflected the narrative—and, as requested by the team, one that could work as a patch on a crew uniform.

From there, I researched fonts, focusing on bold styles suitable for embroidery. I selected logo iterations that resembled mission patches, created digital renditions choosing a color palette, and developed a final logo that aligned with the overall strategy.

Shaping the brand using a Style Tile Framework

Once I felt like I was beginning to “sense” the brand identity, I knew it was time to create a style tile. This single document would bring together everything from strategygoals, audience, messaging, and brand adjectives—to visual assets like icons, logo, typography, components, colors, imagery, and textures. Essentially, it would contain everything needed to bring the Nebula Dawn identity to life.

Mapping touchpoints across physical and digital channels

To understand the gaming experience, I mapped out all key touchpoints and interfaces. This draft was created after conversations with the team:    

1. Onboarding – Players are introduced to the game through a pre-recorded message from the captain.
2. Access to Ship – Players tap an access card on a security override panel to enter.    
3. Fix Life Support / Oxygen – Players complete a physical puzzle and access a digital screen that shows their progress in the game.    
4. Main Puzzles – A mix of physical puzzle devices and digital hints guide players through the core challenges.    
5. End Sequence – A scoreboard displays whether players succeeded (all puzzles solved) or failed (timer runs out).

Wrapping up project and next steps

Once I had all the documentation and high-fidelity wireframes ready, I organized the Illustrator and Figma files and prepared a presentation deck explaining the rationale behind the designs. The design was approved!

After that, the team began testing the puzzles and collaborating with the Theatre Production program to build the physical escape room.

Recently, Humber Polytechnic published this article about the project.

More Projects

A laptop screen displaying the PRESTO website homepage with the slogan 'Transit Made Simple' and an image of a hand holding a black PRESTO card. The website has a black and white design with green accents.

Turning PRESTO’s cluttered web app into a delightful experience for 16 Million Ontarian riders

UI components and color guidelines. The image features a table comparing desktop and mobile button states, a color palette with primary and secondary hues, and labeled interface elements in various colors.

Building a Figma-based Design System increasing workflow efficiency by 75% for one of the largest banks in Peru