16-Bit Radar

Preview 16-Bit Arcade’s games by looking through trailers and summaries before stepping foot into the building.
Overview

16-Bit Radar is an app for the arcade “16-Bit Arcade”, which users can use to preview and look through trailers of games that occupy the business. With this app, users can find a game that piques their interest without even stepping foot into the building.

Users can choose their preferences on what kind of game they want to look through, including the genre and whether the game is multiplayer or single-player. After choosing a game, the user can watch a gameplay or cinematic trailer and read a small summary given to them. Finally, these users can save the games they’re interested in their library for future reference.

Role
UX/UI Designer
UX Researcher

Time
November 2022-April 2023

Tools
Figma
Adobe Illustrator
Photoshop
Miro

Challenge

Arcades are hard to navigate, and finding out what games do is even harder. This doesn’t even include the lack of accessibility in finding games that work for the users' specific needs.

Goal

Creating an easy-to-use app that helps users of all kinds of backgrounds pick a game before stepping foot into an arcade. The user can put in unique preferences for the app, and the app can give the user games pertaining to those needs.

. Process Overview .

01 Empathize ---- Understand The User

||| 01 EMPATHIZE ||| USER INTERVIEWS ||| USER PAINS ||| PRIMARY GOALS ||| COMPETITIVE ANALYSIS ||| USER PERSONA ||| USER JOURNEY ||| USER FLOW ||| 01 EMPATHIZE ||| USER INTERVIEWS ||| USER PAINS ||| PRIMARY GOALS ||| COMPETITIVE ANALYSIS ||| USER PERSONA ||| USER JOURNEY ||| USER FLOW ||| 01 EMPATHIZE ||| USER INTERVIEWS ||| USER PAINS ||| PRIMARY GOALS ||| COMPETITIVE ANALYSIS ||| USER PERSONA ||| USER JOURNEY ||| USER FLOW |||
User Interviews

For this project, I conducted interviews with 7 college students who frequented arcades, as well as 2 individuals over the age of 40 with full-time jobs and less time on their hands. With this information, I was able to understand that both the younger college students who took gaming very seriously and older individuals with families were frustrated by the lack of direction with arcades, and only really got a grasp of them after frequenting the arcade for a while.

. Competitive Analysis .

Competitor Summary


To learn a little bit more about the market, I observed and analyzed four popular entertainment center chains and their apps and noted some of the features they were offering their users.

Although many of the companies had very similar features when it comes to showcasing what was inside their chains (such as food, new machines, bowling, etc) and had their own branding and clean designs; Three of them did not have any descriptions of what kind of specific arcade games were inside their establishments.


Chuck E Cheese did have information on their games. However, a lot of it was way too dense and difficult to read.

Meet The Users

Using the information from the interviews, I created two personas that represent the primary groups. One was around college-aged, and the other was a busier and older woman. For this case study, I'll be using Faron as the main user.

User Journey

Creating a User journey helped me understand Faron’s obstacles more in detail, from when she entered the arcade to when she started to play.

Mapping out Faron’s journey forced me out of my box and figure out what pain points could happen to my design that I would never have thought of before

User Flows

For this study, My objective in creating the user experience flow was to make decision paths clear and guide the user toward their goal. In this flow, the goal was to have the user look for a game of their choice with ease and preview it. After previewing they have the choice of saving the game into their saved games library.

02 Design ---- Starting The Design

||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES ||| 02 DESIGN ||| SKETCHING ||| WIREFRAMES |||
Sketching

I started sketching out ideas to map out the skeleton of the app prior to working on low-fidelity wireframes. Sketching allows me to visualize the multiple paths I can take before committing to one.

I didn't want users to need to play around with the app for too long before being able to figure out how it worked. So my main goal while working on these sketches was to make the process of finding games as streamlined and easy as possible.

Wireframes
I used my sketches to guide me during the wireframing portion of my design process.

03 Test ---- Testing and Refining

||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST ||| 03 TEST ||| UI KIT ||| USABILITY TEST |||
Usability Study

After the low-fidelity prototype's creation, I interviewed 5 users; ages ranging from 20-40.

I synthesized my findings to group similar thoughts and behaviors into affinity and empathy maps on Miro.

Each study was conducted in person and lasted about 15 minutes. Here are my main findings:

04 Refine ---- Refining The Design

||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH ||| 04 REFINE ||| HI FIDELITY SKETCH |||
Hi Fidelity Sketch

After the usability study, I went to work on the Hi-Fidelity prototype in Figma. I added a new arcade map page, spaced out games so as not to make the app crowded, and added in other details such as the price of the game so people don’t have to worry about spending more money than they need to for a game they’re interested in.

05 Deliver ----

||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS ||| 05 DELIVER ||| INTERACTIVE PROTOTYPES ||| FINAL SCREENS ||| TAKEAWAYS |||
. Interactive Protoype .

. Final Screens .

Creating an Account/Logging In

Using the app, users can create and log in to their account. After the user saves enough games to their library, the app starts to recommend games that align with the user’s preferences.

In the user’s profile page, it shows the user’s most played games as well as a summary that the user can create.

The user can also review any game as well as look through other player’s reviews.

Browsing for Games/Saving into Your Library

After logging in, the user can browse games located in 16-Bit Arcade and add them to their library to look at later. The games are separated into genres, and have information of where exactly each game is located: as well as price, languages, a summary, and a trailer.

. Takeaways .

Accessibility Considerations

Every game is going to be labeled so as to make it easy for screen reading technologies. The app will have a dark and light mode option, as well as several language options that aren’t just English. In the future, I want to collaborate with people with disabilities to provide better accessibility, since arcades aren't really known for being accessible.

What did I learn from 16-Bit Radar?

16-Bit Radar was the first project I worked on in the Google UX Certificate Program. I learned a lot about UX research and design, and working with programs like Figma and Miro for the first time was enjoyable. The amount of research, files, and time I had to use before even starting the wireframes was a pleasant surprise since I enjoyed the research portion of this study a lot more than I thought I would.

With my background in design, I was excited to work on a style guide for this app, and using my previous background and new knowledge, creating 16-Bit Radar was a lot of fun. I relished the creative freedom I had in designing something completely new from scratch. This was a great first project, and I’m excited to do more in UX!