Adventures in Sound: Exploring Discord's Music UI/UX Design

Adventures in Sound: Exploring Discord's Music UI/UX Design

Since 2015, Discord has grown from a gaming-centric replacement of Skype & TeamSpeak, to a more mainstream go-to catch-all for chatting.

The application’s interface has gone through many stages throughout the years, while the Spotify integration is a facet which never got much love.

The features are presented in chronological order of which I designed first.

Below is my vision of what it could be.

Programs used:

  • Figma
  • Adobe Photoshop CC 2019
  • Adobe Illustrator
  • Vectary
  • Lottie / Lottie Files / Lottieflow
  • Font Awesome (vector icons)

DISCLAIMER: No copyright infringement intended; all applicable images belong to the rightful owners. This is a design case study.

The Situation

An under-utilized pop-out menu serves as a large part of potential expansion. With the company expanding at the rate it is, any untapped potential may serve as a negative.

Discord is one of the fastest-growing apps in the world. Serving as a platform with branches of communities (called guilds), it has proven its worth as more than just a go-to watering hole for gamers. A great breakdown can be found over at Similar Web.

DJ Khaled references are nice, but give us some more depth

With this comes responsibility, and extension of existing features. Stagnate for the better part of 3 (4?) years now, is the Spotify integration. Beyond queuing a song or starting a listening party, there isn't much interaction possible.

Announced in February of 2018, Spotify integration was tested extensively for several months before being rolled out.

On top of this, Discord has made a very obvious push for nurturing growth of music on the platform as a whole. Rumors and rumblings of wanting large artists to create their own communities to further market the brand and company have been heard.

Some confirmed, as I've spoken directly to major labels regarding creation of communities for artists, and what the landscape entails.

Many employees of major labels lurk in music servers to check out the vibe, and gather data on what sort of demographics can be catered to. Dozens in my server alone, and those are ones I know of. Most recently, we've welcomed Def Jam Music.

It is a sect which has explosive growth going into Q2 of 2021 and beyond.

My own server has been featured in numerous mainstream music outlets online, including Billboard, Complex, XXL, NME, Hypebeast, OkayPlayer, and numerous other premier music sites.

My hip-hop community is just one server. There are millions of servers.

Similarly, out of 800 million users, how many listen to music?


So, how do we make music more fun and engaging on Discord?

The Solution

Re-purpose the integration and approach in a way that would boost interactivity. Expand on all sides, figuratively and literally, while maintaining a consistent theme and feel. Enable peer-to-peer listening parties, real-time data, and more.

This prototype's implementation is meant for Discord on desktop PCs.

Discord's homepage in 2015

The Research

My favorite part aside from seeing the final result of what I've worked hard on, is doing the research to justify my approach.

Without fail, there is always some interesting tidbit or pool of data that presents itself in a way where it can't be ignored. For example, taking into account when designing that Discord is no longer a gaming app.

Onboarding, ease of useability, and enjoyment of time spent on the app are the main metrics needed to be hit in this prototype.

After polling dozens of users, their feedback resulted in the following observations:

  • most users want the Spotify integration to be better, but aren't sure how
  • some users want to share their music, within Discord, to friends on Discord
  • all users find the current UI simple, but want improved UX
  • all users welcome an update to the integration
Just a few pages of initial sketches; my handwriting took a dive after university, as you can see

The design itself also had to look real; "redesigns" of Discord's GUI are a dime a dozen on Dribbble, Behance, reddit, and otherwise–far too often approached while ignoring key factors of what makes Discord's branding so spot-on attractive, effective, and clean.

As of Q1 2021, Netflix has also elected for an updated UI, very similar to Discord's approach

Take this for example:

  • What techniques were used by Discord to achieve this?
  • Why?
  • How were they achieved?
  • For what reasons were these selected over alternatives?

Daily, I would ask myself these questions in the back of my mind, in an attempt to make an accurate, feasible, and somewhat natural prototype.

We must also observe real world happenings within the music realm. In a multi-billion dollar untapped market, Spotify has recently launched in South Korea.

Since we debuted our first K-Pop playlist in 2014, the share of K-Pop listening on Spotify has increased by more than 2,000%—but music in Korea spans far beyond K-Pop.

