Arcade App

My Role

Product Designer, UX Researcher

Timeline

August 2022 - July 2023

Tools

Figma, Marvel, Miro, Notion

The Background

The arcade industry is a massive market in the UK.

Arcades in the UK generate over £845m (according to research by the British Amusement Catering Trade Association) as key attractions in towns and cities that draw millions of visits. As arcade gaming surges as a popular social activity, arcades are seeing renewed popularity as exciting spaces for both locals and tourists, underscoring a growing demand for innovation in this market.

Curiosity caused me to dig deeper. Through competitive auditing, I noticed a gap in how popular arcade companies manage user's visits: there is little digital integration in place that could streamline game selection, and interactive gameplay. My goal for this project was to enhance engagement by reimagining the way users connect with and navigate arcade spaces.

The Problem

People don't want to keep count of multiple games in their head.

Competitive arcade goers find losing track of scores across different games frustrating. This disrupts the competitive spirit, as players constantly have to recall scores to compare them instead of fully enjoying the arcade experience.

Goal

Making it easier for people to track their high-scores.

The primary goal was to provide a solution that allows users to stay focussed on competitive gameplay.

As this was a passion project, the product's success was measured through:

Net Promotor Score to assess the solution's perceived value and potential impact on the arcade experience.
Quantifying user interest (likes and engagement) when marketing the solution on social media platforms (Tiktok, Instagram).

The Solution

Introducing a new in-app shared leaderboard experience.

The solution is digital arcade feature that allows users to share a competitive leaderboard which tracks and updates their high-scores across multiple games during an arcade visit.

Design Process

Design Thinking.

To understand as much as possible about the pain-points people face when visiting an arcade, user research needed to be the backbone and fuel of the project.The Design Thinking framework helped me continually use research and data to guide the direction of the project.

User Research

Conducting primary research.

Through recruiting participants directly from arcades in London, and through social media snowball sampling. I conducted survey research with 39 participants who go to an arcade at least four times annually.

Of these participants I held 12 further user interviews to gain more qualitative data about people's experiences at an arcade. These were people that differed in age, ability, and occupation.

I kept my questions open to allow for the users to provide as much information as they wanted. A lot of my questions also followed up with "why" for me to get a better understanding of the user's motivations and needs when visiting an arcade.

User Research

Personas Kali May and Daniel Foster were created to represent this research.

Meet Kali May.
Users between the ages of 14-35 commonly referred to an arcade experience as a competitive social activity that they like to experience with companions.

Meet Daniel Foster.
Users between the ages of 40-60 tended to say that they like the independent experience of an arcade, and that they are more motivated to see how their own scores improve over time.

User Research

Competitive Analysis

I could not find any native arcade apps on the App Store or Google Play that offered a high-score tracking feature, so I noted this as an opportunity gap in the market.

Instead, I analysed the websites of various game-entertainment companies to gain some insights on the design and user experience of these websites.

My direct competitors were companies that offered arcades, and my indirect competitors were companies that did not offer an arcade, but offered similar entertainment to my target users.

You can view the full spreadsheet of my market research here.

User Research

Top insights.

Here are the top insights that informed the product's direction, extracted from quantitative surveys, qualitative interviews and market research.

76%

of respondents

Shared that they wanted a leaderboard system that competitively tracks high-scores during a visit with friends.

61%

of respondents

Revealed that they want a way to track their individual high-score progress over multiple visits to stay motivated to improve over time.

44%

of respondents

Shared that they would like a way to join a leaderboard to compete with players within their own skill level.

Ideate

Starting the ideate process - user flows.

Creating user flows were a useful tool for starting to ideate how many actions a user would need to take to reach an end goal. The below example demonstrates a main user flow for a user to create a custom friend leaderboard that friends can join via a shareable link.

Ideate

Information architecture to visualise and sort pages at a bird's eye-view.

A mobile sitemap allowed me to provide more detail on what elements users should expect to find on each page of the arcade app. It also allowed me to organize pages into parent/child hierarchical systems so that pages can be organised in ordered and appropriate places.

Crucially, constructing the information architecture of the app was very helpful to have a high-level view of what the pages in the app will consist of, where all information within the app will be located and how the users can get to each piece of information.

Ideate

Early concepts with paper wireframes.

Paper wireframing was a useful method to rapidly brainstorm different design features that addressed users' pain-points. Having a clear way to scroll through different leaderboards and favourite games became a prominent feature that changed in the different iterations of the homepage design.

Home V.1 turned out to be the final iteration of the homepage's design in the early concept stage. I did the same for different pages of the app, like the user profile and what the friend leaderboard would look like.

In each paper wireframe, ✰stars✰ were used to mark which features in the wireframe were a good idea to transfer onto other designs too. For example, keeping the home button at the bottom-centre of the page. This feature continued to appear in the same place for future designs.

Ideate

Digital wireframing revealed accessibility problems in paper concepts.

Transferring from paper to digital wireframes, I wanted to see how my paper designs could translate more realistically on a digital interface, and to see if my paper wireframes had design problems that were less feasible on a screen.

