KATC (Key Action Tournament Cards) is a feature that was added to Mogul.gg’s core product. Mogul.gg is an esports tournament hosting platform, and KATC was created in order to solve for a high user drop-off rate between the registration & participation of a tournament.
The idea was to create a notification system that would alert users to their tournament start time in order to both provide a better user experience to the users who were missing tournaments, and to simultaneously provide a better experience to those users whose partners were no-shows.
• Users will often lose track of tournaments they have registered for
• It is not always easy for a user to understand what their next step is
• Clarify site navigation in the context of a user’s tournament experience
• Reduce the drop-off rate for players from registration to participation in a tournament
• Improve the tournament experience for players
• Reduce tournament no-shows
• Reduce forfeits in later rounds
• Decrease drop-off rates
• Increase average participation rates
KATC (Key Action Tournament Card) is an always-present tournament card which will represent for the user what their next tournament action is. This card will exist within the user’s right sidebar.
There are three card states based on criticality, and represented by different-colored cards and associated animations.
When an action becomes so critical that the user has very little time left to complete it, a modal will take over their screen.
Because of our assumptions that users will lose track of tournaments they have registered for, our goal was for the tournament cards to both remain on a user’s screen at all times, and to also stand out enough that they are easily noticed by the user.
There are many different types of tournament formats hosted on Mogul, so our goal was to account for each type of tournament, and to create unique KATCs for each step of each tournament process. This required careful analysis of all supported tournament formats and their associated steps. We modified the language used to match specific types of tournaments (IE: for a ladder-style tournament, we used “Challenge” instead of match, because in this type of tournament matches are not at a set time. Instead, players challenge each other as they would like in order to move up the ladder.)
Our UI thought process was heavily guided by our UX requirements and assumptions.
Because we wanted the cards to stand out as much as possible to users, so they could not miss their next step in their tournament, we created a color schema for the cards, based on 4 different states of criticality.
Grey cards are non-critical actions, but will become critical eventually (IE: the user has a tournament they must check in for, but not for another week). Blue cards are critical actions, and the user must take action within the hour or they may no longer be able to complete the action (IE: tournament check-in is now open, but closes in an hour). Orange cards are extremely critical actions, and the user must take action with 5 minutes or they may no longer be able to complete the action.
We also created a modal which will appear if a user has not completed an extremely critical action, and has only 2 minutes left to do so. This modal uses the same orange as the extremely critical action cards.
Both critical and extremely critical cards, as well as the extremely critical modal, have animations associated with them in order to make them more noticeable to users. The animation is twice as fast when associated with extremely critical actions, to further convey the urgency of the action the user needs to take.
In order to understand the reason why users were dropping off between registration and play, we conducted user surveys asking users questions around tournament attendance.
We also used a prototype made in Figma to conduct unmoderated usability tests to test for the usability, understandability, and efficacy of this feature prior to implementation.
Post full live-implementation, we will collect quantitative data from analytics to further analyze the feature’s success. We will use this data to iterate on the feature, and A/B test on the iterated feature vs. the original implementation.
An affinity map was created out of user’s responses to the tournament experience survey in order to visualize how many similar responses were submitted.
Responses of those who have missed tournaments are in orange, while responses of those who have not missed tournaments are in blue. Responses in orange note why the respondent missed a tournament or what they think could have prevented them from missing it.
Responses in blue note why they believe others may have missed tournaments.
• Users generally found the tasks easy to complete and understand"Overall the task was very easy, I was able to do it in 2 clicks and like 5 seconds."- user on the ease of tournament check-in
• Users enjoyed the animation, and expressed that it caught their attention6/6 users mentioned that the animation caught their attention
• The confusion users experienced was generally not on the KATC cards themselves, but on the screens that followed
•2/6 users thought they had completed tasks that they did not fully complete
(You can also view the full research findings deck here.)
• Problem: users are not always sure if they have completed a task (ie: tournament check-in) after landing on the page where they should complete that task
Solve for the areas within the KATC flow that could be confusing to users by integrating UI cues that match the UI cues of KATC
IE: if a player clicks an orange KATC prompting them to check in, the check in button on the following screen should be orange and animated in the same style as the KATC
• Problem: users forget about the tournaments they have signed up for, or when their play time is
Short-term solve: revisit & potentially revamp our comms strategy (some users mentioned specifically that they missed the tournament because of a lack of reminders, either by email or SMS
Long-term, high effort solve: create a companion app for the website, one of its functionalities being to integrate the user's site-wide schedule with the user's phone calendar, so they're alerted through their phone when it's time to play
KATC is in the process of being implemented fully by Mogul’s development team, and analytics on what has already been implemented are being collected by the analytics team.
Depending upon the nature of the statistics, we will delve deeper into any significant analytical findings, using A/B testing, unmoderated testing, and/or user surveys.
In the meantime, it’s also been recommended that we review our comms strategy and strengthen it so users are always reminded about their upcoming tournaments and matches. Our team has also recommended that we do eventually create a companion app to help users with their scheduling.