HiScore is a prototype for a social arcade high-score tracking mobile app. This was the first project I made with Figma, it was a really amazing learning experience and I had a ton of fun putting it together. Below I’ll walk you through my process!
Project Overview
The product:
An app that lets users track their high-scores for arcade games and share with the community.
Project duration:
March-July 2022
The problem:
No modern applications for tracking arcade high-scores.
The goal:
To provide an easy to use, mobile, high-score tracker that has social elements.
My role and responsibilities:
Researcher and Designer. User research, wire-framing, prototyping & final mockups.
User Research
Summary
I first thought about how if I were into high score chasing and tracking at an arcade what type of features and problems I am have/want with an app or website to help track. I then wrote up a list of interview questions expanding those thoughts. I went to the local arcade and interviewed guests there about these questions and got their thoughts on what features and pain points the app my have. I then did some online research as well to see what other options are out there and how I could improve upon them.
Pain Points
Time
Need a quick and easy way to add a high score for tracking so user can get back to playing.
Social
Users want a fun and easy way to interact with other people that share this hobby.
Design
The few other platforms for tracking are ugly and not user friendly.
Personas
Tom
Problem statement:
Tom is an arcade enthusiast who needs to track his high scores at the arcade because there isn’t an easy way to do that currently.
Ken
Problem statement:
Ken is a high school student who would like to have a good way to track his arcade scores while moving to other cities.
User Journey Map
Mapping the user’s journey showed how fun and helpful it would be for users to have a social high score tracking app.
Starting the Design
Paper Wireframes
It took some time to come up with how i’d like the home screen to look and what to prioritize and include. I know I wanted an easy search bar and a place to pin favorite games too, but also include a quick way to add a new score.
Digital Wireframes
This is the home screen I landed on based on what I came up with during the paper wireframe process.
This is the screen for adding your score information and photo along with ways to share it with friends or the community.
Low-Fidelity Prototype
The low-fidelity prototype provides the main user flow for posting a new high score along with looking at showing more information for each game and profile.
Usability Study Findings
I conducted two studies, one for the low fidelity and one for the high fidelity. Each uncovered some insights on how to make the app better.
Round 1 findings
Users want a better sharing function
Users want a more clear stats flow
Users want a better search function
Round 2 findings
Users want more clear buttons
Users want better home screen
Refining the Design
Mockups
Key Mockups
High-Fidelity Prototype
The high-fidelity prototype provides the main user flow for posting a new high score along with looking at showing more information for each game and profile.
Accessibility Considerations
Speech-to-Text
My first accessibility consideration was alternative ways to input text in the app so I made sure to have speech-to-text options in any text entry field.
Visibility
My next consideration was to make any of the important buttons to be in a bold red that stands out and easy to find.
Colors
Another consideration was to make the color scheme very simple with high contrast so everything is easy to read.
Going Forward
Takeaways
Impact:
Having an intuitive and fun app to track high scores adds another layer of engagement while playing arcade games along with social elements to share and build a community around. If successful enough could even boost popularity in arcades themselves.
What I learned:
I learned a lot from this project, not only how to use figma to make mockups and conduct successful user research, but just how important UX is in daily life. This was a very fun project and I look forward to what’s next.
Next Steps
First
The next step I would take would be to build out more of the smaller details not included in this, like different settings and experiment with some other social features.
Second
After step one I would reach out to an engineer who can put this together, and form a database of arcade games, cover art, and heading art for each.
Third
Once we put together something useable I would market it at local arcades and gaming conventions to pick up an audience and do a larger scale user research to see what I can improve on.
Thank you for viewing my case study for HiScore!