These sorts of changes within the landscape of music are things we must consider when designing a prototype. A more conscious effort to create language-agnostic symbols and onboarding throughout was necessary.

The Current State

The current in-app appearance of Spotify integration

The current implementation of Spotify on Discord provides:

  • Play on Spotify (queue the song)
  • Listen Along with others

The main issue is not redundancy, but rather the lack of interaction offered. The album art, nor artist's information can be pressed. This could and should be expanded.

Furthermore, there is a massive portion of blank, unused space underneath. This is somewhat of an eyesore, and offers no purpose past a one-line note feature, which is scarcely used due to its own separate implementation which leaves something to be desired.

User notes are rarely used and can be mitigated to a completely separate window within the native Friends feature, or an icon. For the purpose of this prototype, we pruned this.

A few key questions I asked myself while going into how to start at the bottom and work my way up with this concept:

  • How can I improve this screen?
  • How do I maintain Discord's design approach, while offering a fresh feeling?
  • Is the size too small? If yes, why? How big should the screen be?
  • How to balance expansion with going too deep? What's the sweet spot?
  • I'm not a good artist, nor can I draw well; which resources should I be looking towards for inspiration?
  • Who is the target, and how will this improve their overall Discord experience?

A Splish Here, A Splash There

My version of an updated splash page

One design decision that came easy was the increased size of a user avatar, known in modern times as a profile picture. Having posted on forums for the better part of two decades, it's become clear how important avatars are, for a number of reasons. Despite being oft-overlooked, they are critical.

A core aspect of Discord, perhaps the most important, is that of communication with others around the world. The goal with this move, was to bring its visual prominence in line with the degree of salience it provides to any given user, given a specific microcosm.

This is interesting, as Discord servers act concurrently as a form of simultaneous forums, creating varied user presence within each thematic microcosm.

Throughout the prototype, the avatar justifiably remains an important part of the screen space.

As far as setting the tone with the pop-out screen itself, blobitecture will be seen to flow throughout. In-line with increasing avatar prominence, the artist being currently played on the user's active Spotify was also brought more forward and made more clear.

Adopted by Discord in 2018, the blobism aesthetic served as great influence to my prototype

If developed for actual in-app use, we'd expect the following, which was either inefficient, redundant for the purpose of this prototype breakdown, or not possible with Figma's current build:

  • the play bar slider would be interactive and sync with the Spotify client (vice-versa)
  • clicking on the artist name, song name, or album name would bring you to the appropriate page within Spotify
  • pressing the Spotify logo would open a relevant official playlist which contains the song, or the official Spotify page for that song's primary genre
  • green Spotify blob mimicking GIF above, moving between certain padding threshold

The X Button

Using Figma's Smart Animate feature, this turned out being easier than initially expected

Microinteractions are one of my favorite aspects of UI. For however small they may be, they increase UX by an equal amount. Whether it's button animation, a quick button glow on-press, or a small animation on-hover, it all adds a little bit of life to what would otherwise be a less-interesting interface.

It adds a cool feeling, even though it's a small addition

I wanted to create something fun with the X button, my personal favorite type of microinteraction.

One of my first websites ever was a template, copypasted from some pop-up-filled web design tutorial website, and the hamburger menu turned into an X.

Fascinated by how this was done, albeit far beyond my understanding at the time, I always remembered that little animation.

From the earlier sketches, I tried experimenting

A layer per line, within a group, within its own ratio-locked frame, within the main Splash frame

The approach was to divide each bar of the hamburger menu into its own layer, within a group, within a frame. On-press, it would shift between them using tweening.

Given the nature of Smart Animate, the tweening was done automatically, similar to how keyframes work in Adobe Animate.

On-Press Splash

The final Splash screen design

Initially, the design had hard corners, as seen below, but it didn't quite feel right. This was the first obstacle I came across. Torn due to Spotify itself having hard corners everywhere, while Discord is known for its rounded feel. This was a conflict I knew could completely shift the UX, despite being incredibly minute.

Hard corners and no drop shadow

The first iteration of this concept had rounded corners and no drop shadow; my approach was to go against the grain and mesh the two styles. Once finished with the prototype, I circled back and made changes to have the design more aligned with the overall UX.

