Background
Discord is a free app that lets you easily communicate through voice, video, and text chat with friends, game communities, and developers. It is one of the most popular apps that help you connect with people online and has hundreds of millions of users.
Problem
Discord users often face difficulties when it comes to listening to music. Existing solutions involve downloading bots from external websites, which often have poor usability or risk being banned for sourcing music from YouTube. To address this problem, our solution is to integrate a music feature directly into Discord, allowing users to connect their Spotify or Apple Music accounts within the app. With this feature, there would be no need to rely on external websites for music bots, and users can conveniently change songs through the voice chat without disrupting others in the text channel.
Library, Search, & Control Panel
A problem music bots had was that users had to constantly think of a song to play next. Access to a library solves this issue by having all their saved music from their favorite streaming platform integrated into Discord.
Another issue people had was with music bot search bars. Users would type in a song title but wouldn’t be able to specify the artist. This search bar would show a list of songs to ensure the correct song is played.
Lastly, users would have to go through the tedious process of typing out the words “pause”, “play”, “next”, etc. just to have some control over the music. Adding an easily accessible control panel fixes that problem as well.
This is the flow of the user who connected their Apple Music account and some implemented features. These features include: Library, search, control panel, queue, and lyrics.
Queue & Lyrics
In order for users to see what their friends queued up, they would have to read the text chat. This means users have to have to also scroll through large amounts of typed up commands just to see what other songs might have been queued. Having a queue list feature ensures that users are able to clearly see what is playing next.
Another feature I thought would be nice to have is access to the lyrics in case users were interested in that as well.
This flow shows a user who is listening along with their friend and some of the features they are able to use as a listener. These features include: Playlists, favorites, and karaoke.
Connecting to Apple Music
Music bots always use YouTube to stream music, leading to many music bots being banned. Having the ability to connect your account to a music streaming service would eliminate the need for music bots in the first place.
Playlists & Karaoke
Many users have issues trying to play their playlists on music bots. Some music bots allow users to do this but they have to go on their preferred streaming service and copy and paste the link of the playlist into a music bot command. Implementing a playlist function would save users the hassle of the various amount of steps it takes to do so with a music bot.
Karaoke add extra fun to have with friends. This helps with long distance friendships/relationships and for users who don’t like going out.
Favorites
Discord voice chats can have a large amount of users at one time. In the instance many users are queuing up a lot of songs, a favorite button would be nice to have as users may come across songs they have never heard before. Having a favorites feature ensures the ability to store all the songs users may have been interested in while also being able to play them again.
Primary & Secondary Research
While researching I have come across posts from not only Discord users, but their staff as well.
User Interviews
Next, I interviewed frequent Discord users who use music bots to figure out their likes and dislikes. I asked these users to share their screen with me and show me their music playing process.
Through research, it has become evident that users encounter challenges in locating trustworthy music bots and experience frustrations when looking for a good one. Even when they discover a reliable music bot, there is a constant concern about how long it will last, fearing that Discord may remove it at any moment.
Empathy Map
Once finishing up the interviews I then went into creating an empathy map that encompassed the three people I interviewed as they all seemed to share very similar opinions about their music bots. This also helped visualize the type of user that would use an integrated music feature into Discord.
Competitor Analysis
After doing some research I did a competitor analysis with Apple Music, Spotify, and Twitch to see what users liked about these services. Although Twitch is very limited with what music you’re allowed to share, it’s the closest thing to this Discord feature I am trying to implement.
Project Goals & Feature Roadmap
I put control panel, queue list, and search bar in “Must-Have” as these were the most mentioned features from the user interviews. There may be many users in the voice call and can get hectic without these three features.
Next, I created a feature roadmap that align well with the business and user goals and that I could realistically add in to this new feature.
Task Flow & User Flow
After mapping out the possible features I can add into the music feature, I created a task flow and a user flow. For the task flow I did a very direct and natural approach for playing music and using its basic functions which was essentially shown to me during the user interviews. While creating the user flow, I made sure to incorporate all the possible features that people wished they could use with music bots.
Product Requirements
Since I’ve gone through all the goals and features and how they might be incorporated into the new music feature, I was able to have a better grasp on what was really needed for users to properly enjoy their music.
Sketches
Now that I figured out what content and features I would like to add, I made a few sketches for the homepage, video pages, manga pages, and news pages to see what layout may work the best.
Wireframes
After sketching, it became quite clear how I wanted to design the feature while trying to stay true to Discord’s design as well.
Here are some frames showing you how I would lay out all the added functions and showing flows of both the search bar and playlists.
Prototyping
Once finished with the wireframes, I began to throw in all the images and colors to create a mid - fidelity prototype. This shows someone searching and queueing up a song then looking at the queue list after.
Usability Testing & Affinity Map
Next I began my usability testing with four frequent Discord users; 2 frequent music listeners, 1 occasional music listener, and 1 rare music listener. As they were testing, I would ask them questions about any frustrations they may have had and what improvements that could be made in order to make them frequent users of this new feature.
Usability Testing & Affinity Map
Next I began my usability testing with four frequent Discord users; 2 frequent music listeners, 1 occasional music listener, and 1 rare music listener. As they were testing, I would ask them questions about any frustrations they may have had and what improvements that could be made in order to make them frequent users of this new feature.
Outcome
Creating a music feature for Discord had its challenges due to Discord competitors not having this function and the constraints to stay within Discord’s design style. Since competitors did not have this feature I couldn’t make a competitive analysis as the start of my project and it also made it difficult figuring out how to design the way it works. As I further explored Discord, I figured I could treat it similarly to screen sharing, as that is an activity that requires user to share something with their friends. This also helped with the constraints placed by Discord’s design style because I was able to clearly see what I needed to mimic in order for this feature to feel like it belongs. This project has taught me that I can gain inspiration from designs that aren’t necessarily the exact same as what I’m look for and the importance of staying within a company’s design style.
Let’s Connect!
I am always open to new projects and experiences. Feel free to shoot me a message at herbert.suarez97@gmail.com