2024
Arcade website and app
Project Overview
This was my first project in my Google certification course, which required me to design a game preview app for an arcade. Subsequently, I developed a mobile-responsive companion website that facilitates party bookings at the arcade and showcases the various offerings of the physical space.
This project involved exploring effective color palettes, creating dynamic layouts, and crafting designs that not only captivated users visually but also ensured an intuitive and accessible user experience. Features I wanted to include in these products were:
book a party
browse games
save and like favorite games
search by genre
view upcoming events
see food menu
Empathizing with the User
Following an extensive competitive audit of similar websites and applications, I identified that the primary audience for arcades consists of families and younger students. In response to this insight, I developed two distinct personas that capture the characteristics and preferences of these target groups. The objective behind crafting these personas was to enhance the overall experience for both audiences, ultimately making visits to the arcade more streamlined and convenient. Some overlapping preferences between both personas were:
planning the trip in advance to save time
easing navigation in the arcade to maximize time having fun
reflecting a style that is appealing to both children and adults—Both simple and modern.
prioritizing accessibility for guests who may struggle to navigate the arcade due to disabilities
Time to ideate!
For ideation and brainstorming, I prioritized the following concpets in the design:
Users often prefer to book online versus picking up the phone. both options should be available.
the user should be able to save favorite games so they can pull up the list when they get to the arcade and navigate easier
the preview features should have options to show the game rating, as well as accessibility features for those who cannot hear or read among other potential barriers
For users who already know what game they want to play, there should be a search feature to lookup that game
for users who do not know what game they want to play, there should be a sort feature by genre so they can browse many games
once a game is selected there should be a video preview of that game so the user can determine if is a game they would like to play
Calls to action should be clear and placed in multiple locations on the website/app
the booking feature should walk the user through the process step-by-step to not overwhelm them
I developed a sitemap, storyboard, various user flow options, and conducted a Crazy Eights exercise to visualize potential designs. I prioritized designing the app first to enhance accessibility for individuals who may not have desktop access, and also did so because the app is intended for use in the physical arcade. Ultimately, I came up with these initial wireframes which later became lo-fi prototypes.
App Wireframes
Web wireframes
Time to iterate!
After wireframing and brainstorming, I proceeded to create lo-fi prototypes and then mockups. After completing both steps I reached out to friends for feedback on my progress to see if the user needs were being met and to correct any blind spots I had in the design. I quickly realized there were a number of things that needed to be changed or improved.
Web/mobile prototype
App prototype
User Feedback Samples
“This looks really cool and has great marketing but some of these buttons seem too big. It would also be good to see accessibility featured on the homepages more obviously” Catherine/30/UX designer
“Overall well done. The text is a little difficult to read on the homepage of the app. I also would like to see an “add to calendar” feature on the events section of the website.” Jimmy/35/UX designer
“I’m not sure what the symbols at the bottom of the page mean. But don’t mind me, I’m not very tech savvy. I can figure it out if I just push the buttons.” Bob/70/retired
“The app and website are easy to use. I do think it would be best to use dummy text instead of Lorum Ipsum. I also wish the price was given when I book a party” Robert/30/engineer
“Theres so many great features and alot more you could do with this idea! It would be really cool if I could rate the games or see what the rating is on a game.” Jessica/34/teacher
“The app is super intuitive and easy to use but I found it confusing that there was no confirmation when I added or removed a game” Tyler/32/operations manager
Final Products
Mobile App
After user testing on the initial app mockups and prototypes, I implemented the following feedback among others:
Increased the size and contrast of the text on the homepage
replaced lorum ipsum with dummy text
decreased the button size and increased the contrast of buttons so they stand out more
include confirmation for adding or removing a game from favorites list
considered adding text on navigation bar, but decided not to based on the primary target audience
featured accessibility clearly on homepage
added star ratings and maturity ratings
Website
For the website, I implemented the following feedback among others:
included a feature to add events to one’s calendar
improved final confirmation page
changed one long form to a multi-step process for booking
added feature on booking page that has different packages and prices to choose from
Where do we go from herE?
This initial project provided an exploration of the fundamental principles of design. I thoroughly enjoyed customizing the project to align with the target audience and collecting feedback that contributed to the product's enhancement. There are also innovative ideas for new features, such as community chat capabilities and an interactive arcade map that could turn casual visits into rewarding experiences. In my user research, I identified that this platform could expand beyond individual arcades, helping users locate games across different venues. The opportunities for development are exciting!
