Mobile App Design for Google's UX Certification

UX Design Project: A Game Preview App for an Arcade

by Brittney Banning

Project Overview The product: This app is designed to give customers insight into which video games are available at arcades in the New York City area, with information such as hours, location, food & drink menus, and information about the games offered.

Project duration: June 2022-September 2022

Project Overview

The problem:

The goal:

Trying to research arcades can be

To streamline all the information spread out

time-consuming. Often people don’t know

on the internet so people can comprehensively

whether they are barcades or family-friendly,

find the information they are interested in

what kind of food and drinks they offer, and/or

about arcades in the New York City

what games are available.

metropolitan area.

Project Overview

My role:

Responsibilities:

UX researcher and UX designer.

User research, creating empathy maps, building personas, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

●

User research

●

Personas

●

Problem statements

●

User journey maps

User Research: Summary

I talked to people who enjoy going to video game arcades about what kind of information they would like to see about games and game options. I discovered two main groups, one of which ecompasses, teens, kids, and families, and another of adults over age 21. Both would like to know if an arcade is a 21+ establishment or family-friendly.

Through research I also found different things people would be interested in for an arcade-related app, such as possibly reviewing games, saving favorites to a profile, and seeing which games are offered at individual arcades (multi-player vs. single, if there are consoles such as N64 available, etc).

User Research: Pain points 1

2

3

4

Pain point

Pain point

Pain point

Pain point

Spending too much time looking through photos on Google Maps to try to figure out which video games are available at an arcade.

Not knowing what kinds of food/drinks are offered at an arcade.

Not knowing enough information about the games at an arcade, such as genre, multiplayer game options, etc.

Not knowing if an arcade is a 21+ arcade or a family-friendly one.

Persona: Ryan Patel Problem statement: Ryan is a video game artist and gamer who needs inspiration from arcade games and to know affordable game options because it helps him with both work as well as post-work fun with friends.

Persona: Kristin Campbell Problem statement: Kristin is a gamer who wants to know about what types of games are available and that there is a wide variety choose from because she enjoys playing multiplayer games with friends.

User Journey Map Helping the user to streamline the process of choosing an arcade

Competitive Audit

Starting the design

●

Paper wireframes

●

Digital wireframes

●

Low-fidelity prototype

●

Usability studies

Paper Wireframes

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 prioritized an interactive map navigation feature to help users find arcades in an area of interest, as well as navigation buttons and a slider for trending arcades in the area.

Digital Wireframes As the initial design phase continued, I made sure to

Here you can see games that are offered at this particular arcade.

base screen designs on

Food and drinks offered at the arcade are also here, available to swipe through.

feedback and findings from the user research. This is the landing page for information about an individual arcade.

Easy-to-find important arcade information.

Further information about the arcade.

A button to easily exit the option and go back to the last screen.

Digital Wireframes The navigation icon exands for easy navigation to specific pages in the app.

All pages in the app have the expanding menu icon in the navigation bar.

Each of these can be individually clicked on the go to the page or the down arrow can be pressed to expand and see more page options below each category.

Low-fidelity prototype The primary user flow connects the arcade images to pages with information, as well as a game information page, an option to save favorites, and navigation options.

View the NYC Arcade low-fidelity prototype.

Usability study: findings Write a short introduction to the usability studies you conducted and your findings.

Round 1 findings

Round 2 findings

1

Users want to easily create a profile.

1

Users would like to more contrast between clickable images and background

2

Users would like a confirmation page after adding to “favorites.”

2

User would like to see more information on food menus.

3

Users would like the option to navigate to the home screen with the browse icon

3 Users would like to be able to translate the app into other languages.

Refining the design

●

Mockups

●

High-fidelity prototype

●

Accessibility

Mockups Early designs overlooked this screen, but after the usability studies, I added additional an option to sign in or create an account on the profile page.

Before usability study

After usability study

Mockups Early designs had less contrast of the images to the background. A drop shadow was added for more dimension and contrast.

Before usability study

After usability study

Mockups

High-fidelity prototype The final high-fidelity prototype has color, contrast, some animated elements, and a complete user flow.

View the NYC Arcade high-fidelity prototype.

Accessibility considerations 1

2

3

Provided access to users who are vision impaired through adding alt text to images for screen readers.

Used icons to help make navigation easier.

Used a translation feature to translate to other languages.

Going forward

●

Takeaways

●

Next steps

Takeaways

Impact:

What I learned:

These app helped users to more easily find and

Usability studies are pertinent and valuable,

research arcades they are interested in visiting

and constructive feedback from other

in the New York City area.

designers is also helpful, all of this feedback should influence each iteration of the app’s designs.

Next steps 1

2

3

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need, as well as if we are messing accessibility features that could be be helpful to users.

Continue to add updates as well as more accessibility features.

Let’s connect!

Thank you for your time reviewing my work on the NYC Arcade app! If you’d like to see more or get in touch, my contact information is provided below.

Email: brittneyleighb@gmail.com