Arcade1Up
After launching their MVP with a design agency, I was brought in to bring integrate 3 features into their current app.
Project Overview
Challenge
Add all products to the existing app
Introduce “Tournament” mode
Develop a wallet for their new currency
Solution
Break down the design process into 3 phases.
Phase 1, Introduce all products to their application
Phase 2, Integrate “Tournament” mode into their existing interface
Phase 3, Design a wallet experience within their existing app
Role
Lead UX/UI Designer
Time
3 Weeks
Task
Iterate on their current application for version 2.0
Tools
Figma, Dribbble, Mobbin
Phase 1
The goal of phase 1 was to find a way to include all their products to the mobile app. On launch their app only accounted for 3/4 Scale arcade machines. Since then they have released cocktail cabinets, pinball machines, and more.
By using segmented controllers I was able to seamlessly integrate all of these products and reuse existing assets.
Old
Design Note - Arcade1Up previously used a design agency to build Version 1 of their app. This agency used a custom frame size, hence why we have mismatching image heights.
New
The updated screen now featuring segmented controllers for each product category. I opted to use an iPhone 8 frame
Phase 2
Arcade1Up makes arcade machines on a smaller scale for home use. One of the main features of their product is their online play. So now you can enjoy playing classic arcade games from home with other players who also own the same arcade machine.
Phase 2 meant to introduce a “Tournament” experience to the app. This page is meant to show users when an online tournament is happening, add badges to the winners, and overall promote participation within the community.
Single Tournament View
This page shows when/where the tournament is happening, adds room for custom lines of copy, and shows upcoming/past tournaments.
Multi Tournament View
This multi tournament view shows what happens when multiple tournaments are running at the same time.
Phase 3
For this I was asked to create a wallet experience to compliment their new in-app currency called “1Ups”. This includes earning, spending, history, etc. This experience I was given free reign to design whatever I wanted since internally the Arcade1Up team hadn’t finalized requirements.
Balance Tab
This page shows your current balance and history of transactions. The “Redeem” CTA would take you to the linked Shopify where you’d purchase your coupons.
Coupons Tab
This page would show the coupons you’ve purchased with your in-app currency. Here’s you’d see active coupons as well as history.
Final Thoughts
This project was the perfect combination of complex and short. It presented certain challenges that arise when working on another person’s assets. That being said, I’m really happy to work with a company I truly admire.
Organization
Looking back, I’d love to have spent more time auditing the original designs and create a small design system. This would allow future designers to easily integrate potential changes.
User Testing
Unfortunately with limited resources I didn’t have the ability to test this quantitatively. As a super user I tried to account for all windows possible, and was fortunate to work with a small control group. However I’d have loved to put some sort of test on a larger scale.