Ivory Lee | Scored!

Project Overview

Scored! is a high-score tracking app designed for the arcade and strives to provide users with an cumulative, data-driven, and fun gaming experience with friends in real time. Not only does it allow users to create a competitive environment live and post-game, it also provides the most up-to-date information on arcade news and dates. Scored! targets all arcade goers and gaming enthusiasts who wish to have an easy and efficient way to keep track of their scores across games individually and as a group.

The Problem

Arcade games have a built-in highscore tracking system. However, the system usually only tracks the top scores overall out of all players who decide to play. Newer mobile, computer, and video games all have the option for players to store game scores to an account or profile, allowing them to track scores over time.
This is not the case for arcade games played within arcades. Gamers at arcades also want to be able to track their scores across games over time and amongst friends.

The Goal

To design an all-in-one score-tracking app that allows users to see individual and friends’ statistics, as well as compete with their friends live, and be able to get the latest news in the arcade gaming world.

Understanding the User

User Research

Individual interviews were held in person and over Zoom with arcade goers between the ages of 18 and 42. The initial assumption was that everyone went to the arcade to have fun, eat, and relax. It was discovered that the social aspect of playing with friends and family had a greater impact on how enjoyable the experience was. The main motivation for playing, as well as what sort of experience they have at the arcade, also varied between ages.

Personas

Persona 1

“The two lowest scorers pay for the food, but it’s sometimes so hard to keep track of scores when there’s many people and everyone is doing their own thing between sessions.”

Age: 19
Education: In pursuit of Bachelor's
Hometown: Brasilia, Brazil
Family: Single
Occupation: Student

Frustrations:

- To have a new cultural experience and make friends with a variety of people
- To study hard and play hard

Basic Information:

- “We love a good competition, but can’t always tell who’s better or whether we have improved because we always forget our scores.”
- “In larger groups, it’s hard to keep track of turns and/or who is playing next against who.”

Roberto is a 19-year-old university student in Boston who enjoys spending time with his friends. He enjoys board games but has recently been introduced to the arcade scene. He and his friends hang-out at the arcade once a week to de-stress, catch-up, and participate in friendly competition. While the group love to try and out-perform one another, they find that it is often hard to keep track of scores and whose turn it is to play because of large group sizes.

Goals:

Problem Statement:
Roberto is a student who hangs out at the arcade with friends who wants to be able to quickly decide on playing order and note down every individual’s scores quickly because he wants to spend as much quality time playing and chilling out with friends as possible and not waste it on being frustrated and nervous about going around to organise logistics.

User Journey Map:
Roberto is a student who hangs out at the arcade with friends who wants to be able to quickly decide on playing order and note down every individual’s scores quickly because he wants to spend as much quality time playing and chilling out with friends as possible and not waste it on being frustrated and nervous about going around to organise logistics.

Persona 2

“While we can eat and play games at the arcade, the wait times for games and its crowdedness is simply not worth it sometimes.”

Basic Information:

Goals:

Frustrations:

Age: 42
Education: M.D.
Hometown: Chicago, IL, USA
Family: Married, one child
Occupation: Psychiatrist

- To be a great support for patients
- To spend quality time with family and be a role model for child
- To de-stress as much as possible after work

- “It’s frustrating to find a suitable game, after wandering everywhere to find it, just to see someone or a group of people already there.”
- “Sometimes it is unclear off-the-bat whether games are PG or not or what they are about without playing it first. We want to spend our limited time wisely.”

Noora is a 42-year-old psychiatrist who lives with her wife and eight-year-old son. She works long hours at the hospital and so wants to make most of the time off that she can with her husband and watching her son grow up. She enjoys spending time with her family through meals and playing games. They visit the arcade together occasionally and really enjoy it, but often find it intimidating with the number of people and games there are.

Problem Statement:
Noora is a busy psychiatrist and parent who needs to know which games are age-appropriate and unoccupied because she wants to spend as much quality time playing with her son as possible and not waste it waiting for a spot or finding out the game is not age-appropriate after waiting to play it.

Pain Points

1. Challenge friends

2. Improvement over time

3. News central

4. Age rating

5. Game availabilty

Players want to be able to challenge friends quickly and have these scores linked directly to everyone’s profiles.

Players want to be able to receive news about the latest games and highest scores around the globe.

Players, especially those with younger children, want to be able to read about game description and understand the age-appropriateness before playing.

Players want to be able to check whether games are vacant or occupied directly from their devices without leaving their spot.

Players enjoy many games but want to be able to keep track of their scores overtime to see if they have improved.

Competitive Audit

Researching realised both direct and indirect competitors. Specifically, the competitors are Scorebit, a high score tracking mobile app for pinball enthusiasts, and iScored, an all-in-one score online web tracker for all arcade games. While these two have similar purposes to what Scored! tries to tackle, they don't have an all-in-one solution on an app that includes news and stories, score-tracking, and friends/messaging. This is where Scored! can fill the gap.

Starting the Design

As the main feature of this service is to be able to quickly create a room where players playing order can be randomised (or chosen) and scores quickly reported, the score-tracking feature was ideated first.

Paper Wireframes

I did a quick ideation exercise to come up with ideas for how to address the big gap identified in the competitive audit. Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritised having easy access to start a new game to help users begin playing quicker.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
‍

Being able to view past results of previous games or view results of that of friends was a key user need to address in the designs, in addition to being able to view ranking order immediately after a game.

