Arcadous UX Case Study

Make Competing in an E-Sports Tournament Intuitive

Project overview

The Product

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.

Project Year


The Problem

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.

The Goal

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.

My Role

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.

My Methodology

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


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.


  1. 54% of users mistakenly thought that inviting their friends or accepting an invite meant that they registered
  2. 45% of users weren’t figuring out how to edit their squad in case they needed to
  3. All other scenarios we tested had a good success rate
  4. 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


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


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.