.png)
Arcade Check-In App
UX / VISUAL DESIGN
Project
Arcade Check-in App
Date
February 2022 - March 2022
Role
UX Researcher, Visual + UX Designer
| Project Vision |
This project is to design an arcade check-in app.
It helps users check-in an arcade through a cellphone, so that they can enter the arcade more quickly. Also, users can check the available games in the arcade and organize an event through this app.
| Challenges |
1
Provide a way for users to check-in an arcade more quickly.
2
Users can check-in the arcade chains through one app but in different locations.
3
Show available games in the arcade at a real-time.
| User Testing & Observation |
I interviewed a sample of four participants when conducting research during the first sprint cycle.
No Long Wait Check-in
All four participants had experience about waiting for a long time to check-in, including arcades, exhibitions or other events, which is annoying for everyone. So the check-in app must provide a quick check-in service compared with traditional check-in method.
"I remembered that feeling, overwhelmed by crowded people coming for the exhibition with endless waiting for check-in."
Lost in Arcade
Two participants mentioned that sometimes they felt lost when they were in an arcade. They didn't know where to go. Therefore, an arcade check-in app may provide a real-time map to show available game as well. Then, after check-in, users could check the map to find the games they like.
"I just felt lost. I didn't know where to go and it seems all games were occupied."
Crowded People Waiting for Check-in at Dave & Busters
| Personas |
Faye
Age: 21
Education: Bachelor’s degree
Hometown: New York, USA
Family: Single
Occupation: Student
“Killing time in an arcade is super
interesting for me and my friends”
Goals
-
Having fun with friends in an arcade.
-
Date with my boyfriend/girlfriend.
-
Relax after exam or homework.
Frustrations
-
Fail to get in without her ID
-
The games she wanted to play are occupied by others
Faye is an undergraduate student from New York City. She has fun with her friends after school in an arcade. She thinks this is a good way for relaxing and keep a good relationship with them. And she wants to know if the game she likes is occupied or not, because she doesn't want to waste time waiting.
Stella
“My kids love games in arcade, and I would like to accompany them”
Goals
-
Accompany kids spending weekends
-
Hold a birthday party or an event for her kids
Frustrations
-
She had a hard time finding games her children liked in the arcade they went to for the first time.
Age: 42
Education: Master’s degree
Hometown: California, USA
Family: Married, two children
Occupation: Architect
Stella is an architect with two children. Her children like playing games in an arcade, and she would like to spend some time with them in the arcade. She wants to know the map of the arcade layout, because she and her children had a hard time finding the games they like, especially when they were in an arcade they went for the first time.
| Storyboards |
Big Picture Storyboards
1
Approach the entrance of the arcade and prepare to check-in.
4
Log-in the app by inputting the username and the password.
2
Open the arcade app on mobile phone.
5
Use the QR code in the app for scanning to check-in.
3
Users will be satisfied with the screen reader function.
6
After check-in, the app will show the map of the arcade for users.
Close-up Storyboards
1
Faye opens up the arcade app.
4
Faye uses the QR code in the map to check-in.
2
Log-in the arcade app with the username and the password.
3
Faye selects the arcade she will check-in
5
Faye can check the arcade map after check-in.
6
Faye presses on one game and the app will show its availability and description.
| P&P Wireframes |
Homepage - Different Options
I tried different layouts for the homepage. And I always keep the navigation bar on the top of the screen, so I keep this element as a necessary part of the homepage. Then, I picked option C, which keeps a good balance of all elements, as the basic homepage layout.
Main User Flow
Log-in Page
Homepage
Check-in Page
Map Page
QR Code
| Lo-Fi Prototype |
After designing paper wireframes, I began to create initial prototype with main user flow, arcade check-in, through Figma.
| Usability Study |
1
Research Questions
-
How long does it take for a user to check-in through this app?
-
How satisfied are the users with the arcade map function?
2
Participants
-
Participants are adults, mainly for college students or people with children.
3
Methodology
-
Location: Online
-
Five participants complete the check-in tasks on their own. Each participant completes a questionnaire on their experience privately.
-
Each session will last 45 minutes, and will include an introduction, a list of tasks, and a short questionnaire.
| Insights |
After Check-in
Log-in
Check-in
1
Users want to know their exact location
2
Users want to recognize the arcade map
2 out of 5 participants chose the wrong arcade locations. This means that some users find it difficult to locate themselves when choosing an arcade.
“Oh no, I choose the wrong one? Let me go back.”
— Dan, a father of two children from NYC.
2 out of 5 participants ignore the arcade map. This means users need some attention to help them recognize the helpful arcade map.
“It's all set, right?”
— April, an undergraduate student from NYC.
| Updated Prototype |
Check-in Page
Nearby Column
Add “Nearby”, ”Previous”, and “Favorites” to help users find the right arcades they are looking for.
Game Map I
.png)
Check-in Successfully Page
Add a check-in successfully page to inform users that the arcade map is helpful.
| Final Hi-Fi Prototype |
| Log-in |
After Log-in
Users can learn about the new games or other latest information. Players can check-in, use the map or top up. Organizers can create or manage their event.
| Check-in |
Arcade Selection
In oder to give an accurate location to users, I design a map showing the location of the user, nearby arcades and the selected arcade.
| Arcade Map |
Attention
In order to catch users attention to the arcade map, I design a page to inform users of the important arcade map. Then, users can find available games.
| Visual Design |
I designed unique icons, buttons and maps, and use blue and pink with neon glow to show the arcade atmosphere. Meanwhile, high contrast texts and images can provide a better user experience.
Colors
#1B258D
#5DC8FA
#FF70D0
Button
Button
Button
Store Map
Arcade Map
Button
Logo
Map
| Takeaways |
Arcade check-in app design is my first UX design project. It made me realize just how important user experience is. During the whole process, from first research to the final Hi-Fi prototype, users' opinions and suggestions exerted great influence on the app. For example, I thought I designed a great arcade map to provide a better user experience, but users even didn't notice it in the usability test, which means that my map design was lack of attraction. In this way, I communicated with users (participants) for many times at different stages, and they could always remind me of the drawbacks and make it become better. I believe this experience can always guide me: Users come first.