Initial idea

Joakim had the idea of creating a Discord bot that would replace not just one but multiple bots simultaneously to avoid having numerous bots of different prefixes solely for playing music.

At the start of the project, I was tasked with only the avatars for the bots. Because it's a Discord bot and is meant to be universal for all, the design focused on that. A bot for music, only on Discord.

Months later

The bot garnered a few thousand servers (a decent number back in Discord 2018), which prompted me to make a new and unique avatar. Based on the initial idea but less flat and more 3D. To add more flavour to the design, avatars change depending on the season. We chose winter because it's the best season.

Growing bigger

The bot continued to grow until it reached a point where it needed a website. Its purpose is to be an interface for the user to know more about the bot, a FAQ page to answer questions on the fly without any direct support unless needed, and showcasing the bot's entire commands.

You might be saying, "That is not the same website in the banner", and you are correct. It's not. The design above is the old initial version and it's horrendous. How did it even come to light?! That is what I was thinking while writing this. I even considered not mentioning it. The animated background alone uses 20% CPU!! But one must accept their dark past to move on. You can see a live preview of the old website on the internet archive.

Why a redesign?

The above was one of my first UI / UX projects, which shows. It lacked fundamentals in essential UX and typography. If Jockie Music wanted to compete with other big bots and their awesome websites, a redesign had to be done.

Landing page
The previous one was a simple page with invite links. It didn't tell the user what the bot was about nor encourage them to know it. The redesign focused on such. For a first-time visitor, the website would have a "more information" link below the slogan. This would direct them to a simple carousel menu that told them what makes the bot different from the rest. A second visit would immediately show the invite links to minimize user actions.

FAQ page
Since the bot is an entirely different concept from the other bots, new users weren't fully aware of how the bot functions. Plus, the bot had many options that other bots did not offer. The page had to have their answers categorized neatly and be able to answer questions related to the other questions without spending time searching. I present to you a recursive FAQ!

Commands page
The most significant part of the website. The bot offered a lot of commands, options, and settings. The commands page had to compile all the info and present it neatly for the user to understand; the preview showcases all the above. The page also offered the ability to link a command so the user could share it with their peers if needed.

Status page
Numbers can be a good indication of the bot's quality and approval. So a new page was added to showcase that.