Arcadous UX Case Study
Make Competing in an E-Sports Tournament Intuitive
Project overview
Arcadous is a responsive e-sports platform for web and mobile, where gamers compete to win prizes, and tournament organizers earn from the the competitions they organize.
2021
Joining and competing in an e-sports tournament is not just a click of a button. It’s a complex process with many steps like registering, inviting or joining a team, confirming participation, and joining the game lobby on time using a provided password. It can be overwhelming for newbies, and many users often miss a step or 2, or assume they were registered when they actually weren’t really confirmed yet. This causes frustration for users, and headaches for the Arcadous support team.
Make sure that users can easily understand how tournaments work, how to participate in them, what steps they need to do, and how to withdraw their earnings.
UI/UX Design Lead & Manager
Lead a UI/UX design team of 2 junior designers through all the phases of the product’s design: Conduct product briefing & brainstorming sessions (with the whole product team), product & discovery workshops, user research, competitor research, user flow mapping, wireframing, UI/UX design, interactive prototyping, usability testing, product documentation, developer team handover, & QA of front-end development.
Design Thinking: Empathize, Define, Ideate, Prototype, Test
Understanding The User
User Research: Summary
The team and I interviewed several gamers to understand how they think, what their goals and needs were, and what their frustrations with the current website were. We also gathered past complaints that our support team had received from our users, and we created their empathy maps based on our primary and secondary research.
User Research: Pain Points
“It’s too complicated“
E-sports websites are too complicated and too much of a hassle to use.
“I don’t want to read Instructions“
It’s not clear how to join a competition, and I don’t want to read instructions.
“I joined but it says I’m not registered“
Players thought that they had registered, when in fact they had missed a few steps.
Persona: Casual Gamer
User Story
As a casual gamer, I want to compete in competitions so that I can have some fun and earn prizes.
Problem Statement
Bilal is a casual gamer who needs guidance on how an e-sports tournament works because he’s new to the scene.
User Journey Map
Starting The Design
User Flows
Wireframes
Since we were well past our lo-fi wireframing phase, were using a component-based design system that speeds up our design process, and had already designed our tournament screens, we used hi-fi wireframes to create an interactive prototype for usability testing.
Usability Study: Findings
I conducted 2 rounds of usability testing sessions with a number of users, and came out with several useful findings to help us improve our design.
Findings
- 54% of users mistakenly thought that inviting their friends or accepting an invite meant that they registered
- 45% of users weren’t figuring out how to edit their squad in case they needed to
- All other scenarios we tested had a good success rate
- We also used the session to gather insights about our users, and gathered their feedback about the aesthetics of certain designs we were working on
In this case study, I’ll show how we solved the first finding…
Refining The Design
Solution
To remove any possibility for confusion, I added a bold notice text telling users that they “need to check in before competing”, and also added progress bar steppers to indicate the current registration status and next step that a user needs to do.
Prototype Preview
The project is still under NDA, so here’s just a sneak peak of what I can show, and click the button at the end of this page for more.
Going Forward
Impact
Our adjustments paid off, and the 2nd round of testing had a high success rate, which proved that the design was now intuitive.
Next Steps
The new design is currently under development, and should be tested in a real-world scenario, since sometimes unforeseen scenarios pop up. Analytics and heatmaps should also be implemented to gather data. In the meantime, the dev team is busy implementing our designs and the numerous other features that we’ve also already designed.