About: This is a personal project done for the Google UX Design Professional Certificate course. Ready Up is a fictitious arcade company made for this prompt.
Software Used: Figma, Miro
> Project Overview
The product:
Ready Up is an arcade located in the urban areas. With such a busy environment, Ready Up strives to optimize user experiences at the arcade by preparing a preview of all the game machines offered at the location. Ready Up targets customers that are competitive or whom like to go out with friends and family.
Project duration:
July 2022 to August 2022 and December 2022 (3 months)
The problem:
Customers can be overwhelmed by the wide variety of games and unknown information when entering an arcade.
The goal:
Design an app for Ready Up that allows users to preview games offered at the arcade.
My role:
UX Designer, UI Designer, UX Researcher
My responsibilities:
Conducting interviews and competitive audits
Paper and digital wireframing
Low and high-fidelity prototyping
Conducting usability studies
Accounting for accessibility
Iterating on designs based on feedback
Understanding the User
> User Research: Summary
Some initial assumptions I made going into user research was that the primary user group going to arcades are friends and family who like spending time together by being in a new, fun environment.
After conducting interviews, a persona was created to help direct the path of the app's design, depending on the users' needs.
It seemed that these user groups confirmed the initial assumption about arcade customers, however, the research also revealed that users had a lack of information on most game machines. This would create an unpleasant experience for users at the arcade, as there are information asymmetries.
> Discovered Pain Points
> Persona
Problem statement: Shawn Willow is a busy teacher that wants to spend time with his family, who needs information on attractions because he wants to budget and make sure his family will enjoy going there.
> User Journey Map
Mapping Willow's user journey showed how useful and time-saving it would be to have the Ready Up arcade preview app.
Competitive Analysis
I looked into several competing companies, having a range of direct and indirect competitors, with the goal of comparing the information/preview given for their attractions and the navigation experience for users. After noting their general information, my first impression of their website and mobile experience, interactions, visual design, and content within the competitive audit, it seems that these features are beneficial to include within the Ready Up game preview app:
Descriptions are short and to the point
Filtration option within game page
Visuals such as images and icons for accessibility
Starting the Design
> User Flow
User task: Use the arcade game preview app to see games offered at the arcade and their information
> Paper Wireframes
Multiple wireframes were drafted for each possible screen in order to assess what elements would be necessary and well-suited to address the user pain points. For example, while designing these multiple homepages, I tried to prioritize showing some quick game information within categorical selections so users can roughly determine whether they would like the game.
Stars were used to mark the elements that would be used in the initial digital wireframes.
> Digital Wireframes
I transferred the paper wireframes to Figma, and continued to make sure that my design decisions were directed by my findings from the user research.
Navigation is needed for the user flow to go smoothly, in addition to working with assistive technologies.
> Low-Fidelity Prototype
The primary user flow was between the homepage, game page, and game info. “News” and “Profile” acted as an extra add-on, which allowed users to personalize the app, and can stay connected with the arcade too. A usability study was soon conducted with users.
Click here to view Ready Up’s low-fidelity prototype in action!
> Usability Study: Findings
I conducted two rounds of usability studies. The first study helped guide additional design choices from digital wireframes to mockups. The second study used a high-fidelity prototype to further reveal what needed to be refined or changed again.
Refining the Design
> Mockups
Digital wireframes allowed users to filter and sort the available games to their liking, which can help with knowing the gameplay, but users had no confirmation of their selections being applied. Hence, I added an “apply” button after this was pointed out during the usability studies.
After the second usability study, it was discovered that the added features of the app design confused users on what the primary user flow was. As a result, I combined the homepage and game page to help direct users to preview the arcade games.
> Key Mockups
> High-Fidelity Prototype
The final high-fidelity prototype showed a more direct user flows for previewing arcade games, in addition to adding a reset button within the filter screen. It also met users need for finding the personalized section, having confirmation of selections, and liking games which would be saved in their profiles.
Click here to view Ready Up’s low-fidelity prototype in action!
> Accessibility Considerations
Going Forward
> Takeaways
Impact:
The app makes users feel like Ready Up optimizes their arcade experience by preparing them in advance for what to expect.
One quote from peer feedback:
“If I were to go to an arcade, an app such as this would be very resourceful to prepare for my time out. You’re basically saving me time!"
What I learned:
While designing the Ready Up app, I learned how the design process is used in product development! It was clear to see how important it is to conduct user interviews and usability studies in order to know what direction I am taking my designs in. Additionally, a lot of revisions were made throughout this all, so the first idea is never the last.
> Next Steps
Thank you for your time looking through my app design of Ready Up!
If you would like to get in touch, feel free to reach out.