battlepass Mobile App
BattlePass is a mobile app for a local arcade that allows users to check-in and sign-up for various events hosted by the arcade.
MY role
UX designer creating an app for a local arcade from conception to delivery
the goal
Design an app for a local arcade that allows users to easily check-in and sign-up for various arcade events.
User research
Wireframes
paper
I created 5 versions of the home screen to ensure that the elements would be suited for digital wireframes and were simple and easy to use for people inexperienced with apps and technology. Stars were used to mark elements used in the initial digital wireframe.
Digital
Homepage
Event Info
Confirmation
Club Page
Event Page
user testing
Mockups
Before usability study
Early designs are very similar to the high-fidelity prototype. However, there were a few key changes. The featured event section is more pronounced than on the wireframe, and the buttons at the bottom changed to have larger images.
after usability study
Before usability study
The first usability study revealed frustration in the layout of the events page. Users liked the featured event section at the top but preferred the layout and usability of the sign-up page. The events page was updated to better match the sign-up page.
after usability study
Club Selection Screen
Event Check-In Screen
Confirmation Screen
Pre-Registration Screen
Prototypes
results and outcomes
Impact
The app makes users feel like they can check into events easily and quickly.
What I learned
While designing the BattlePass app, I learned that creating an app layout from scratch is difficult and that utilizing a design system helps designers create better designs with better usability. I also learned that usability studies are critical in the development of apps, as it helps designers understand their users needs better.
Positive Outcome
One quote from usability study #2: “[The app] is easy and straightforward to use. I feel like I could check-in in less than 30 seconds”