EscapeGameSD Web Redesign
Summary
Overview
The owner of EscapeGameSD, an escape game business in San Diego, requested a redesign of his entire website including a minor rebrand. Based on various customer interviews and research, I created and delivered high fidelity mockups that satisfied client, business, and user needs.
The Problem
Users need to be intrigued by the escape rooms, find specific information about the rooms, and believe the experience is at a reasonable cost compared to competitors in order to move forward with booking an escape room.
The Solution
A responsive website with a brand that’s differentiated from it’s competitors, easy for users to find the information they’re looking for, and funnels users to the booking page.
Skills & Tools
Stakeholder Interview
User Interviews
Use Cases
Site Architecture
Competitive Analysis
Branding
Wireframes
Mockups (Figma)
Stakeholder Interview
Given Task: Redesign the EscapeGameSD Website. Rebrand the site but keep the red and the logo.
Client Goals and Requirements:
Increase booking rates (top priority)
Better way to display room themes
Without revealing too much information
Build immersion with better imagery and graphics
Include a testimonials section
Old Website
Redesign Overview
Process
Objectives
Client:
Increase booking rates
Create sense of immersion
Design:
Funnel user flows to booking page
Create immersion through imagery, graphics, and room displays
Establish a clear, unique brand to distinguish from competitors
Balance client and user requirements
User Research: Qualitative Interviews
6 customers were interviewed who visited EscapeGameSD for various reasons and different levels of experience with escape rooms.
Goals:
Learn what motivates users to book rooms at EscapeGameSD
What users are looking for on the website
Determine pain points of the website (especially with booking process) and of their overall escape room experience
Sample Questions:
Can you walk me through the last time you booked a room? Did you have any issues during the booking process?
Why did you pick EscapeGameSD (as opposed to others)?
User Research: Key Takeaways
Through interviews with past customers and insights from the client, I uncovered insights about different kinds of users, what they’re looking for on the website, and pain points.
Insights:
For people who are new to escape rooms, they want to learn more about it. If these people find the themes appealing, they are excited to try the experience at a reasonable cost.
Some people go as part of a team event hoping to bond with their colleagues. Only one person in the group books and the others may check out the description of the room.
People who go to escape rooms often are looking for the next unique experience. Company brand and room themes are important to them when they are comparing their options.
People are often looking for the location address, parking options, and what to do when they arrive on the website.
Some pain points include: finding info about parking, unsure of the timeline/length of the event, booking a time slot for the right number of people in their group.
Personas
Based the user interviews and target audience desired by the client, 3 personas were created.
Determining Requirements & Priorities
This is an overview of the process I used to determine what content, features, and functionality the website should have to accommodate user needs and tasks. Each step below is detailed out in the following sections below.
Use Cases
Based on the 3 personas, I created 2 scenarios (for a total of 6) based on user interviews to extract the most common use cases which determines priorities of the website. See the use case summary below for a sample of the top use cases and their relevance to the personas.
Features and Functionality
The use cases were then used to determine features and functionality which is listed in the table below and shows whether it was a client and/or user requirement. This documents and ensures the website will meet and balance requirements of both parties.
Competitive Analysis
A competitive analysis was conducted to see how my client’s website brand, design, functionality, and content faired with other sites to determine additional requirements to be (at least) on par with competitors, what users expect, and ideas to differentiate the client’s brand.
Competitors Evaluated
Takeaways
Brand:
While Chris (our client) really likes the current color palette of Escape Game SD which is red, white, and black . Generally, a lot of escape rooms have that color palette.
Functionality:
Giving users a sense of their progress in the booking process is a good way to manage their expectations (ex: Paniq Escape)
From the description of a specific escape room, we can link to the booking available for that specific room which helps ease and speed up the booking process
Design:
Provide information in a way that is easy for users to compare with other rooms
Including the companies that have participated in team building exercises helps build credibility with the user
A separate page for each room provides for a cleaner, less cluttered, more focused layout that may help convert more visitors into customers
Moodboard + Style Guide
Red and blue makes the brand feel more fun and family friendly
Bright red and blues feel more game-like helping to convey that escape rooms are more fun than scary
Dark colors feel imaginative and immersive
“Righteous” typeface also looks fun and mysterious and will help differentiate the brand since color choice is limited due to client restrictions
Site Architecture
After evaluating competitor content, the client and I worked together to determine new content for the site. Then I restructured the existing and new content as shown in the site map below.
Wireframes
After many iterations and feedback from the client, these were the final wireframes.
Design Iterations & Feedback
A med-fi prototype of the site redesign was presented to the client for feedback. The following is a sample of a med-fi mockup for the “Rooms” page.
Feedback from Client:
Want to include more red in branding since logo is red and can’t be changed
No images of the actual rooms can be used
Not immersive enough
Can’t change current booking system plugin
Feedback from Other Designers:
Room layout is too repetitive, not worth exploring
exaggerate differences between rooms
Target audience needs more incentive to book
Final Design
These are the final mockups delivered to the client. Major design decisions are described in the annotations below. A prototype of the final design was also delivered to the client used for to create the current site that’s live.
