Arcade Check in App

An app for an arcade where users can check in and sign up for future events.
UX Research \ User Testing \ UI Design

Information

Project Duration

August 2022-October 2022

My Role

UX Designer

Software Used

Figma / Adobe Creative Cloud

About

The Arcade Check-in app was the first project for the Google UX Design course. The project spanned about two months, during which I delved into User Research, interviews, wireframes, and testing, all of which were new to me. This was a significant learning experience that I chose to undertake to see how I can design something that will help improve users' lives. It was also the first app I created in Figma, and it taught me how to use the many features like components and plugins that made designing an app accessible.

Project Overview

The Problem

Attendees want a simple way to check into an event through their smartphone. They do not want to be waiting in lines when checking in.

The Goal

Create an app that will make the check in process simple and painless for our users. Make sure they are easily able to open the app on their phone and find the event with little issues to check in.

User REsearch

User Journey

I conducted interviews with different types of gamers about what their needs are for this check-in app. I wanted to see what kind of games they were playing or events they wanted to attend. Only some video games are similar. Some games have a cooperative experience, while others are much more competitive. My users wanted a simple and easy way to check into the event on their phones.

Personas

Based on my research, I created a persona of a gamer who wants to attend gaming events. Knowing the user's pain points helped me make the wireframes and Hi-fi designs.

Wireframes

The wireframes for the Arcade check-in app went through several revisions. I was trying to decide on a layout that made sense for a check-in app, but I wanted my users to find out where they were going in the app. The check-in process needed to be simple. This is where I started to learn how to use Figma prototype features. Prototyping was eye-opening and fun to test before showing it to users.

multiple events page
No items found.

Usability studies

1: Some users had trouble finding the settings menu

2: Yes and No labels did not make sense. Placement was not good.

3: Users did not need the "No" button to cancel check in.

Final Design

Summary

I wanted my hi-fi designs to reflect an event app in terms of colors. I tried creating something with darker colors, like black to see how it will look. While I liked a black background, i wanted to add a bit more personality to the app. I settled on a dark blue background, which users complimented when using the final design. The button color was orange to draw users' attention. For my navigation, users appreciated the bottom nav, and the icons I used from Iconify helped with ease of use.

No items found.

Final Design

Summary

I wanted my hi-fi designs to reflect an event app in terms of colors. I tried creating something with darker colors, like black to see how it will look. While I liked a black background, i wanted to add a bit more personality to the app. I settled on a dark blue background, which users complimented when using the final design. The button color was orange to draw users' attention. For my navigation, users appreciated the bottom nav, and the icons I used from Iconify helped with ease of use.

Desktop design

No items found.

Mobile Design

No items found.

Conclusion

Takeaways

I learned many lessons when designing my first app. In my initial wireframes, my button placement could have made more sense for various users, as my research showed. The positive feedback I received reassured me that I paid attention to what my users wanted from a check-in app.

What I learned

The Arcade Check-in app was the first app design I created. Designing this app differed from the websites I had made since I had almost always considered the desktop view first. Generally, my designs start on the desktop, and I scale down to what the website should look like on a phone screen. My user research and testing helped with this design challenge. Once my users were happy with the final product, I knew I was going in the right direction in designing this app.

Back to top