Arcade Preview Case Study
Project Overview and Goals
Mock Arcade is a semi-national arcade chain that wants to increase the foot traffic and total interaction time with their games. They want a more efficient and transparent way to disclose the different game selections at the each location.
The project goal is to create an application that allows easy preview in-game content along with content warnings.
​
My role for this project was the head UX designer and researcher.
​​
​
The Problem and our Users
The main problem being solved with this application is the accessibility of information.
During competitive audits, it was discovered that most national arcade corporations do not openly disclose what games are available at their arcades. This lack of information creates a huge pain point for users that could be preventing them from even stepping into the arcade.
​
Our target audience for this application includes frequent arcade attendees, families with children, and people with disabilities who need accessibility information. These were the groups that I polled for my research survey.
It was concluded from the survey that 80% of users surveyed discussed their displeasure with the lack of knowledge of the game inventories at arcades.
​
The Process
I began with paper sketches of various home page layouts and turned those into digital wireframes. The main design focus was to create a user flow to locate the necessary content warnings and information. This felt incomplete as a user flow however so I included the review posting user flow as an extension to give a start to finish effect.
 Sketches on paper of various screen layouts for the arcade preview application. |  Digital wireframes in Figma |  Wireframes all connected together to create the user flows for my first ever prototype. |
|---|
I conducted a usability study to determine the effectiveness of the user flow. During the user testing it was shown that 4/5 users struggled to find the navigation bar due to the oversized back button in close promixity. 3/5 users were unsure how to post a review or if they had completed the tasked fully. Thanks to this feedback I changed the header layout to promote a better navigation experience along with adding a confirmation overlay/page to notify users that they completed their process.
Usability Study
 This layout shows the cluttered navigation bar with the large back button that users experienced during the usability study. |  The mockup shows the changes I made to create a back button icon and place it opposite the navigation menu in the header. This also displays the intended content warnings of age restrictions and any potential flashing light or accessibility issues with the games. |  Here is the large overview of the different pages and overlays with their finishing touches. |
|---|
What I learned and moving forward
This first project was a huge learning experience as an entry level designer. I encountered challenges while creating my digital wireframes as I had under estimated the sheer number of screens that I would be designing.
I also was confronted with some design bias when it came to the header layout. I had wrongfully assumed that the navigation bar would be easily accessible but the data from my usability study proved me wrong. I had to make the adjustments and ended up making a cleaner design thanks to the insights from my study.
​
The next steps for this project would be completely the language options and accessibility options with the different text sizes. I have the skills and understanding of components now to make this happen as I definitely did not at the time of designing. There are also errors of the prototyping animations with the heart button that I would like to fix and build out into full functionality to track in the user profile.