This project involves the redesign of a privately owned escape room website. Tasks includes identifying the strengths and weakness of the current website by examining its usability, functionality, and visual appeal as means to improve the user experience of the website.
Exit Escape Room is an privately own business located right in the heart of New York City. They offer private interactive, technologically advanced escape rooms designed by a team of experts to bring the most authentic and exciting escape room experience. Their venue is perfect for any special occasion, such as birthdays, corporate team building events or just a fun challenge for anyone.
Exit Escape Room is relatively new in the escape room market compared to other branched out companies, yet their website remains outdated. The structure of the older website presents itself to be a hassle for potential customers to browse and book appointments, resulting in the loss of revenue for the business and new customer base.
To get an idea of what the current market is like, we conducted an competitive analysis to determine what other escape room websites are like, and what we can takeaway from them.
In order to get a better understanding of the user experience, I invited various individuals to navigate through the website for the first time and offer their first impressions of the site. This is what they have to say.
After sorting the user pain points, and coming up with viable solutions. The next step is to create a sitemap. The importance of the sitemap is that it serves as a blueprint for a website, outlining its structure and hierarchy. At the same time, its visual representation can help ensure a logical flow of information, easy navigation, and a user-friendly experience.
Here, we can see the updated sitemap of the website, with the new and improved suggestions included.
Before we start the re-design process, we met with the stakeholder to discuss whether he has any specific requests. In regards to the features of the site itself, he gave us the creative freedom as long as the all of previous features are intact. However, the most important thing he wants is to keep the dark and mysterious vibes of the original website.
In order to honor his requests, we began by re-structing the site by sketching out various low-fidelity wireframes, used to quickly iterate and test ideas without getting bogged down by visual aesthetics. While we do this, we also began to explore different color schemes to keep the mysterious vibe for the site.
Low Fidelity Re-design Sketch and new color palette
Once we've laid out the initial sketch, we construct the framework, referred to as the mid-fidelity prototype. Essentially, we are enhancing the sketch. They are detailed enough to provide a realistic representation of the final product, and useful when communicating design concepts to stakeholders.
As we approach the finalization of the product, we made adjustments to the mid-fidelity prototype by adding in the finalized design choices, to create the high-fidelity prototype. This is the most important step as it will imitate how the end product will function by providing an realistic preview of the user experience.
Now that our detailed prototype is finished, the next phase involves handing it over to potential users for their input. In this stage, users are assigned two tasks to accomplish. Once they've completed both tasks, they're asked to share any challenges or difficulties they encountered during the navigation process.
In this user testing phase, participants were assigned to make create a booking on this re-designed website.
Upon concluding the final user testing phase, we conducted individual interviews with each participant to gain insights into their app experience. We categorized all user feedback, considering their likes, dislikes, and any encountered pain points. Here, we compiled a summary highlighting the major pain points identified across all users.
Now that we understood the major pain points, our goal is to eliminate these pain points by coming up with reasonable solutions.
After we came up with the suitable solutions to counter the user pains, we implemented the solution to the whole application.
As the final user testing concludes, each of the participants were interviewed regarding their experience using the app. All of the user feedbacks were divided based on their likes, dislikes, as well as any pain points they came across. We then summarize the major pain points across all the users.
This prototype demonstration will provide the stakeholders and users with how the final product will look and work. Try it out yourself to navigate through the new website!
View the prototype and give it a swirl
Approaching this project with uncertainty, I was unaware of the challenges that lay ahead. Yet, as the project unfolded, it pushed me to break free from conventional thinking and acquire new skills to bring it to fruition. In retrospect, a few crucial lessons emerged. As a designer who’s working with a client, you must take their needs into considerations when coming up with new and innovative designs. We always have to strive for a balance between aesthetics and functionality, as well as prioritize clarity.
