Tournament Kings

A discord bot development company focused on gaming in the discord community

My Role: UX/UI Designer
Tools: Figma, Webflow, Github
Duration: 2 Years

Bot Guides and Improvements

Research
Layout Design
Technical Writing

Learning the product, writing and designing a bot guide for all of our bots. Implementing the guide into our support system.

Result: 40% less support tickets

VIEW PROJECT

The Customer Portal

Information Architecture
Wireframing
User flows

Designing a customer portal to self-serve your premium Tournament Kings account and profile.

VIEW PROJECT

JOYN Rebranding

Concept
Color Palette
Typography
UI Elements

Identifying our new mission and creating a full brand package

VIEW PROJECT

Overview

I was brought on by Tournament Kings to better understand our users in a team effort to document, and improve our discord bots and web resources.

Challenges

  • Not enough people were being exposed or could access our bot. We had very little advertising and the invite links to our bot could only be found on our website which was not accessible through discord.
  • Many bots do not have a support team and depend on their help menus to guide users on how to use a new bot. The help menus provided very little information, sending all users to the support team. This took time away from hosting events and getting more exposure for our bot.
  • Our bots were very command heavy and confusing. It would take multiple steps to complete one task. The language used for some commands was not clear enough for users to follow
  • The current branding only encompassed one bot.  As we grew we were working on developing more bots to help manage your guild.

User Reseach

The goal of this research was to better understand what are users needed and what their pain points were. I worked closely with our Support team to access our communities and user information. Whenever I found an issue that came up multiples times, I would chat with the community on possible solutions and bring all of my information to development. From there we would decide what we could accomplish and in what timeline.

Observed

Hung out in our servers and watched our Tourney Bot users in action with the bot

Discussed

Reached out to our regular tournament players to get their feelings on the bot

Qualitative

Reviewed the support tickets coming in to find a trend with common issues

Quantitative

Created google forms with incentives to collect hard data on our user base

Personas

From all of our research we found most of our users were males between the ages of 13-17. After gathering more information on that demographic it was obvious we needed less barrier to entry with quicker user flows for shorter attention spans. To accomplish this I worked on decreasing the amount of commands needed for each feature and adding in more UI (button clicks) over typing in a command (the old school way of using bots)

With this information I created Personas for our users. This was for all of us to keep in mind who our audience is and who we are designing for. The surveys got the statistics that were needed, while the interviews and support tickets covered the more personalized issues that needed to be resolved.

User Stories

Support Bot is the bot we created to help our users create their own support system within their guilds. This bot was taking the bones of our current Tournament Support bot (Gus) and creating something we could sell.

Creating user stories was the best way to analyze each users process from using the bot start to finish. Doing this helped identify pain points and highlight features that were creating too much of a barrier to entry.

The Wiki

After the UX/UI improvements were implemented I was tasked with the larger project of creating a wiki on github to document and guide users through every command for Tourney bot, and our other eventual bots.

From my research I started laying out the information architecture for our wiki. I kept in mind the users that are new to discord while also having all of the information for our frequent Tournament Admins. I felt the basic info needed to be in your face but with easy access to our more complicated features.

Our main page needed to highlight our biggest features, for quick access to what you need help with.

Full Wiki Menu

As we’ve grown as a company, we have created more bots in house, that I have worked on the UX for and documented over time.

Updating our site

Once I completed the wiki it was time to update our website. To attract our users to our new wiki pages I created a “Learn the Bot” tab for our top bar, along with several “Learn more” buttons throughout our site. Having the wiki not only centralized all of our information but made it much more accessible to our staff and our users. This increased the use of our bot and also took some weight off of our support teams’ shoulders.

Next I created a page for all our paying customers to advertise their server and get new players to join. I did this by adding a “Tournaments” tab to our top bar so that anyone who visits the site looking to join a tournament would be brought right to a list of all of our affiliates. Each affiliate was able to submit their logo, card background, tags, and guild description with a clickable link to send game seekers straight into their guild. This attracted new users trying to find a place to game.

Bot Improvements

Using the feedback I received from users and customer support I was always looking for way to simplify our user flows and build up our UI. This type of work included..

Streamlining our help menus with clickable short-cuts

Now that all of our guides were in one centralized place (the wiki), I restructured each bots help menu with a similar outline and “Getting Started” link with other clickable links, guiding you right to the most common features.

Before
After

Making our UI easier to understand

Having reactions on our games made it very confusing to the eye to line up which reaction went with which space. (There was counting involved yuck) To alleviate this we created buttons for each space. Now this looks a lot more like tick tac toe.

Before
After

Creating less barrier to entry

Knowing how to access the main menu on a bot isn’t always clear. The menu its self made sense but I felt we could do better with less reading and in turn a faster support turn around. Instead of you having to use the help command and then the menu, there would be an embed with button to immediately open a ticket.

Before
After

Customer Portal

Having reactions on our games made it very confusing to the eye to line up which reaction went with which space. (There was counting involved yuck) To alleviate this we created buttons for each space. Now this looks a lot more like tick tac toe.

MVP Features

  • Login

  • Profile Editing

  • Plan Selection

  • Wallet Creation

  • Account Activity

User Flows

New Website Design

The next larger project  I worked on was a rebranding package. As we developed more bots we were leaning toward more of a discord tool company, than just Tourney bot. For the rebrand I did more research on who our new users would be. Then I chose the color palette, the typography, and the UI elements. To get to the final mock up, I presented wireframe options, ui options, and then a final mock up from all of the feedback.  

Concept

Home Page

Wire frame

Hi-res Mock

Final Mock

Bot Landing Page

Wire frame

Hi-res Mock

Final Mock

More Projects