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 their 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.
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 for marketing. 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. Most recently, we’ve welcomed Def Jam.
My hip-hop community is just one server. There are millions of servers.
Similarly, out of hundreds of millions of users, how many do you think listen to music?
Exactly. 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 is catered to the desktop client.
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
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.
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 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
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.
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
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.
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.
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
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.
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.
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.
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.
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:
- Grand Exchange tracker for Old School Runescape
- SteamDB Charts and Stats
- Misplaced Items: Runescape Population
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
If you use Discord you may notice that the above 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.
Server Browser
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.
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.
Carousel
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. 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.
Closing Thoughts
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.
This piece was originally published on my website, March 17th, 2021.
