Creating a competitive esports platform for Discord users
Developing a new feature
Background
Discord is an instant messaging platform where users communicate with voice calls, video calls and text messaging in private chats or as part of communities. As of 2021, the service has over 350 million registered users and over 150 million monthly active users.
Discord has been the primary platform for communicating during online tournament events, however it does not have all the features necessary for organizers and participants to centralize all event activities within the app.
For this project, I imagined how Discord could expand its eSports capabilities and created a UX/UI experience for the competitive gamer.
Role
Research & UI/UX Design
Timeline
3 weeks, February - March 2022
Problem
Many gamers use Discord as their primary communication platform when organizing and competing in online tournaments, however they must use an external platform for the core functions required in tournament organizing, such as bracket generation, seeding, and scheduling as well as compiling attendee information and collecting entry fees.
Research & Analysis
To learn more about how players and tournament organizers use the tools I had just analyzed, I chose to create a survey that would help me gather data from a relatively large pool of Discord users.
This would also help me learn more about Discord’s role in tournament organizing. Discord already has a very basic events feature, however, even the less specialized tools provided by competitors, such as event registration, are notably lacking.
This survey distinguished between two distinct user segments, competitors and tournament organizers, allowing each to self-identify as such.
Tournament organizers reported often using at least 3 different platforms to organize and manage their events.
85% competitors surveyed identified that they have used Discord primarily for competing in tournaments.
They also noted, however, that most of the necessary tournament functions, such as registration and score reporting, was conducted on external platforms.
Discord was only used for coordination and communication between organizers and players.
All respondents expressed interest in being able to manage tournament activities entirely on Discord.
So what’s the problem?
There is no standard platform for conducting every facet of an esports event which includes the instant communication that Discord provides.
This, in effect, requires Discord to function as a necessary supplement for effectively managing and participating in tournaments while the functions that Discord does not provide are handled externally by various different websites and apps causing a disjointed and inconsistent user experience.
DEFINING the feature
Through my research, I was able to identify the main goals and motivations of the two user segments I would target, competitors and organizers. With this knowledge, I determined that there was a real desire from users to have a centralized tournament platform within Discord. As such, I created two user personas to help orient my design decisions.
Ultimately, the tournament organizer persona would be the focus of most of the design.
The Main Functions
In my next step, I created a list of necessary functions for this proposed feature to succeed along with additional features that would improve the user experience. These are the basics:
Bracket generation with options for single or double elimination format.
Open competitor registration for server members.
Score reporting system for automated bracket progression.
Two User Flows
The next step was to determine the general user flow that would occur when each persona conducted their respective task. Here you can see both persona’s primary tasks outlined in full, although some functions alluded to here would later be reworked.
The user flow I would eventually prototype would be the tournament creation process.
Adapting to an existing design
My philosophy for implementing this design was to adapt to the design patterns used by Discord as well as its Style and Component Guide. This would allow me to work efficiently and avoid bloating Discord’s tightly designed visual library while also introducing as few unfamiliar patterns as possible to the user.
Implementation
Now for the hard part. After long deliberation, I came up with what I believe would be the simplest and most effective implementation of my tournament feature.
Tournament Creation
Here, the user would access the Events feature through the server options on the top left of the screen.
This modal is modeled after the current “Events” feature, however it now has a new initial step in the event creation process, which is choosing an event type.
Choosing “Standard Event” would allow users continue the process as it currently exists. Choosing “Tournament” would walk users through the handful of options for tournament creation.
Bracket generation & communication
And now the cool part. Once a user has generated a tournament, a new server category would be created. Server moderators would be able to add channels to or modify channels in this category. A new viewport showing the tournament bracket would appear above the chat interface when users have any of these channels active.
Additionally, individual channels would be generated within this newly-created category for each active match in the tournament. These would be used by both competitors to coordinate their matches and moderators to resolve any issues that might arise.
Within the match channel, a score reporting feature would be available for competitors to close out the match. Once this is done and verified by both competitors or a moderator, the channel would be archived.
The wireframe below shows what this would look like to a moderator. Competitors would only be assigned permission to view match channels for matches they are competing in.
Creating a Prototype
To test out my design concept, I decided it would be best to create a high-fidelity prototype and test primarily with current Discord users.
I wanted to make sure my testers felt familiar enough with the interface to be able to navigate through it instinctively. To do this, I would have to very meticulously recreate Discord’s visual design complete with interactive and animated elements.
Branding
The first step to creating my prototype was building an adequate library of assets that would allow me to accurately recreate Discord’s visual design. Thankfully, Discord has an excellent breakdown of their branding guidelines available on their website along with several downloadable assets that made this process a lot more practical.
The only compromise in my design was the typeface. I chose a similar typeface to Discord’s Whitney called “Catamaran.” These assets were key to helping me simulate Discord’s interface as faithfully as possible.
A modular interface
I created an extensive and fully modular library of each component of Discord’s interface relevant to my design and necessary to conduct prototype testing. This would allow me to quickly and easily modify or adjust my design to reflect user feedback once testing was complete. This was also a fun exercise at creating and organizing a large amount of complex and interactive design components.
Testing Flow
After developing all the high fidelity components necessary for my design, I set about creating a prototype to test my proposed concept. Once this was done, the next step would be to thoroughly test it out.
The main task for this test would be to create a tournament with some specified parameters.
key Findings
For this test, I wanted to examine the overall quality and ease of use of the feature’s design and observe user impressions. I also wanted to observe the users’ intuitive process for how they approached performing their assigned task.
It was difficult for testers to find the option for creating events. This is due to the option being hidden within the dropdown menu for the server options.
Most testers instinctively clicked on the events shortcut which read “2 Events" at the top of the channel navigation which brings up the list of events for the server. However, there is currently no option to create an event from this screen.
Most testers were not aware of this menu.
Once this initial hurdle was overcome, all testers were able to successfully complete the tournament creation process.
The design was overall successful and interpreted correctly.
In particular, the final screen containing the tournament view was well-received with testers quickly identifying the auto-generated tournament category along with its relevant chat channels.
Interestingly, most participants were curious about game streaming, recommending that there be a voice channel where tournament organizers could stream matches to the server.
Iterating on the Design
With usability testing successfully completed, I gathered my notes and organized my feedback to begin the iteration process.
Prioritizing key revisions
In this prioritization matrix, I mapped out six specific pieces of feedback I received from my testers. This helped me organize the potential revisions I could implement to my design by determining what value they would have.
Alternate starting points
I decided to modify the event listing screen that ended up being a popular starting during the usability tests. Here, I added an option to create a new event, essentially creating a second possible method of starting this process for users who are unfamiliar with the dropdown server menu.
Additional event options
As one tester pointed out, my event creation process was notably lacking input fields for “End Date” and “End Time.” Initially, I did not consider these options because tournaments tend to not have a strict end time. However, I realized that many larger scale tournament events can last multiple days, so I decided to add this option to improve the scalability of the feature.
Wrapping things up
With the insights acquired from research and testing, I was able to learn a great deal about my users which allowed me to iterate on my prototype to successfully create a viable product. I got valuable feedback and some exciting praise from my testers who expressed genuine interest in the feature I was building.
It was challenging to work on with an established design language such as Discord’s. Discord is a product I use every day and is essential to keeping in touch with my friends both online and offline. As such, it was incredibly fun to see my design come together seamlessly into Discord’s UI.
I am very proud of how this project turned out. As someone who competes regularly in online fighting game tournaments, this was a subject I was quite excited to work on. Being able to interact with the competitive gaming community and learn from their experiences was great and I helped me create a product I was proud of.
