Megadrome
Megadrome is an arcade preview app to help users see what arcade games are available to them at their selected arcade.
Junya Yashiki UX Lead
The Product:
Megadrome is an app designed to preview arcade games and reserve available arcade machines so users of the app have time to get to the machine without fearing “machine sniping”
Project Duration:
March 2023 - September 2023
The Problem:
Customers of the arcade did not have a way to see if their desired arcade machine was available to play until they got there. On top of that, would frequently find the machine they were moving towards got taken just before they could get to it.
The Goal:
The app is designed so that users can not only see if their desired machine is occupied but also can reserve the available ones for a short period of time so that they can get to it without being “machine sniped”
My Role:
UX researcher, wireframer, prototyper, visual designer.
Responsibilities:
Conducting user research, creating wireframes, lo-fi and hi-fi prototypes based on research, conducting usability studies and refining visual designs.
Understanding The User
User research
Personas
Problem statements
User journey maps
User Research: Summary
The research was conducted via interviews with four participants. The goals for this research were to understand:
What makes this app stand out from the others.
What frustrations people have with apps like this.
If there is a must-have feature.
I had assumed that mostly the younger generation would use an app such as this but one of the user groups were older (30+) and showed interest in an app such as this.
User Research: Pain Points
1. Difficult to see High Scores
Seeing the current high score holder was not possible unless the user was to physically go to the Arcade.
2. Waiting for machines
Users had to wait for their desired machine to free up while keeping an eye on it as to not lose it to others.
3. Price
Users did not know what price to expect and were surprised when a machine was more expensive than expected.
Persona: Obi
Problem Statement:
Obi is a busy university student and recent immigrant who needs to know if his favourite arcade machine is available because his time at the arcade is so limited.
Having grown up in Nigeria, their recent immigration to the United States has been a challenge for Obi. Between his extracurricular activities and looking after his younger sister while his parents are out at work means he only has one evening a week to go to the arcade and unwind. For him, missing the opportunity to play on his favoured machines as he moves through the arcade is disappointing given the limited time he has to play.
Although he can read well when given enough time to translate text, his dyslexia poses a problem for him to read and process text when rushed.
Age: 20
Education: Finished High school
Hometown: Kano, Nigeria
Family: Parents, younger sister
Occupation: Online University
“Meeting new people at the arcade has helped me settle in and understand this new culture.”
Goals
Help parents by looking after younger sister when parents are out.
Hopes to go into business after university.
Be budget conscious to save money.
Attends night school to improve English.
Keep fitness levels up.
Frustrations
Gets frustrated when his favourite machines are being used, “It is hard to know if the machine on the other side of the arcade is being used without going there to check. But going to check risks the machine getting taken.”
Struggles to read quickly and process information due to dyslexia.
Persona: Phil
Problem Statement:
Phil is a goal-focused SEO who needs to know if there are new games available because visiting the arcade for no reason is a waste of his time.
Age: 35
Education: University Graduate
Hometown: Austin, Texas
Family: Partner and cat
Occupation: Mid-Level SEO
Phil is a mid-level Search Engine Optimiser by day and an arcade regular by night. After work, he will stay behind to do extra trainings or e-learning to upskill in his field. He aims to be promoted at work by next year and has taken on more responsibilities. Although his work is busy, he likes to still be competitive about arcade gaming and holds multiple top scores at a number of local arcades. He enjoys the sense of community and being able to socialise with other arcade goers and prefers when the arcade is crowded.
“No matter how busy life gets, we should make time for ourselves”
Goals
Desire to impress at work after taking on increased responsibilities.
Wants to spend a sustainable amount of time upskilling.
Aims for promotion by the end of the year.
Still wants to have fun.
Frustrations
Frustrating to drive all the way to the arcade to find there are no new games. Has no desire to play games he has top score in.
“It’s hard to know when the atmosphere might be lively at the arcade. I wish there was a way to be more informed of how many people are there.”
User Journey Map For Obi
Mapping out Obi’s user journey shows how users can benefit from an app like Megadrome.
Starting The Design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper Wireframes
Drawing paper wireframes was a crucial step in working out what on-screen elements would make the navigation of the app as smooth as possible for the user.
Digital Wireframes
Digitising the paper wireframes that were suitable for the project made it much easier to visualise elements and gather a visual understanding of spacing and layout.
Button to reserve the machine is active when the machine does not have a player using it.
Text and later, colour to show if the machine is in use by somebody else.
Digital Wireframes
Research showed that having an easy to navigate homepage was essential for users. Laying out items in rows of three kept navigation clean.
Low-Fidelity Prototype
Creating a lo-fi prototype of the primary user flow of selecting an arcade game to reserve, meant that it could be used in a usability study.
Lo-Fi prototype:
https://www.figma.com/proto/TcllmDcZ17eo8Vyx50zd2N/Arcade-View-wireframes?page-id=0%3A1&node-id=1-2&viewport=431%2C255%2C0.25&t=aBiqJWeP39snLtoU-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A2
Usability Study: Findings
The studies conducted were non-moderated, recorded studies where participants were given a list of tasks that were set in accordance to the questions I had after each round of designs.
Round 1 Findings
Participants found navigation easy.
Most were confused at what the timer signified.
Users didn’t know what the “in-use” indicator meant.
Round 2 Findings
Difficulty accessing leaderboards.
Participants struggled to find profile icon.
Refining The Design
Participants found navigation easy.
Most were confused at what the timer signified.
Users didn’t know what the “in-use” indicator meant.
Mockups
The usability studies highlighted the need for context for the timer. Participants were left confused at whether the timer signified how long before the machine was available or for how long the machine was available for.
Before usability study
After usability study
Mockups
After the second round of usability studies, it became apparent that the leaderboard was difficult to access. The leaderboard function was moved to the game preview page for ease of access.
Before usability study
After usability study
Mockups
Accessibility Considerations
Made sure to use colours that not only complement each other, but also adhere to WCAG standards.
2. Used icons and pictures among text to make navigation easier for those who either struggle to read or navigate visually.
Going Forward
Takeaways
Next Steps
Takeaways
Impact:
A key focus of the project was ease of navigation for all kinds of users,
“I appreciate how straightforward navigating the app is. Buttons and images are clearly labelled, and easy to see. I can imagine how inclusive that would be for users of various abilities.” - Participant A
What I learned:
Throughout the project, I have learned the value of conducting usability studies and how important it is to create paper wireframes in order to work efficiently and to avoid reworking a design numerous times.
Next Steps
The next steps would be to add a feature to select and save favourite arcades. Consider users who frequent multiple arcades.
2. One thing to keep an eye on is if the reservation timer itself becomes a pain point by being free to reserve. Look at the possibility of a pay wall to deter users abusing the feature.
3. The map feature should be able to navigate the user from where they are in the arcade to the machine they have reserved.