UX / UI Designer

Puzzle Out

How do you convince people to get locked up in a room?

Overview

An escape room is a game where you and your team are locked in a themed room. Your goal is to find hidden clues, solve puzzles, and escape within an hour.

I was hooked after playing my first game. I wanted to open my own escape room, and more importantly, design my own game. I was fortunate enough to find partners that handled the business operations and gave me free reign over the creative aspects. What I actually ended up designing was the entire customer experience for the new business: from discovery through the marketing materials, customer service through the employees and games, and behind-the-scenes technology that facilitated the experience. This project was a labor of love, and it took over all of my evenings, weekends, holidays and vacation time for the better part of a year.

Puzzle Out generated a quarter of a million dollars in revenue in its first year. The games have consistently positive user reviews, and the "Architect's Studio" game is ranked among the best puzzle games in NJ by Room Escape Artist.

Happy customers.

Branding

My first task was to differentiate the brand from the competition. Since information about the games tend to be secretive until players show up for the game, the first impression had to be made through the visual identity.

Evolution of the logo

I chose a bold, minimalist look while still being playful in the logo, colors, and typography. I avoided using 'escape room' in the business name to differentiate us from mulitple businesses in the area using the same variations.

Different applications of the visual identity

UX: Website

The website was the main point of contact for new customers: for information and booking. Emphasis was placed on mobility. Customer data revealed increased usage for calling the business and looking up directions. The website started off as a one-pager for easier lookup. Additional pages were added for corporate events and outdoor games, which were different enough to warrant their own pages.

Since I designed and developed the website myself, I was able to implement changes in response to user data almost immediately. For example, phone call logs suggested that customers had a hard time finding the phone number on the website. To remedy this, I made the phone number visible at all times below the nav bar, which generated more views than in the contact section.

The majority of the visitors to the website are mobile, specifically, on iPhones.

CX: Booking

I initially designed the website as a standalone product, thinking it would be the best way for potential customers to book a game. I did not anticipate how integral phone calls became for the booking process: we had multiple requests or questions about the games every day. I collated the most common questions and included them on the website, which reduced the number of call for the same information.

The booking system was a 3rd party software which had to integrate seamlessly with Puzzle Out's website. Multiple booking systems were evaluated using on the following criteria:

Cost > UX > Visual Design

The booking systems were also tested in conjunction with Puzzle Out's website to ensure that the customer flowed smoothly between systems, by repeating similar language, brand colors and images.

UX: Game Design

The game was at the core of Puzzle Out's offering, and they were designed to ensure an optimal game flow that balanced fun and difficulty. The unique aspect of designing a puzzle game was that it obscures the goal: fragmenting clues so that the player has to find and piece them to make sense of the answers. This is unlike designing a typical product, where the goal is to get a user through the journey in the most efficient and visible way possible.

Game flow diagrams

The process of designing the game was to start at the end and work backwards. Using a game flow, the end goal was broken down in components, which had to be solved either linearly or in a multi-path, or a combination of both. With the game flow mapped out, the next step was to construct the puzzles. All of the puzzles were custom-made utilizing crafting, laser cutting and 3d printing.

Construction of props

UX: Technology

Technology was injected both in the games and the backend to collect data that would help improve the game design.

The first piece to be introduced was the score/hint screen. A frontend page was casted to the TV in the room, which displayed the score, the remaining time, and hints from the gamemaster. All of the data projected on this screen was collected in a database in realtime, which helped us track the game difficulty and determine which parts of the game were too obscure for players. I developed the score/hint system from scratch using Bootstrap for the frontend and PHP/mySQL for the backend.

Themed hint screens

Hint screen backend

The other technology pieces I designed were for a heist game that included a barcode scanner (for stealing items) and an app to call a getaway driver (to escape).

These apps were rapidly prototyped using HTML/CSS and then implemented with Javascript in the Ionic platform. The focus of these apps was to boil the UI down so that the players could successfully use the app under pressure.

Barcode scanner (for stealing) and calling the getaway driver.

Testing, Testing, and more Testing

Usability testing was critical for the success of Puzzle Out. As someone with no experience in the entertainment/hospitality industry, I had to make sure things functioned properly. This includes not just physical locks or digital technology, but the customer experience as well. Every element of the business was put through multiple tests, and appropriate data was collected to help us tweak our flow to ensure a better customer experience.

For instance, we collected metrics to see how long groups took on average to escape a room and what percentage of groups escaped. Our most popular room had an escape rate of 28%, which was a terrible number given that we marketed it as our easiest room. My philosophy is that games needed to be fun, not frustrating. And I believe every player should be given a chance to experience most of the game and the majority should escape. Using the gamemaster logs I was able to determine the chokepoints in the game and rework it to make the game easier. With every iteration, I ran playtests and analyzed user feedback to ensure the game ran as expected. The escape rate jumped up to 60%.

Things break! Our rooms took a beating and I added sturdier objects with each iteration so that we replaced items less frequently

Conclusion

I scratched just the surface of my involvement in the design process here. Puzzle Out provided some of the most unique design challenges I've ever faced. For instance, how do you design a fallback when a piece of technology fails mid-game? And how do you keep the customer entertained through the technical issues?

While I only focused on the deign here, there were many more facets of this project that made it successful; such as finding the right location for the games, expressing the brand values through the employees, and ensuring we were always available for the users of our products, whether it was the customer or the gamemaster. The success of Puzzle Out is owed to shared vision of creating an enjoyable customer experience.