A Little About Discord
Discord is known primarily as gaming chat software, or VOIP (Voice over internet protocol) with many integrations with popular digital services.
They put the focus on gathering communities that love games – but they also want to empower non-gaming communities to gather and use their services.
How it Works
An entire community will exist in a Server. Servers can be broken up into chat rooms OR voice chat rooms. These servers will each have their own unique population, depending on who gets invited.
There are different kind of Server Templates discord offers, in case you have a specific server type in mind (gaming, language learning, meet-ups, etc) or, just create your own.
This is the focus of the entire discord app – talking with people.
Branding and Marketing Approach
Discord is all about using colloquial language, and not taking themselves too seriously. They minimize the use of standard marketing jargon, and instead throw in little jokes and quips where they can.
This can be polarizing depending on who you are – but it’s a perfect strategy for their gaming market, who are enveloped in slang and joke culture. Since this is their main demographic, they’ve gone all in on this strategy.
What Makes Discord Unique?
Why use discord over other normal chatting services? I think the power of Discord’s brand (and why they’ve become a powerhouse for most game communities) is largely from these three reasons:
The app relies heavily on the feedback from its microinteractions and animated cues.
Every hover, pop-up, dropdown, and loading state gives the user some kind of feedback.
However, the sheer amount of tools they place at your fingertips from the get go could potentially be overwhelming.
Animations From the Get-Go
When you first log in, you’re presented with a fluid, globulous mass behind your typical log in modal.
There is some hover parallax as you mouse your cursor over it, which changes the direction of the dots.
Smooth and Simple Microinteractions
Microinteractions are all about communication and feedback. Discord inserts them wherever they can further assist in making an action gentler, more obvious, or more responsive.
Breaking Down This Button
The beauty is in the details.
There are a number of microinteractions happening all in unison in just this one button:
- Left, rounded selector shape appears
- Circle animates into a rounded square
- When adding a server, color change occurs
- Left shape expands heightwise
- Entire icon shifts down and then up, imitating a button click
This fluidity is also apparent when opening modals, changing screens, or logging in and out.
These large, fluid movements have their roots in old Skeuomorphic design – design that is made to mimic real world objects.
When users open new pages, the entire card shifts to reveal the new page in one animated swoop. Or, the card grows while fading in, imitating the look of a layer on top of the main interface.
This is the cherry on top to make discord feel like a consistently smooth experience.
Discord is dipping its toes into the world of accessibility.
Too many motion graphics? You can reduce that. Need specific font scaling and spacing? Set it!
WHERE THEY COULD IMPROVE…
Adding more options for color impaired folks. Right now we only have Light and Dark modes.
Why Are These Effective?
A couple of reasons:
- All of these aspects are consistent and unified across the board, which brings a feeling of high-craftsmanship and energy to what could be another basic voice app.
- Microinteractions are used intentionally. They provide the user with lots of feedback. You know when you’re going to make an action (or if something is currently loading)
Room for Improvement?
As a new user logging in for the first time, you have many different directions you can go.
There isn’t an initial onboarding phase, so in-app cues are your main resource when you land here.
Lots of visual feedback for the empty states. You at least know it’s supposed to be empty, and are given some options to fill it up.
Onboarding doesn’t begin until you start messing with servers. It might take you a few minutes to understand what to do if you are super fresh.
There’s a number of things happening here:
- VERIFY YOUR EMAIL. And do it now.
- You discover that the landing page is your friends list. Interesting choice.
- There is an ADD button on the left. But what does it add?
- You are alerted to the concept of activity on the right hand side.
Creating a Server
Ok! I verified my email! I made a server! Now…
There’s a lot more to unpack.
Here is where Discord’s onboarding kicks-in, in the form of tips and animated icons.
Only Getting Bigger
Discord is still growing, but it’s already doing a lot of things right for its demographic.
Sometimes, the animations and motion graphics can be overzealous – but that’s exactly why they give options to turn it all off.
But thanks to their consistent UI, stable servers, and joyous experience – it’s no surprise they’re a powerhouse for the gaming community that champion these areas.
If you’re in the market for a new UX design job, or you’re a recruiter writing your first new-hire job
User Flows are a foundational step in the UX process. Learn how to create one and apply it to your own project.
The UI designers aim to provide a simple, easy to use, and user-friendly layout for different devices such as computers or mobile phones.