Colors changed to show more easily the global 5px-rounding I applied throughout the prototype

The dark on-hover state made sense from both a visual and accessibility perspective. Currently in-app, it is sometimes difficult to distinguish what you are currently selecting, due to little difference in color on dark theme.

Some friendly text to check your own "Pulse"

This brings up accessibility issues with some users who have low or impaired vision, which was taken into account here. A drop shadow was added to accent the pop-out box shadow, giving it some dimension.

What is a Pulse?

Pulse was one of the main ideas I had going into this process of creating a prototype. Inspiration came from a few unorthodox places:

Growing up as a young kid into my adult years with Runescape, I've been well-aware of the graphics, charts, statistics, and otherwise which come with the game's fan sites and community.

As such, when the idea of a real-time listening graphic presented itself, I immediately thought about the days as a kid I would camp out on fan sites, soaking up data on what the next best thing to flip for some coin was, when I should've been doing my homework.

The page you're presented with when you press "Check Pulse"

On-press, the window expands smoothly into the above size, showing a graphic which you'd be able to interact with. Going up and down denoting minutes listened by people around the globe, in real-time.

You would be able to switch the region, from Global to any country with statistics above a predetermined threshold.

As the album art expands to the top left to become more prominent, a Trending Now menu appears. This is based on what information Spotify would propose to you, and would be an infinite slider. Genre can be changed with a simple dropdown menu.

On-hover state for Trending Now

An example of the slider changing

To channel the user's focus to a specific part of the screen, I elected not to allow on-hover states for neither album cover on either side of the one highlighted. On hover it would display SONG NAME by ARTIST NAME with ALBUM YEAR faded out, but centered.

Given Discord is based in San Francisco, the ALBUM YEAR would denote United States release. It was decided that creating a country-specific release calendar within this prototype was too in-depth and would rarely be used, opposed to a dedicated release website or the native Spotify app.

As the user presses the album of choice, they are brought to a Pulse page for that album

As seen above, more information is given to the user as they follow the on-press through. The album name is now presented, and interactive. Text is bold and massive.

The right-hand side displays key pulse metrics, including time-based peaks for concurrent listeners, and most uniquely, a beats per minute (BPM) counter for the song. This opens up insight for producers at a glance, and offers non-producers a quick factoid. Win-win.

On-press of Follow Pulse yields a message showing which # Pulse the song is for you. Pressing again, as seen below, yields a friendly error message.

A friendly-yet-informative error message appears if pressed twice in a row

My Pulses

An expansion  to the introduction of Pulse is the My Pulses page. This would consist of a user's followed Pulses, sorted by album. Containing a search bar, which would auto-update with each char entered, the slider would adjust accordingly.

The shadow approach to this screen was a centered light, hence the drop shadows of albums on either side of the primary being different. I wanted to make it feel as if there was a light source coming from where you're viewing the screen to change it up a bit.

In line with the primary Pulse page, you can filter by genre via a dropdown menu.

Basic info about the selected album is displayed

Just like the Pulse slider, this too would be infinite and recommended based on Spotify's catered data

Denoted by a heart, the user can quickly see which songs they follow as a Pulse, and which songs they don't. The BPM is listed as a metric, able to be filtered and sorted, along with the time of the song.

Drawing heavy inspiration from Spotify's current listing of music within a list or playlist, the spacing was redone to be more efficient and clear to the user. Alignment was modified, along with small microinteractions of the Pulse heart's on-hover state to fade into white.

The page with no hover state present, defaulting to top song options (see: horizontal ellipsis prompt)

On-press for horizontal ellipsis presents a menu, which would in theory, open that song's Pulse page, shown earlier

BPM Profile

BPM Profile was a concept that came to me after hearing many people within my Discord community network talk about pacing of songs, matching them up to specific rhythms.

Openly available online are data sets which show essentially any album's song's BPM.

A BPM profile chart, for the album MM... FOOD by the late and great MF DOOM

Further expansion could be seen, in regards to available information for any given album. However, the issue which presents itself is the balance of what the overall goal of this prototype was, and what it was quickly becoming.

