Trade shows can be exhausting. To spice up our company's participation at a recent client trade show, we designed and built a themed Escape Room for attendees. Our booth was 100% booked the entire week.
Creative Director, Experience Designer, Vue.js Developer
Create a fun, branded experience, limited to 8'x8' and 20 minutes of "game" time.
Our first step in creating the escape room was to develop the world in which it would be set. The audience for this particular trade show was professional, and would be spending the week wearing suits and sitting in meetings. They worked in the world of public policy, and they were frequently challenged by large, bureaucratic government infrastructures.
So we set our story in the future, and made the co-hero of our story a brave hacker, attempting to take down an oppressive, dystopian government.
a 10-page story outline, which was the foundation of our design process
leading a stakeholder workshop with Art director Ernesto Morales
There are many ways to design an escape room, but in general, puzzles that unlock other puzzles should be related. It's much easier for users to guess that a broken lamp is solved by a fuze box puzzle, than it is to guess that a broken lamp is solved by a code hidden amongst colored bottles of water.
It's tempting to design an escape room narratively: one puzzle leads to the next, which leads to the next, and on. (See our first puzzle storymap below.) But like in digital UX design, users often take unexpected routes on their journey. For example, users might find a morse code cheat sheet hidden in a book, and then realize they need to turn on the radio to get a message — or they'll find the radio, turn it on and hear morse code, and only then realize they need to go look for a morse code cheatsheet.
Giving users only one way through a storyline creates a puzzle bottleneck: if users can't solve it, they're stuck. And nothing is more frustrating than getting stuck. On the other hand, giving users multiple puzzle paths to solve allows users to bring their unique strengths and perspectives to the game, and keeps things moving even when one puzzle seems impossible.
We finally arrived at this 3-Keys-to-the-Main-Puzzle pattern, in which users must find 3 different codes (with 3 different, asynchronous puzzle narratives) to beat the game.
testing puzzles for time; they had to all fit within 20 minutes
Testing our escape room was crucial. We caught more than 30 bugs in the first five rounds of testing, and discovered a number of places where affordances needed to be much clearer.
For example, our safe was a bit finicky — you had to type the code, then wait a beat, then push star. But after just entering the code without the star, our first few users assumed they'd gotten the code wrong, and started searching for a different code. We taped over the star button with a green sticker to better signal that functionality to users, and no one else got confused.
Even after the experience was "locked," we had to iterate and react to user feedback: after only the third "live" round, we had to write "DO NOT TOUCH" in sharpie on all the boxes and to emphatically promise our users that there were no clues on the backs of posters, and that they didn't need to destroy anything to solve the game.
In digital design, we're often reminded that users will interact with your product in ways you can't even begin to imagine. This is no less true for escape rooms: one participant discovered a felt pad stuck to the bottom of the safe — it came with the safe, and I thought nothing of it — and became absolutely certain that it was part of the game.
He spent the entire game in his socks, trying to generate static electricity that he could discharge on... something. He was very amused & disappointed when we got to the end and it turned out to just be a felt pad. (As it turns out, static electricity was the solution to a puzzle, but you didn't need the felt pad or socks to solve it.)
All told, our team created five posters, 9 puzzles, a web-app, an intro video, and several fake book covers. To bring the whole thing to life, I worked with our Art Director to generate a brand identity and a look-and-feel for the game's villain (the National Department of Communication and Cooperation) as well as for our plucky, hacker heroes.
A "clue" poster, where pattern for solving a fuse-box puzzle is hidden in the background.
A world-building poster, taped on the outside of the room, in order to generate interest in the game and set up the universe.
The brand not only created a real, visceral world for our users to play in — it also helped separate the busy hotel decor from our game. With a great visual identity and strong visual consistency, it was easy to quickly discern which items were part of the game, and which were part of the hotel.
The introductory video that set up the game
All told, we had about 100 people come through our escape room, and the schedule was completely booked the entire time. About 80% of our audience successfully beat the game, and even those who didn't relayed to us that they had fun.
Producer: Jessi Bennet
Art direction: ernesto Morales