Game Place App | K Macchia UX Design

The Game Place

My Role: UX Researcher, UX Designer
Conception to delivery

Tools: Figma, Photoshop. Pen & Paper

Project Duration: 12 Weeks

Project Type: Course Case Study

Responsibilities: Conduct interviews and usability studies, competitive audits paper and digital wireframing, low and high-fidelity prototyping, and iterating on designs, accounting for accessibility.

The Problem

Families and individuals need a way to quickly search and preview the games at the arcade.

The Solution

Create an dedicated app that allows users to preview all games, read reviews and ratings, plan a trip and make use of incentives.

The Challenges

This was the first full project that I had to design from concept to delivery. I was able to go through the entire design process and practice all that I had learned.

The Users

My first step was figuring out who I’m designing for and identifying user pain points for this app.

Research

I developed interview questions and conducted interviews and created empathy maps to understand the app’s users and their needs. The research I conducted revealed two types of user groups: those who like playing ticket games and those who like playing video games.

These two groups confirmed some initial assumptions about the types of users who visit arcades, but research also revealed there is some overlap in these user groups. Additionally, I was able to uncover user motivations, preferences and dislikes when it comes to visiting an arcade as well as using similar apps.

Empathy Maps

My research uncovered user pain points and helped me create empathy maps to hone in on who potential target users would be.

"The price, is it one coin, two, three, you know. I'm always going for the cheapest games. Because a value, I'm a big value guy. So price is definitely one of the very big ones." -Participant A

"I need info and reviews. Like that how many times it's downloaded, how many people use it. Because then they'll let me know whether it's worth it or not." -Participant D

"I'm a visual learner. And I like to preview what I'm going to be spending my time doing.." -Participant E

"I want to see what the game looks..." -Participant B

"...for me, I want to have an idea of the lay of the land and what's actually there." -Participant C

Personas

Creating personas highlighted potential problems and gave me a real sense of what the design architecture could be.

It also helped me define how the main user flows should work.

User Journey

Mapping this userjourney revealed that users need a way to easily find games to play and share with their family.

Define

With a good understanding of my users, I am now able to set a clear goal by defining the problem using crafted problem statements.

Problem Statements

Jess is a working mother of three who needs a way to plan a fun, family outing because she wants to maximize ticket collection and get cool prizes.

Samuel is a working professional who needs a way to find retro video games cabinets because he wants to play as many retro arcade cabinets as possible..

Ideation

Armed with an understanding of potential user’s problems, it’s time to design solutions.

Competitive Analysis

To find out what will be unique about The Game Place app,

I selected direct and indirect competitors with similar services to analyze. Doing so helped me to identify what they are doing well that could

inspire my designs as well as gaps in their services.

Sketches & Wireframes

When creating paper wireframes my focus was to

address gaps identified in the competitive audit

and present information easily.

Paper Wireframes

I started simple and soon began iterating on the ideas of the previous sketch. I was looking for ways to address user pain points. I also wanted to prioritize quick navigation to make moving around the app as easy as possible.

Digital Wireframes

After ideating and drafting paper wireframes, I created the initial digital designs for the app. These designs focused on

easy and accessible navigation and visual elements.

Home Screen

I wanted navigation and searching to be easy and always available

to the user.

I used feedback and findings from my user research.

Game Info Screen

On subsequent screens navigation should be easy.

I also wanted the game info to be easy to view and read to help address user pain points.

Prototype

After coming up with initial designs and creating wireframes, it was time to

put it all together and see how it works.

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of searching for a game, viewing the game info, adding the game to favorites, then viewing users favorites page.

Testing

With a working prototype I needed to see if my design actually provided users with real solutions and addressed pain points.

Usability Studies

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

Iteration

Through pattern and insight identification I had

a clearer picture of how my designs worked

for users, it was time to refine designs.

Mockups

Based on the insights from the usability studies, early designs were too bland so I fleshed out the UI and added a bit of fun to the design in hopes to make navigation easier and the user experience more enjoyable.

Before usability study 1

After usability study 1

To address some pain points after the second usability study,

I cleaned up the UI, added features and functionality and made more accessibility considerations like icon indications and better color contrast.

Before usability study 2

After usability study 2

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for searching and selecting a game. It also streamlined adding a game to a favorites list and the map. Accessibility considerations helps with navigation and readability.