A difficult aspect of this project was balancing too little and too much. Was I going too in-depth? Was I holding back too much?

These were internal conflicts I constantly asked myself going through each and every page. Keep in mind the entirety of this would be located as a pop-out feature within Discord, and merely an integration, albeit a complex one.

For those reasons, I decided to peel back verbose information formerly presented on the above page regarding the album's production and liner notes, electing to go for a more clean visual.

The DIRT System

Some wordplay to go in line with Discord's approach to flavor text and the marketing techniques they've used over the last several years, I concocted a fictional system–Discord In Real-Time, or DIRT–the be applied to this prototype. The idea is that this system would do the heavy-lifting via AWS, for everything you see within the concept that is real-time.

In theory, that'd mean:

  • graphs of current listeners
  • charts of top songs
  • trending songs, albums, or artists (if expanded upon)
  • song statistics (whichever metrics, pulled from Spotify)
  • etc.
For the music fans that like data

The sole purpose of advanced statistics of songs would be those listeners that really want to dive into a song's history or trend.

Demographics would be available by filter, as well as region, song on the album you are listening to (default to album selection if it is a single) and a number of other things, among minutes listened.

Heavy inspiration was taken from the Discord Server Insights UI, and the approach here was to make it feel like a natural extension of the UI.

Fresh, but something familiar.

Overlapping would be enabled

When pressing the ? button for more information, a pop-up would appear to explain what exactly you're looking at and how it works

At this point, a few weeks into the design process after countless iterations, the position I was sitting in felt comfortable.

There were enough screens for a mockup, and the plan was to leave the remaining three buttons as simple on-press microinteractions.

These were planned to be simple states

After contemplating for a bit, I realized that this was admissible for the Play On Spotify and Copy Song Link buttons; simplicity was key. However, for Listen Along, it was screaming for more.

What I thought would be a few screens more turned out to be the most difficult part of the entire project. Despite testing my patience, it was also the most rewarding to work on.

Come, Listen Along!

I wasn't finished just yet... far from it, actually

Discord, as everyone knows by now, is all about connecting and networking. More akin to a living, breathing organism, it is far from your ordinary chat application or platform.

As such, the ability to listen to music together is something that I've attempted to spearhead in the early days of Discord's growth. Sure, it worked, but it wasn't smooth. Onboarding was a pain, you needed a custom music bot, you needed to queue the songs properly, and everyone would need to adjust volume locally, as not everyone has the same peripherals.

Enter Spotify integration–solving this in one fell swoop. Right?...

Sort of. Although onboarding and overall UX was improved substantially, it was and still is very difficult to distinguish who wants to be invited to a listening party, and who would rather chill alone.

These things were taken into consideration when I created the Listen Along expansion of the prototype, the very last sect that was designed.

Friends page upon click through to Listen Along; this is the first thing you see

If you use Discord you may notice that the status indicators are unique.

I decided to add a fourth indicator, to designate being open for invitations to listen together. Denoted by a blue dot, the Seeking classification would auto-filter onto this page for any given user's friends.

Metrics shown, relevant to curation on the user's behalf, can also be filtered. A large icon for inviting the highlighted user is seen on the right-hand side.  In line with early Discord marketing aesthetic, a 3D figure is set behind the mainstay of the Friends frame.

On-hover state

Upon clicking, on-hover state disappears and the invite toast is presented

Server Browser

A bouncy feel is something I wanted to achieve throughout

Perhaps the most frustrating part of this entire project was getting the spacing and gridding on this screen correct. The idea was to make a smooth, instant, and dynamic animation parallel to that of the initial blobism influence.

It had to be done in real-time, with no delay, to look smooth. To do so, each frame would have to be linked and connected to one another. Push and pull.

The server browser for the music concept

A simple smooth animation for the search bar, when pressed

The blob has to move with the frame, so I tweened it using Smart Animate to follow 1:1

Shown above is the mask used for the blob fill. Unfortunately, limited by Figma's capability as a prototyping tool, I was not able to make it animated as I had imagined.

Ideally this would operate within a 5px threshold above the server verified/partner badge, and wobble to and fro, similar to the introductory prompt mentioned at the beginning of this breakdown.

