Project Overview

The Problem

Customers are not aware of what games are available at their local arcade.

The Goal

Create a mobile app that displays available arcade games.

The Product

The OurCade App is a game preview app that allows customers to view what games are available at nearby arcades. It also allows you to search for specific games and view a list of arcades that have the game you’re wanting to play!

Roles and Responsibilities

UX Designer - Wireframing, Prototyping, Visual Design

UX Researcher - User Research, Usability Studies

Product Owner - Product Requirements

Understanding the User

User Research Summary

To prepare production of the OurCade App, I created personas, problem statements, journey maps, user stories, and conducted a competitive audit of several arcade apps. The summary of my findings helped me form goal statements to guide user flows.

Pain Points

  • Knowing where the game you want to play is a challenge. OurCade provides a map of nearby arcades that have the game you want to play!

  • Knowing what games are available at an arcade can encourage users to visit!

  • Easily report issues with games to help maintenance and determine level of engagement for specific titles.

Persona: Ronda

Age: 22
Education: Studying for BA
Hometown: Pittsburgh, PA
Family: Single
Occupation: Student

Ronda is senior studying journalism and looking forward to graduating. She goes to the arcade with friends once or twice a month to relax and enjoy a night out. Ronda is a vegetarian and sometimes finds it difficult to find diet accommodations.

  • Finish her degree

  • Network for a job

  • De-stress from class

Goals

  • Finding things to do with friends

  • Spotty Internet

  • Diet Limitations

Frustrations

Problem statement

Ronda is a college senior who wants to spend quality time with her friends before graduation. She needs to know what multiplayer games are available at nearby arcades.

Starting the Design

Paper Wireframes

Starting with paper wireframes, I iterated on several designs and solidified the requirements for OurCade. While my designs were further refined in the digital wireframes and prototypes, this was a quick and easy way to test a variety of different layouts and provided a starting point for my Figma designs.

The Home Page was required to showcase specials, new games, or upcoming events. I also experimented with different designs for the header and footer navbars. This design ended up shifting once I moved to digital wireframes and being the Game Page instead of the Home Page.

On the Game Details Page I wanted to anchor the page with the game title and a hero image, with details about the game below and a brief list of similar games. This design also shifted once I moved to digital wireframes in order to maintain consistency, but the requirements and goal of the page stayed the same.

Digital Wireframes

Using the paper wireframes, I reviewed my user flows and then refined my page designs. I discovered that I had missed some needed user steps and decided to add more pages.

1) Users are invited to input their address to find a nearby arcade.

2) Using the Google Maps API, we can show an interactive map of nearby Arcades.

3) A list of nearby arcades with their addresses, telephone numbers, and operating hours are listed, with button icons for “View Games”, “Add Home” and “Share”.

1) The name of the arcade, and a page anchor image leads the page.

2) Horizontal scrolling options list different game genres available at the arcade for easy and quick filtering by game type.

3) A scrollable content grid shows title cards for all available games at a location, with the option to further filter results located at the top right of the grid.

Refining the Design

Usability Studies

Over the course of this project I led 2 usability studies to help refine the design of OurCade. My goals with the first usability study was to find pain points, determine accessibility, and verify the icons were easy to understand. The second study was focused on visual design feedback, product viability, and ensuring accessibility.

Round One Findings

  1. Actions taken should be confirmed to the user.

  2. Icons should have supporting text.

  3. Icons and game cards are too small and difficult to see and select.

Round Two Findings

  1. Game Cards should have text for accessibility.

  2. Additional entry points are needed for account creation.

  3. Search function should apply to arcades, and games, with a renewed search results page.

Accessibility

  • The color scheme was chosen to ensure text and images are legible to the color blind and visually impaired.

    I used coolers.co to check my color contrasts.

  • I added supplementary text below the game icons to make game selection easier. Spacing between game icons allows for 3 lines of text for longer titles.

  • My initial design used 4 columns in order to maximize the number of visible titles, however this made it challenging to see/read. Changing to a 3 column design allowed me to increase the size of the game cards so they are easier to see.

Going Forward

Takeaways

Impact

The OurCade App helps users spend less time searching for an arcade and more time playing the games they want!

“This is a great idea! Awesome Job on this” - Usability Study Participant

Lessons Learned

While designing the OurCade App I learned firsthand how helpful usability studies are for directing a design. I got great feedback and also learned some wonderful tools to check accessibility!

Next Steps

  • There are several functions that can be added to the OurCade app to make it a more viable product, a token or ticket system that allows you to save won tickets for example!

  • As part of future user research I would want to approach local arcade management and see what they would find most needed/usable in an app like OurCade.

  • The other side of this app would be the Admin Portal for arcade management and owners to add games and review reported issues.