Case Study: The Harmony of Discord

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:

• How they present themselves in tone and language
• By creating a visually stimulating, joyful, and reactive environment through the use of animation, micro interactions, and illustration within their application and throughout their branding.
• Flexibility and accessibility – can be used casually, but also gives many options to power users and some for those that are impaired.

The Experience…

Chaotic Fluidity

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.

EXAMPLE

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:

On hover,

• Left, rounded selector shape appears
• Circle animates into a rounded square
• When adding a server, color change occurs

Upon click,

• Left shape expands heightwise
• Entire icon shifts down and then up, imitating a button click

Transitions

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.

Accessibility

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.

Cute Empty States

Discord has a little character named ‘Wumpus’ that fill the empty states. You can find him (and others) in the marketing pages in a variety of art styles (3D, colorful, or outlined like this). They have little quips too.

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)

An enjoyable experience means more than just usability — it needs to be engaging, and that’s where microinteractions can play a macro role, by positively contributing to the look-and-feel of a product or service.– Nielson Norman Group

Room for Improvement?

Options Overload

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.

PRO

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.

CON

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:

1. VERIFY YOUR EMAIL. And do it now.
2. You discover that the landing page is your friends list. Interesting choice.
3. There is an ADD button on the left. But what does it add?
4. 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.

In Summary

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.

‍