battlepass Responsive website
battlepass Responsive website
Embedded Files
BattlePass is a website for a local arcade that allows users to check-in and sign-up for various events hosted by the arcade.
BattlePass is a website for a local arcade that allows users to check-in and sign-up for various events hosted by the arcade.
MY role
MY role
UX designer creating a website for a local arcade from conception to delivery
the goal
the goal
Design a website for a local arcade that allows users to easily check-in and sign-up for various arcade events.
User research
User research
Wireframes
Wireframes
paper
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 websites and technology. Stars were used to mark elements used in the initial digital wireframe.
digital
digital
homepage
homepage
As the initial design phase continued, I made sure to base screen designs on feedback and findings on user research.
check-in screen
check-in screen
Simplicity was the biggest focus while working on these wireframes. It needed to be ensured that most anyone accessing the website should be able to complete the process with no problems.
check-in confirmation
check-in confirmation
In user research, it was noted that confirmation screens don’t look different to other screens in the app. It was important to make sure that the screen looks different and confirms with the user that they are indeed checked in.
sign-up screen
sign-up screen
This screen was designed to be user-friendly and straightforward. The user can look at available clubs and tournaments being offered and select to sign up for each one individually.
events screen
events screen
This screen was designed similarly to the sign-up screen. It features a main event at the top, and underneath are other events occurring that users can sign up for individually.
user testing
user testing
Mockups
Mockups
before usability study
before usability study
Early designs are very similar to the high-fidelity prototype. However, there were a few key changes. The featured event section has more information on the right-hand side, that highlights both upcoming events and reoccurring weekly events.
after usability study
after usability study
before usability study
before usability study
The first usability study revealed frustration in the layout of the events check-in page. Users liked the overall layout but preferred the navigation buttons to be side-to-side. The events check-in page was updated to create better usability.
after usability study
after usability study
Prototypes
Prototypes
results and outcomes
results and outcomes
Impact
Impact
The website makes users feel like they can check into events easily and quickly.
What I learned
What I learned
While designing the BattlePass website, I learned that creating a desktop website 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
Positive Outcome
One quote from usability study #2: “[The website] is easy and straightforward to use. I feel like I could check-in in less than 30 seconds”
Page updated
Google Sites
Report abuse