Below, a look at on-hover states for each. A 3D figure is embedded once again behind the main frame of the screens for added effect and to balance the space.

A star signifies that the server is a favorite and is listed with priority.

A quick look at how the 3D model is placed underneath the sub-frame to add depth

Hip-Hop (my actual server)

League of Legends (real server)

Anime and Stuff (fictional server)
The search bar allows you to search for any genre you'd like; would go through and be handled by Spotify

A final fragment needed for this vision was a carousel. Shown to be 5 possible slides in the prototype, it would in theory be infinite and act as a way to discover the music that your closest friends on Discord are listening to.

If fleshed out more, it would sort by recommended genres (based on most-listened on Spotify), as well as community picks and trending genres.

I wanted to keep this specific screen very clean, while keeping the buttons identical size to the actual in-app buttons of the friends list.

The padding is kept tight while the rectangle background behind each button moves with a smooth, flawless push animation, opposed to Smart Animate. This creates the illusion of bounce, per se, when shifting between each carousel item.

An example mid-drag on the slider; as you can see, the rectangles morph intentionally, creating flawless transitions

The Korean Pop page

The final slide for the mockup; R&B

An example of on-press state for the search bar; identical dimension and style to that of the one contained within Friends

Further Thoughts

Ideas for the Listen Along screens

Justifying Moves

Going into this, I wanted to apply a few things. One of the more interesting techniques I came across was the practice of Architectural Design (shout out Nick). With each design choice came a price, and a factor of how realistic it would be to implement.

Taking into considering how significant a requirement was for a module proposed, the balancing act was a constant. This was all positive reinforcement, as it forced myself to justify each move.

In the context of <use case/user story u>, facing <concern c> we decided for <option o> and neglected <other options>, to achieve <system qualities/desired consequences>, accepting <downside d/undesired consequences>, because <additional rationale>.

Would some of these ideas scale at enterprise level? Sure, they'd work great. Others, they'd struggle. A few, perhaps look fancy, but would have to be dialed back.

Complacency, although dangerous, is nearly impossible to avoid without heavy feedback.

Change of Pace

When writing an article, op-ed, or biographical piece, extensive research is done but when it comes to actually pressing the keys to make words appear on my screen, I try to do it in as few takes as possible.

On top of that, I'm sometimes too prideful, and close out what could be considered positive influence from outside sources.

A complex and intricate prototype is all but possible in a few sessions, and requires inspiration of those formerly closed-off sources; a large change in my usual workflow, but a welcome one.

Consisting of 46 frames, this project's size was substantial, especially being made completely from scratch with no templates.

Each day I would chip away at it. Having rough goals in my mind of where I wanted to be by the end of the week, but not strict enough where it'd squeeze me to rush on any parts.

Again, balance was a key thread woven throughout the entirety of the process.

Mood Board

Having to draw inspiration from many sources, I took the most important parts (literal screenshots) and saved them to a folder.

Within Figma, I threw them right down next to the frame I was working on. Just like an artist using a reference picture next to a canvas.

This was all new to me and thought of on the fly; I wasn't necessarily comfortable with how to use a reference design, or inspiration in this way before. The background of frontend work I had done in the past was generalized enough that it wasn't this intense or necessary to tap into numerous sources for a varied perspective.

Below, a small fragment of my mood board:

Some of my mood board used as design inspiration

Closing Thoughts

Prototype animation map; this is a 100% fully-animated and interactive prototype created in Figma

Music is a passion of mine, as it is for many.

Being one of the very first music servers on Discord, I always am seeking out ways to connect people through music, and what the next move may be.

Like many of my server's members, I too, came from forums. Discord is just the next step. Discussion, events, listening parties via a bot or Spotify, freestyle contests, beat contests, whatever is out there yet to be discovered.

As the platform grows at a rate no one could have ever expected, especially due to the COVID-19 pandemic, perhaps it's time we start thinking about what other ways we can connect people through media.

Stage servers are already being tested and rolled out to select creators, as a one-to-many broadcast option for in-server activities. This is a step in the right direction.

When you approach a project like this, in an attempt to make a vision you've sat on for a bit a more visual reality, swallow your pride. Take a step back, look at the bigger picture, and have fun with it.

We'll see where this goes from here.