Topscore for the Arcade1up
concept app

Challenge: Create a high score tracking app for the Arcade1up gaming cabinets.

Deliverables: User research, user stories, journey maps, wireframes, UI, prototypes, and usability studies.

Role: Product Designer

Platforms: Mobile

Timeline: 2 months

Tools: Figma

Arcades brought us together

Arcade1up has allowed us to relive the experiences that we had once by allowing us to bring the arcade into our own homes. What I used to love about going to the actual arcade was seeing my name on my favorite games scoreboard, and playing against other people from my neighborhood. Now that the arcade is at home users can only compete against their own score or whoever comes over and plays. My job was to bring back that "competitive factor" owners felt they were missing as the result of user research throughout this case study.

Understanding the users

The primary user group identified was the Arcade1up owners that ranged between 30 to 55, which were mostly males that wanted an element of competition added to their machine, but others just cared about enjoying the games among their friends. Since the Arcade1up community is niche I decided to turn to reddit where there is an Arcade1up community of twenty five thousand members with about 150-200 members active on the subreddit at any time. I created a user survey and received about fifty responses. This information helped me mold user personas for two types of users.

James User Journey

Goal: To be able to track high score on selected game cabinets against others.

John User Journey

To play his arcade cabinet games and track his high score against his friends.

Low-fidelity prototype

I started my design process with a digital low-fidelity prototype and then showed it to five users to collect feedback.

Topscore low fidelity prototype
VIEW LOW FIDELITY PROTOTYPE
usability results

From the usability study I then created a affinity map to organize my research further and group common themes.

Topscore affinity map

Changes made after the usability study results

1) Changed around the onboarding page.

Instead of trying to explain what Nfc chip was. I just gave the user the proper steps to simply add the game. When the cabinet and the app connnect they will receive a green check mark indicator that the connection is completed and they may move on.

Topscore before and after usability results

2) Splitting menu and profile into different icons.

An issue I found during my feedback was people were getting confused on were to click for menu options since I had what looks like to be a profile icon instead of a hamburger menu.

Topscore second before and after usability results

Our players guide, the design system.

Topscore typography design systemTopscore color design systemTopscore button design systemTopscore navigation bar design system

High-Fidelity Prototype

topscore high fidelity prototype
VIEW HIGH FIDELITY PROTOTYPE
Topscore screen examples

Key takeaways

What I learned during this project is how important accessibility is when designing as well as user feedback being crucial every step of the way. My next steps for this project would be to continue designing more features and doing usability test to further improve the app.

"The app is easy to use, instinctual, and enjoyable with the vintage look of it. Great way to compete with other fellow game lovers."

-Kristi M

Topscore

©Andrew Muniz.All Rights Reserved.