Arcades, we all love them. From winning to beating your friend's high scores; arcades bring the fun competition we all secretly crave. However, no one likes queues or being left in the dark.
Role: Product Designer
Timeline: 2 months
Tools: Figma, Notion, Zoom
🧩 Problem
Occasional arcade goers are not informed quick enough, if not at all. And arcade enthusiasts are having their game days disrupted.
People that attend the arcade feel they aren't kept in the loop. Their favourite machines are occupied whenever they want to play or event capacities nearing the maximum are causing anxiousness. These are just some reasons why users are not content with their arcade experience.
💡 Solution
An arcade companion app for mobile that provides arcade goers regular updates and helpful information to make their arcade experience seamless.
"Look, basketball has no queue right now, let's play!"
Keeping arcade novices in control of their day out whilst simultaneously providing seasoned competitors with the elements they crave digitally to keep them coming back.
Features:
-
Real-time arcade game availability
-
Event update notifications
-
Global and local leaderboards
-
Safe Space: A pre-set place where all individuals within a group, are notified, in-app, to go to in case of an emergency
🚚 Deliverables
-
User Interviews
-
User Journey Maps
-
User Personas
-
Wireframes
-
UI Design
-
Interactive Prototypes
-
Usability Testing
✏️ Key Learnings
-
Refer back to the research
-
Users value information
-
Design systems are the way forward
🌍 The Process
Initial Design Prompt: Design a special event check-in app for an arcade
As part of the Google UX course, I chose a prompt to work on during the certificate program.
I chose this prompt because of the intrigue on how I could potentially implement a digital experience to help arcade goers solve an existing problem or pain point they may have.
👤 Research
User Interviews
To empathise with potential users of the arcade companion app, I decided to conduct user interviews over Zoom. The interviewees volunteered to take part through a tweet I posted.
To cover all areas of the design prompt, I split my user interview into two sections: event and arcade questions.
My interview goals before conduction:
-
Would users like to know event popularity beforehand
-
What events can implement to improve the experience
-
Do users usually attend arcades solo, in a couple or with friends
-
What do people enjoy about the arcade
-
Usual waiting times at the arcade
Stand out Interview Statistics
Out of 7 interview participants, these are the stand out insights and statistics:
-
100% of the participants want to know how many attendees will be at an event
-
71% of participants have been in a situation where event information has changed and was not informed
-
71% of participants have had trouble locating friends while at an event
-
100% of participants would like to know if arcade games are busy in real-time
Thematic Analysis
After my in-depth user interviews, I applied thematic analysis to identify patterns in my qualitative data. I chose the thematic analysis method because it allows me to generate similarities between the interviews to derive themes and pain points from the content.
Sticky notes, sticky notes.. and more sticky notes!
After sorting through the data, these are the codes that came up frequently between each participant, in both sets of interview questions. The headings above each column indicate the theme surrounding the points below them.
To further analyse, I sorted the codes into surrounding themes to pinpoint pain points in the data. This allows me to gauge overall and specific problems the interviewees have encountered.
After figuring out the underlying themes amongst the codes, the main themes that arose were, 'Information', 'Social' and 'Gamification'.
This has shown me that the potential users prioritise a solution that keeps them informed, provides connectivity between friends and features that unleash their competitive side.
User Personas
Once I analysed the user interview data, I created user personas to represent the core user's who will engage with my product.
Kira Summers:
Ben Jackson:
Creating these user personas helped me have a clear understanding of who I was designing for and why I was designing the solution.
Both Kira and Ben have clear goals and frustrations that give me a vivid image of what pain points my final product will solve.
User Journey Map
Next, I created a user journey map to imagine the experience my user personas would undergo when interacting with my product.
The experience above clearly illustrates the experience I need to maintain to prevent my potential user from experiencing any pain points during the use of my product.
📌 Defining the problem
After synthesising and analysing my research, I extracted three main pain points I wanted my digital experience to solve.
Pain Point 1: Unaware of arcade game queue information and status of availability
Many interviewees expressed displeasure when arriving at an arcade machine that was occupied or out of service which hindered their experience.
Pain Point 2: Not knowing event capacity
Users have increased concern when attending events near capacity due to the unfortunate COVID-19 era. Not being aware of the event capacity beforehand has led to users being anxious and some cases, not attending at all.
Pain Point 3: Losing friends at events
Some users reported that they lost contact and sight of friends at events they have attended causing distress during the event.
🔶🔷 The double diamond saves the day
To conclude, the research approach I took allowed me to diverge amongst initial thoughts and issues from the user and then converge in on the particular pain points that needed addressing.
These insights shifted the focus from the initial design prompt to a more user-focused problem that I can design a solution for, to meet the potential user's needs.
Now onto...
✍🏾 Ideating the solution
Initial Sketches
To kickstart the ideation process, firstly, I wanted to get pen to paper so I could get all my ideas out in front of me.
Low Fidelity Wireframes
Below are low fidelity wireframes of my potential app to solve the pain points of arcade goers.
🎨 UI Design
Click to enlarge on desktop. Zoom in on mobile.
🤔 Adaptations
Too many stats to keep track of!
In the wireframe stage, I imagined the leaderboards portion of the application to be housed on the friend's page.
However, after designing the solution I realised leaderboards are very extensive so they should be housed in a stand-alone section.
🦾 Interactive Prototype
After completing the UI design I prototyped the application to get a real indicator of how the final product would potentially feel.
Take it for a spin
Interactive prototype link: Figma Link
🌾 Field Test
After completing the full UI design and prototype, I conducted usability testing with 5 users to determine if I solved the pain points and any potential improvement opportunities to work on.
What I hoped to learn from usability testing:
- Difficulty in performing set tasks (1 - not difficult at all, 5 - very difficult)
- The user's pleasure using the app
- Whether it will be suited for an arcade environment
- If it genuinely helps the user
Results
After usability testing, the arcade companion app had a very good reception and feedback was very positive.
"All the information is organised really well!"
-
100% of users rated all tasks either a 1 or 2
-
100% of the users enjoyed the UI design and overall experience navigating the product
-
100% of the users could see themselves using the app in an arcade environment, particularly in group settings
-
2 users, in particular, expressed their admiration for the product's information architecture
However, some minor issues needed to be addressed to further aid the user.
🦋 Iterations
Filters
Users struggled to realise the filters and 'see all' buttons were clickable on the previous iteration so I made them more pronounced so this confusion would not occur in the future.
I contacted the usability testers after making this iteration and it was met with positive feedback.
Groups
Users felt they wanted active groups on the main 'friends' screen for ease of access to group information so added a section for groups that contain active members to be shown on the main friend's page.
I also changed the colour of the 'groups' button to differentiate it from the rest of the UI. The red also signifies to the user that the area houses the 'Safe Space' feature.
📗 So.. Did I solve the problem?
✅ Pain Point 1: Unaware of arcade game queue information and status of availability
Users can view arcade availability through smart interactive tabs showing vital game information. High scores, rank and queue information are all shown in a 179x60 modal (responsive to different screen sizes).
✅ Pain Point 2: Not knowing event capacity
Users are always aware of event capacity before and during arcade events to ease anxiousness and to stay informed.
Capacities are shown in percentage form to show adequate context and exact number counts are kept in the event information section for full disclosure.
✅ Pain Point 3: Losing friends at events
Users can see if friends are online and what games are being played in real-time (with permissions).
To also help potential users with this problem I created Safe Space. When Safe Space is confirmed, all users in a predefined group will be notified with a randomised, safe location to go to in case of an emergency.
I think it's safe to feel I solved all of the pain points discovered in the research phase of my case study whilst also providing an intriguing product that can have a real-world use case.
Let's wrap this up...
🧑🏫 What I learned
It's okay to go back and forth... the process is iterative!
The making of the arcade companion app instilled in me that UX is truly an iterative process.
When reaching a state of confusion, I found myself constantly referring to my research which is the start of building good habits. When I referred back to my research the fog started to clear and I knew exactly what I was designing for.
Intrigued by how people think
Before starting the project I thought I leaned towards the UI side of product design but after completing this case study I have realised I enjoy interacting with potential users.
I thoroughly enjoyed conducting the user interviews and usability tests because they always provide the opportunity for the interviewee to say a golden nugget of important information that massively influences the project for the better.
The importance of design systems
My competence in Figma levelled up massively during the design process. Components allowed me to quickly create screens whilst maintaining the design language of the app.
For all my projects going forward, I will take time in creating thorough design systems to speed up the design and avoid any inconsistencies.
🏁 Conclusion
This project was such an enjoyable experience from start to finish. I feel I have taken a lot from the process and has put me in the direction of becoming a great designer.
If sometime in the future I could have the opportunity to work on this product with an arcade franchise, I would be very interested.