top of page
PROJECT OVERVIEW
An escape room is a room in which people are locked in order to play a game requiring them to solve a series of puzzles within a certain amount of time to accomplish a goal, typically finding the key to unlock the room.
Escaperoom.ir introduces an escape room for the first time in Iran.
It was formed with the aim of designing and implementing escape rooms, board games, and other intellectual games.
The main objective of the redesign of the website was to increase the website’s conversion by improving the reservation process.
Tools
Figma, Figjam
Google Analytics
Google Meet
Illustrator, Photoshop
Trello, Zeplin
Timeline
Winter 2022
My Role
UX | UI Designer
MEET OUR TEAM
Armita
Lead UX | UI
Sepideh
UX | UI Designer
Mina
UX | UI Designer
My Role
I worked on all aspects of the design process, from research and ideation to creative conceptualization and design. I collaborated with two other designers to research and develop design plans, concepts, and prototypes.
We've had daily meetings to make sure everyone is on the same page.
We've used Trello to keep tracking the process and tasks.
DESIGN THINKING PROCESS
EMPATHIZE
DEFINE
IDEATION
PROTOTYPE
TEST
DESIGN TIMELINE
INITIAL MARKET RESEARCH
To get to know the industry and nature of the project we did initial market research. We identified two different categories of competitors in Iran’s escape-room market: direct and secondary competitors.
Direct competitor:
Engima Escaperoom
Businesses offer the same product or service and compete for the same market.
Secondary competitor:
Time For Fun
Businesses offer a different high-end or low-end version of the same product or service to a similar market.
Why Initial market research?
Initial market research helped us make more conscious questions for the stakeholder interview and define the business value proposition.
By defining the value proposition we would be able to emphasize it in the design process.
STAKEHOLDER INTERVIEW
We did an in-depth interview at the outset of a research project to create consensus research goals, and understand limitations, stakeholder needs, and assumptions.
Can you tell us a little about
the industry?
What made you realize that your
website needs redesigning?
What is your measurement for success?
What are the main problems in the
a market that you are trying to solve?
What are the main features you are
looking for in the new version
of the website?
Who is your target Audience?
Goals defined by the stakeholders
-
A reservation process that is easier for users
-
Increasing the conversion rate of the website
-
Conveying a mysterious vibe as the UI goal
Problem Statement
There are many calls from the escape-room customers. They refuse to book the rooms via the website. Most of the time they get confused by too much information on the game pages, and the process of booking is so overwhelming that users decide to call the center and ask for an offline reservation.
Goal
Designing a new website for existing and new users with an improved user flow for the booking task so the conversion rate of the website is increased.
GOOGLE ANALYTICS
We used Google Analytics to extract information to analyze the bugs of the current website, verify stakeholder assumptions, and also to assess our success in the project, through conversion rate.
Bounce Rate
Exit Rate
Average Time On Page
Average Pages Per Session
Device Usage
Behaviour Flow Report
Demographics
New VS. Returning Visitors
OUR KEY FINDINGS
Conversion Rate 0.17%
DEVICE
Mobile
Desktop
VISITORS
New
Returning
DEMOGRAPHICS
Male
Female
USER INTERVIEW
We had access to Google analytics so we had a good amount of quantitative data we decided to go for a user interview to find out more in-depth information. We asked the stakeholder to give us the contact info of 20 of their most loyal customer.
Why?
We wanted to find out more about the issues users who are familiar with the structure of the website faced when using it and the main reason they are so in love with this particular escape room so we could bold these characteristics. We asked for 20 people to have the safe number, in case some of them had no interest in attending the interview. We had the chance to 3 of them.
Any problem with the hypothesis?
We could gather a great amount of information about how users were frustrated with the website but the main problem we faced was the fact that results from interviewing loyal customers could be biased about the business itself.
We recruited 3 other interviewees to find out more about what a non-professional player wants to see to trust a business like this.
Deciding which questions to ask!
We as a team of 3, designed 3 sets of questions separately in Figjam and combined them as one main set of questions. Based on the experience of the interviewee in playing the escape room, we skipped nonrelated questions or vice versa.
Some of our interview questions:
How do you trust an escape-room to go to?
Which characteristics of escape-room are the most important ones to you?
What is the process of choosing a room for you?
Have you tried other products of escaperoom.ir?
How much do you read about each Room before making your decision?
Do you care about the location of the room?
Which one do you usually go with? a selected time and whatever room is available? a selected room and organizing your plan based on the available time
COMPETITIVE ANALYSIS
The competitive analysis helped us to see different approaches to reservation tasks and other parts of the website. Instead of inventing the wheel, we get an idea of which approach would work for our users the best. We analyzed competitors in the following sections by using their websites:
-
Booking / Calender
-
Game covers
-
Game detail
-
Credibility
-
Landing
-
Location
-
Extra features
-
Team Building
-
Footer
-
Header
AFFINITY DIAGRAM
We used an affinity diagram to organize the results from interviews and be able to come to a solid conclusion.
We have done this step on FIGJAM.
USER SEGMENTATION & PERSONA
Based on our findings from the conducted research we come to the conclusion to divide our customers into three main sections. Finally we assigned a persona to each segment.
Why?
By segmenting the customers we could have a better understanding of users, their pain points, and their needs and be able to priorities features of the product.
1. The Escape_Enthusiast
Ali
Age: 36
Occupation: Entrepreneur
Location: Tehran
BIO
Ali has been a fan of the Escape-room.ir puzzles since he was in his twenties and has played all the games of this group several times.
Ali plays games with different teams and only uses the services of Scaperoom.ir. He believes they have the best scenarios and the fact that they have won many prizes, shows how professional they are. He waits for the new game to be introduced and plays it when the game is still hot.
"When a game is hot, the long process of reservation is so annoying since the available spots might get reserved really quick!"
Pain Points
-
The long process of reservation
Needs
-
A reservation system that shows the available spots at the first glance
2. The Dopamin - Lover
Setareh
Age: 21
Occupation: Student
Location: Tehran
BIO
Setareh is a student. She usually spends her time with her friend. She likes the Escape-room because it is a different kind of fun for her than going to a cafe or going on a tour...She likes the excitement of the game and the feeling of accomplishment when they finish a game. Some games are so hard they can’t be finished and they left them feeling disappointed.
Setareh and her friends have a lot of free time and usually coordinate their time based on the game they want to play. They had played escape room several times. They don’t care about the company the game is released from, the experience itself is important for them too. The location of the game is important as well.
"We usually pick a game and organize our schedule around it. It is awful when we can’t finish a game in time."
Pain Points
-
Not being able to finish a game
-
Some excited games are located so far from the downtown that getting to them is impossible
Needs
-
Clear communication of the difficulty of different games
-
Accessible location of games
TASK FLOW
Escape room reservation Task flow ...
SITE MAP
Low / Mid-Fidelity Wireframes
UI KIT
-
Colors
​
We picked the primary color of the Escaperoom.ir based on the red used in the Logo to keep the consistency of the brand.
Since the same red used for the Logo might seem like the Error color we used a darker variant as the primary color.
To create contrast between UI elements, such as a top app bar from a system bar, We used light variants of the primary colors.
PRIMARY
SECONDARY
BACKGROUND
PRIMARY
Variant
Variant
Variant
SECONDARY
Variant
Accessibility of Colors
​To check the accessibility of colors, we used:
1. Adobe Contrast Checker
2. Colorblindly Chrome Extension
Although the primary color was not a good fit to use as text smaller than 17 pt and regular it passed the test for being used as components such as Buttons and larger fonts like 14pt bold
Iconography
SPECIAL ICONS
GAME CARD
ICONS
PAGINATION
SOCIAL MEDIA ICONS
Components
1.GAME CARDS
Escaperoom Card Desktop
2.BUTTONS
2.FORMS
HOME PAGE
MOBILE PROTOTYPE
_gif.gif)
GAME PAGE ON MOBILE
RESERVATION PROCESS
ITERATIONS
With the focus on the game reservation process, we had many iterations on the game cards, Home page and game pages in order to build the best experience for the users.
GAME CARDS
CATEGORIES AND DISCOUNT SECTION
.png)
SPEAKING ENGLISH APP
bottom of page