A New Look for Bots on Discord
Bots on Discord is getting a new look for its first anniversary! Over the past months I’ve been hard at work redesigning the entire website in a nice new clean and consistent design. In this article I’ll take you on a tour of the new site, highlighting the changes I’ve made to each page.
The Home Page
Ah yes, the home page. One of the two most important pages on our site. This is our first impression to new users visiting our site. One of the first changes you’ll notice is the new background color. The new design places sections of pages in boxes to more easily create a visual distinction between sections. At the top of the page is a new welcome section. This welcomes the user to the site and allows them to easily start searching for bots. Below that are the new bot cards. The new cards are not only cleaner, but they more clearly define what the stats shown are and what the buttons on them do.
The Search Page
The next stop on our tour is the important but sometimes neglected search page. The first change I’d like you to notice is the combination of the name and description inputs into one field. This will hopefully increase the number of bots returned by searches. Another change I’ve made is the removal of the hover mechanic on tags. Not only was it unintuitive, but it didn’t work well on mobile. Users can now click on a tag to view its description, which should be much more user-friendly. Lastly, there are a few more hidden improvements on this page. First, the page selector has been hidden when there are less than ten results (maybe I should make it infinite scroll?). Second, the search inputs will update the page when you press enter. This also works on the home page.
Bot Pages
We’re now arriving at the other of the two most important pages on the site: the bot page. Now I think most of you will agree with me when I say the old bot pages were an ugly mess. The new design is well organized and emphasizes the important parts, such as your invite button. The biggest issue in designing the old page was where to put all the miscellaneous information. My solution was to move this to a sidebar, leaving only the important stuff in the main flow of the page. As a nice little detail, this sidebar also follows you when you scroll the page. Once again you can see the new tag system in the description section. Clicking a tag will switch to the description for that tag. Below that of course we have the custom body of the page, written entirely by the user. A nice little bonus of moving the miscellaneous information to the side is that this now appears higher on the page.
Submitting a Bot
Next let’s take a look at the submit page, where I’ve made a lot of refinements and added a new submission flow. By viewing the jif included in your visitor’s bag you can see a quick demonstration of the new page. There are multiple issue checks included, so the whole process is much smoother now. Of course the visuals and help text have been updated too. This submission process will see further improvements when we launch the approval update later.
Approval Queue
For the next stop on our tour we’re going behind the scenes into the approval section. Remember that everything you see here is a secret, and sharing it is a breach of your NDA. I wanted to show you this page because I think it really shows how much some of the pages have been cleaned up. The old approval page was very thrown together, using a bunch of quick styling and some ugly Bulma buttons. The new approval cards give moderators access to more information in a simpler and easier to view design. The top of the page also includes statistics showing how many bots are waiting and how many have been waiting too long.
Profiles and Settings
In preparation for public profiles and other future changes, I’ve moved embeds and API keys to their own pages under the user section. Not many changes have been made in those areas, but they do now include buttons to copy text. The profile page was another one of those pages I threw together for the beta and it just looked ugly. The new page shows the user’s roles and some quick statistics at the top, and includes detailed bot cards below. These cards have been extended to show all-time statistics, guild counts, dates, action buttons, and editor and pending approval indicators. In the future I may extend profiles to allow bios and external links, but that’s still undecided, so don’t take my word for it.
Additional Pages
The other pages not shown above have also all received redesigns or design updates to match the new style. Most of the content on the about page has been re-written to be more accurate and represent us better. These pages aren’t notable enough to be included, so you’ll just have to wait until the new design comes out to see them.
As always, we love to hear your feedback on how to make the site better. To get in contact with us join our Discord server and let us know what you think in the #feedback channel.