Lo-Fi Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow to all pages of the app, along with the primary user flow of creating a new game and inputting scores for each player.

I then conducted a usability study of this prototype to get heuristic feedback before starting the hi-fi design and prototype.

Usability Study: Parameters

Study type:

Location:

Participants:

Length:

Research questions:

Unmoderated

- 5 participants: two males, three females, between the ages of 18 and 57
- All are locals who have various working backgrounds and schedules

20-25 minutes

- How long does it take a user to complete the setting up the game “room” process?
- What can we learn from the user flow, or the steps that users take, to start, record, and end a game?
- Are there parts of the user flow where users get stuck?
- Are there more features that users would like to see included in the app?
- Do users think the app is easy or difficult to use?

Taipei, Taiwan (remote)

Findings from the usability study was used to make insights and then further prioritised by order of importance to make changes in the next mockup.

Usability Study: Findings

In total, I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used high-fidelity prototypes and revealed what aspects of the mockups needed refining.

Round 1 Findings:
1. Users want and like features that allow for comparison and even after a game(s) has ended
2. Users don’t all want to wait around and watch the full gameplays in order to note down scores
3. Users can get confused when the same feature/page is not worded exactly the same throughout the app

Round 2 Findings:
1. Different sections/pages of the app are hard to navigate to
2. The theme and colours of the mockup is not very reminiscent of an arcade or gaming
3. Some animations are haphazard and not smooth

Hi-Fi Mockups and Prototype

Based on the insights from the usability studies, I applied design and feature changes. Early designs involved similar features with a different colour scheme. However, after the first usability testing users noted that the overall theme did not really match their perception of arcades or gaming. I have set the default theme to dark theme and chose colours reminiscent of the two.

hi-fi mockups of discover page before and after usability study

Additionally, while the second usability study revealed that the initial confusion in navigation due to inconsistencies in word usage was resolved and that the bottom navigation bar was useful, some users still found some difficulty in navigation to the more embedded pages. I have added an additional navigation drawer to allow users to select the exact page they want to get to.

hi-fi mockups of home page before and after usability study

Visual Design - Colour and Style

The colours of the design were chosen from browsing video game home screens and researching what dark theme colours work well to represent arcade games. Below is the colour palette with the functions that they were used for. The fonts of Space Grotesk was chosen for its use and reminiscence of arcade and video games.

Title
Space Grotesk Bold - 20pt
Heading
Space Grotesk Medium - 14 pt
Body Text 1
Space Grotesk Normal - 12 pt
Sub-Body Text 1
Space Grotesk Light - 11 pt

Sample Features and Pages

Below are some examples of features and pages in the hi-fi prototype of the Scored! app.

Home Page
- Has easy access to leaderboard of the starred games/most common games that the user plays, with updated scores
- Add score button on screen
- Shows the recently played games and friends played with to allow for efficient navigation to uploading new scores, viewing scores, and starting chats and/or games with friends
- Discover section with recent news/updates
- Bottom navigation bar to navigate specifically to the two other main pages, without having to use the hamburger menu
- Large primary action bar to either add (start) new game or new friends

Pictorial Circle Menu
- In addition to having the '+ Add Score' button on the main page and the bottom navigation bar that takes the user to the main pages of 'Games & Statistics' and 'Friends', the app has a pictorial circle menu that the user can use to quickly start a new game or add a new friend
- Users don't need to click into the individual pages to do so

gif of the pictorial circle menu in action

'New Score' Process
- Users can either click the '+ Add Score' button or click into one of the games to enter a new score and 'submit' it
- Users can also, within each game, view the current high-scores and see rankings either within friends or of all-time
- Confirmation pop-up to show that the scores have been saved

Hamburger Menu
- Feature that allows users to navigate to specific pages directly without having to scroll down the 'Home' page to the different sections or navigate within the different sections to further sub-sections using the bottom navigation bar
- Animation of the menu sliding in and out which is not only familiar to smartphone users but makes the app more screen friendly and less crowded

Final Prototype

The final high-fidelity prototype presented cleaner user flows with a theme that is more reminiscent of gaming and arcade as well as more intuitive navigation.

Evaluation and Going Forward

Accessibility Considerations

During the design process, I made sure to take accessibility considerations into account. Three main ways accessibility was taken into account are:
‍
1. The colour palette has been tested using the Material Design colour tool for usability and follows the WCAG guidelines
2. Users are able to navigate through the app (especially to the main features of the app) in different ways (i.e. either scroll, tap, or drag) depending on accessibility and/or preferences
3. Apart from the ‘Discover’ page, all pages have minimal text and function mostly using colour and images. Users can navigate through the app more efficiently. The features and layout are compatible with screen readers too.

Takeaways

Impact

Users felt like the Scored! high-score tracking app has not only met their needs, but gone above and beyond.

One quote from peer feedback: “The app made it so easy and fun to play with friends at the arcade! We don’t have to decide who goes first, second, etc. and everybody’s scores are saved to each player’s account afterwards too. I would definitely use this app as a go-to whenever I play any game, even to view the latest arcade news too.”

What I learned

While designing the Scored! app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps

Though much has been done regarding this project and prototypes, there are always more room for growth and improvement to make the design the best that it can be. Below are three further steps that could be explored in the future.

1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed
2. Conduct more user research to determine any new areas of need.

Want to work together?