With Slack’s IPO being all the buzz, I’ve got to say…their numbers have been disappointing. No I get it they have some of the best UX, for sure. Teams, Chime, Hipchat, Skype, are all…well, “have room for improvement,” compared to Slack. Glad we’re on the same page. Discord has been around for three years as a voice communications and messaging service, and their product is constantly improving and adding in new features. If you haven’t heard of them, it’s because you’re probably not aware of the video game community. And if you’re not aware of the video game community, you’re pretty behind in the interwebz.
No but actually you should read up on how big the eSports scene is.
Before we get into how good Discord’s design and UI is, let’s first compare some numbers.
- Slack reported having 10M+ daily active users (DAU), Discord has 20M+.
- Slack’s collective weekly usage exceeds 1 billion messages, whereas Discord averages 315M messages daily, equivalent to 2.2 billion messages weekly.
- Slack has 88,000 paying customers, 575 of which pay more than $100,000 annually. Discord’s service is free.
- Only with the paid plan does Slack allow you to have messages that last forever, more security controls, and larger admin controls. Discord has all of these and is still free.
- As of March 2018, Slack has 1,000+ employees, and Discord has 108 employees as of May 2018.
- Discord has 250M unique users as of March 2019.
- Slack is still losing money at 140M a year, and nobody is quite sure how.
- Discord’s servers can hold a lot of people, the most being Fortnite’s server of 180k members.
- Discord’s valuation is at 2B as of December 2018, and Slack’s valuation is at 15B as of April 2019.
Sources: Discord Stats, Discord about page, Discord Wikipedia, Slack Wikipedia, Slack IPO
Discord beats Slack on multiple fronts, and they are significantly more efficient with their manpower. What continues to boggle my mind is why Slack is valued more than 7x of Discord given all the user numbers. As I discovered that Slack started as a gaming company called Tiny Speck in 2009, it further confirmed my belief that Discord too can easily pivot and eclipse Slack. I’m fully aware that Discord was made as a chatting service for gamers that wouldn’t be a suitable platform for businesses. Discord is so good at catering to their demographic and has such good user experience that if they developed an enterprise version, Slack would be sweating. MonkaS.
Popular internet meme, Pepe the Frog. MonkaS is used during a moment of high tension in video games (nervous moment)
Why Discord’s UI is so good
Discord’s UI when a server is selected
Dark theme
They started dark and were there before Mojave thought it was cool. It makes sense for gamers, a population of insomniacs and night dwellers. It’s difficult to design for a dark UI since people are used to designing for light themes, but Discord has definitely nailed it. If you look closely there are a lot of different shades of grey being used to achieve a sense of hierarchy, from the servers to the text channels to the voice UI to the main chat. None of the greys are actually that dark, so your eyes feel really rested when you look at their UI. Without using any really dark darks like Spotify’s UI, they still work well in unison and the delineations are clear. Dark UIs are becoming more popular now, with tech companies like Spotify, Robinhood, Twitter, all on the dark train, and Mojave which allows all apps to have a dark mode. Woot woot.
Hovering and selecting different servers (left) and text channels (right)
Good usage of hover and selected states
A lot of these micro-interactions are what really make the product so good. To most people they are superfluous and probably don’t make it into the MVP solution, but when you see it all these different states in play, they start to really make a difference. The hover on hover interactions is executed well and isn’t distracting to the user.
Different states of notifications in servers, text channels, and direct messages
They have a design system
Patterns are reusable for different parts of the product. In this example, a small grey half circle to the left of the servers or the text channels indicate that there are unread messages. Messages directed to you specifically or in @here or with your @role tag, take more prominence and appear as a number in red circle notification. Individual user statuses are denoted by a colored circle which means online, idle, do not disturb, offline, or streaming.
Group text and status notifications
Good use of iconography
Icon usage is abundant throughout the product, and they actually provide meaning to the UI by with scannability or by saving space. Because there are so many icons, Discord is very selective on when they use colors for icons. Normally they are a white color with opacity, and on hover they get a stronger opacity. In this example, the colored icons appear in group texts where scannability would be more important.
Different ways to show helper text throughout the UI to help users understand information or help their experience in general.
Helper texts are well placed and considered
It’s things like this that make Discord so usable. Even if it’s your first or 10⁹⁹ time using the product, you don’t feel lost looking around for controls and you don’t feel like a total noob because they dont do intro overlays. It’s one thing to feel lost and it’s another when you look lost. Thankfully, Discord will never make you look lost because there’s hints all over that are non-deprecating and not distracting. Let’s be real, if you click on a tooltip icon you have admitted to yourself you don’t know something. Nobody likes that feeling. They have different ways of giving instruction or showing helper text without making you expand the section or forcing important info into tooltips. They all work, and I actually like that the helper texts are designed to the environment its in instead of forcing consistency to work in a singular system.
They have some awesome features
Users can instantly join voice channels, and still toggle between different text channels. Controls for muting one’s microphone are always available.
Instant voice meetings
You can instantly join a voice channel, with the ability to change the mute or deafen options before you even join because they’re always available. When you’re in a voice channel, you can still switch between text channels. Similarly, you can switch between voice channels instantly too. Users who mute or deafen themselves show an icon next to their name, and users who are speaking show their profile lighting up. A single voice channel can hold 500+ people, see this as an example. Plus, the connection is very high quality. You can even join a voice channel in one server, and still look at text in a different server. All text and voice channels can be locked and/or hidden, and those can be controlled via role permissions or even as granular as per user level permissions. I personally love this because there’s no link required for a meeting, and there’s no stupid dialing sound in the interim. When you’re in, you’re in. When they’re here, they’re here.
Searching for messages within a direct message
Searching for images within a direct message
Powerful search tools
Facebook: searching for text within a direct message means navigating to each individual message.
The experience searching for an old message can be incredibly painful in some messaging apps, especially like Facebook Messenger. Most of them are hard to use because there is no context of what came before or after the message, or there is no quick way to review all the different results. Discord utilizes the right-hand panel to display all the results, with the before and after message content, and allows you to jump to different sections in your conversation. After all, your messages are saved forever for free, unless you choose to delete them yourself. You can also do logic searches, like searching [has][image][from][me].
Clicking on a user profile will show what roles they belong to, and role mentions will ping all users with that tag.
Role tagging
You can tag users in your server with multiple roles. This comes in handy when you want to just notify a subset of relevant people without pinging @channel or manually tagging people individually. Not to mention it’s super fun being able to designate any hex color to a role and giving them a name. In a business setting you could tag @front-end @designers @marketing and show them this article, for example.
Discord’s superb services
Discord works on web (left), desktop (middle), and mobile (right)
Web, desktop, and mobile app
Like Slack, Discord’s services are mostly if not fully functional on the web, on the desktop app, and on the mobile app.
A section of Discord’s voice settings
Actual usability for voice communication
Normally communication apps have an input and output slider for audio, which is pretty standard, but with no real control about unwanted noise. This is especially troublesome for Skype and Slack, when you’re on business calls and your crappy mic is picking up some sort of distorted noise. You have no way of controlling it other than muting yourself, or for the other person to lower their volume to stifle background noise. Discord really takes into account that everyone’s PC specs and environments are different, and provides options to counter background noise, like mic thresholds (auto input sensitivity). Things like push to talk, a common feature for games with in-game voice, were also adopted which shows that Discord is truly catering to their audience. Do you work remote often? Having the option to push to talk could even be useful for business meetings, allowing for easier communication without having to alt-tab out of applications.
Aside from the basics, they have advanced voice features like echo cancellation, noise suppression, automatic gain control, attenuation settings (decreasing sound of other apps when someone is speaking), all of which are toggle-able and work to improve sound quality.
Examples of how Discord is super meme
Hyperchill
Their branding is truly “for gamers, by gamers” — yes, I know that’s Razer’s slogan — and you can tell in the way they write. Their updates are always really meme and fun to read. They can break all barriers and even write in first person. I think I’ve even seen a full patch note with no sentence cases before. They cater to all gamers, but take opportunities to make those stronger connections by making game specific memes. “Unbench the kench” was an old League of Legends meme when Tahm Kench was first released as a champion. People wanted to see this new champion played professionally, but he was always banned because of his overpowered-ness. This loader is very clever because League of Legends fans will immediately recognize the meme. On the patch notes screenshot, the writer mentions Genji, who is a notoriously difficult Overwatch character to play.
And it’s not weird at all. Gamers love it, and it doesn’t seem unprofessional either. The design and service is so friendly, that those two elements alone make Discord feel professional. More than that, I think gamers feel deeply understood and acknowledged by the company, which has historically been a struggle for the growing culture.
Different screenshots of bot commands and responses
Custom Bots
There are custom bots for everything, and they’re all very powerful. There are bots that can join your voice channel and play music for everyone, like Rhythm and Ayana. You can play a song just by typing a command with the song name, and the bot will automatically search the song on youtube and add it to your queue. There are other bots that can take API data from other third-party websites and display them to you via a simple command line. This one is super helpful for game specific data. And there’s bots like Mee6 that gamify even the chatting experience by rewarding active users with experience points. Depending on how you use it, you can make it so that leveling up in experience can grant you more permissions like locked channels or posting permissions.
Stronk markup text
You can emphasize text, this one is usually the simplest when you want to highlight something, which you can do with single backticks around your message.
Same thing, but with longer text. This one is with three backticks around your message.
You can even choose to markup code. Damn, game changer. You denote this with three backticks, the words css right after, and closing with another three backticks.
What I’m really tryna say is
The key things that make Discord and Slack both stand out as a messaging service is that everything is left aligned, and messages from users don’t take up a lot of space. The message text design here is more or less the same. Profile icon on the left, name on top, and message below. Nothing extra. This way you can facilitate large group chats and quickly scroll to read a lot of messages. Microsoft Teams fails horribly on this front; everything is threaded which makes things hard to read, and messages all have a container, which means you need extra padding. Facebook Messenger along with other social media chats like Instagram and Tinder, make a little bit more sense for one on one communication, but in the end the left and right format promotes a slower communication style.
Sending images in a chat for Discord and Slack is exactly the way I want it. I just want to be able to paste the image, add some message if I want, and then confirm before I send it. I also like that I can edit or delete my messages later, and the UI for that is intuitive.
As a product in general, Discord wins by a landslide for me because of all their extra features like instant calls, powerful search tools, roles, and Discord’s attention to their demographic. The only features that Discord doesn’t have over Slack, from a business perspective, is threaded conversations and drawing during screen share. I do think the threaded conversations have been helpful, but my issue is that they often get lost. To counter for this there is an “All Threads” channel at the top, but that too can get crazy sometimes. Some servers with thousands of members have messages sent so quickly that if they were threaded I would be completely overwhelmed. Imagine seeing Twitch chat, threaded. This implies that threading conversations would be best for slow to medium speed messages. But if it’s really that slow, then do we actually need to thread? I’m a bit torn on whether or not this feature is necessary if Discord were to ever make an enterprise edition.
Discord’s screen share can be viewed side by side
Discord also has really good screen share. You can even share multiple screens at once, and view them side by side if you want.
Slack’s screenshare with drawing overlay capabilities. Both users can see the green line drawings and they fade away quickly after.
The feature that Discord doesn’t have, which I think is one of the coolest I’ve seen, is the ability to share your screen and for the other person who is viewing, to draw on your screen. However, it makes sense that gamers wouldn’t need this.
The overall user experience for Discord is superb, and with all the features they have it actually makes Slack feel limiting. The great thing is that the features don’t make the experience overwhelming. You can always choose to use only the bare bones, or decide to add more permissions, roles and bots.
I can’t comment on the security on a development level, but Discord users have extremely granular control over servers that they admin, and messages are HTTPS encrypted.
TL;DR
At the end of the day, I really just wanted to share some of Discord’s great design and user experience in their product from the eyes of a designer. From the numbers, they have more users, more engagement, more free stuff, more features, and less employees to deliver such a great product that really speaks to the needs of the demographic. In the current state that it’s in, I couldn’t recommend it to businesses; I’d have to see some verbiage modifications to make it more “business-friendly” first. But I can’t see why they can’t make a business enterprise version suited to businesses, and completely blow Slack out of the market. I really hope they do, because I would switch instantly.