I found that copying my exact paper designs to Figma showed how tightly packed or small some of the buttons and text were on my paper designs. The text size wasn't accessible, and didn't meet the minimum size requirements for Android's Material Design guidelines and Apple's Human Interface Guidelines for designing mobile platform experiences. I amended this on the digital design by making the buttons larger and placing larger text inside of the buttons.

You can find more design justifications for my digital wireframes below.

Ideate

Low-fidelity prototyping in Marvel helped me sketch missing screens with users in real-time.

I started prototyping by photographing my paper wireframes and uploading them to Marvel, allowing users to quickly interact with the app for feedback in a usability study.

Starting with paper prototypes made it easy to showcase interactivity ideas and quickly adjust based on user input—whether tweaking a transition in Marvel or sketching new screens on the spot.

For example, I quickly sketched a new "Overall Results" page in seconds with a user during a Marvel session after discussing their opinion of the flow in detail.

You can have fun with my Marvel prototype here.

Ideate

Low-fidelity prototyping in Figma.

After prototyping on paper, I created a lo-fi prototype for the app in Figma to have a digital product for users to interact with during a more detailed usability study.

You can have fun with my Figma prototype here.

Testing

Running moderated usability studies unearthed some navigation frustrations.

I ran moderated usability studies with 8 users with my Figma prototype to assess how easy or difficult users found navigating through the product in detail. I noted all of the users' click paths, behaviours, and opinions of the prototype as they completed the usability study tasks to understand how they navigated through the product, and what they thought about the navigation and of the product.

After the usability studies, I created an affinity diagram to visually represent the data I collected. Each colour represented a different user. I put direct quotes, behaviours and opinions on individual sticky notes, then organised relevant sticky notes into distinct groups. This made it easier to notice similar user opinions about my product and specific pain-points that were experienced by multiple users.

Here are a few of the key takeaways:

75%

of users

Were frustrated by how easy it is to accidently finish the leaderboard session.

75%

of users

Were still confused on how to navigate the homepage, as many thought "there was a lot on one screen".

62%

of users

Took 9+ seconds to find the create a custom leaderboard button during a prompt.

Testing

Using affinity data to iterate on wireframes. designs.

I returned back to using pen & paper to iterate on my wireframes considering the insights I had gained from the usability test.

I made some significant design changes based on usability pain-points experienced by the majority of test participants, for example:

UI Design - Atomic Design System

Adding colour to feast the eyes.

I transferred back to Figma and started to explore what the visual identity of the app should be - design decisions on colour form a massive part of this.

By studying psychological colour theory and market trends in entertainment design, I began developing a colour system that would engage users. Neutral tones formed the foundation, creating accessible contrast and focusing attention on interactive elements. I used vibrant purple tones to evoke creativity and connection, aligning with the product's vision for an entertainment arcade app. I selected the primary colours for CTAs to draw users in, while the accent colours are high contrast complementary colours to the purple tones to add a lively and engaging feel for users.

UI Design - Atomic Design System

Selecting font families that give an arcade feel.

To prioritise readability, legibility and accessibility (especially for youth audiences), I first selected sans-serif typefaces that can provide high contrast for users to have for a straightforward reading experience. I also opted for rounder-shaped styles to enhance psychological coherence when line reading.

For branding, I chose a typeface that emulates the retro old-school arcade feel, whilst keeping it sans-serif too also look modern to younger audiences.

To ensure consistency in typography in my entire design, I created a hierarchal system that carefully notes the use of different typefaces, and their styles, sizes, and weight (a few examples shown).

Testing

Priority items and CTAs needed to stand out more.

I tested the high-fidelity prototype with 7 users, assessing their behaviour and body language to evaluate its ease of use. I also gathered their feedback on the app's UI and visual structure.

Summary of key design changes based on research insights:

UI Design

Ensuring a11y compliance.

Throughout the UI stage of the design, I created a table to document all of the foreground and background colours I used in my designs, updating the table whenever I iterated on selecting colours.

I used the table to make sure all foreground colours on the app were compliant with the WCAG. I did this by making sure all elements reached AA level with a minimum 4:5:1 contrast ratio for normal text (WCAG 2.0). A few examples are shown below.

The final UI captures my vision for a vibrant arcade experience that feels exciting and simple to navigate. Each screen balances functionality with aesthetics, making main user flows both engaging and straightforward. I focused on honing my iOS design skills, carefully studying Apple’s Human Interface Guidelines to ensure each screen aligns with Apple’s design principles for their devices.

Project Review

Accomplishments and Impact

Although this was a passion project, here are the app's outcomes on target users and business collaborators, and my accomplishments during the course of the project.

6,800+

User interest

When I marketed the app concept on social media (TikTok).

NPS score

When running final prototype tests with users, showcasing concept value for arcades to implement.

Arcade businesses

Expressed interest in my arcade app, contacting me to discuss the product's intentions further.

40%

Increase

In user-approved concept ideas by using Marvel to iterate and tweak wireframes in real-time with users.

Project Review

Reflections And Lessons Learned

Don't fight over who *really* won. Keep the score at your next arcade visit.

Arcade App

Don't fight over who really won. Keep the score at your next arcade visit.