Spotify Redesign — aq portfolio

Spotify Social Features Redesign

Inspired by our shared love of music and our inability to easily share that music, my partner and I redesigned and added social features to the audio streaming service Spotify.

My Roles: Interaction Designer, User Researcher

Class: Intellectual Foundations of Information (Dec 2018)

Team: Group of 2

Project Prompt: Redesign an information system.

Act I: Inspiration & Research

Problem Statement

Currently, there is no efficient music sharing system. Social media apps have music sharing capabilities, but they are a minimal feature to the entirety of the app. Overall, users have to jump through many hoops just to share music. We want to create a platform that allowed users to effectively share music in one place.

We built upon Spotify, a popular music streaming application, and improved their sharing features. Due to the limited time given to complete the project, we focused primarily on Spotify’s desktop application. One of the reasons we chose Spotify as it has a high demand in its forums for social features, specifically a direct message option.

Spotify forum users asking for messaging to come back

See more here

“Messages were one of my top reasons for using spotify over other services, as it adds to the unique social aspect to Spotify. I can no longer even view old messages, and I had a considerable amount of music that was stored in messages that I can no longer access. I do not ever want to post spotify to social media. Almost every instance of me sharing music will be personal for an audience of one person, I do not like the idea that my sharing has to go to social media.”

— kingminivan

“I agree entirely, removing private messages from Spotify is a huge invonvenience. Like others, I liked the ability to share within the app rather than texts.”

— Jaredb21

“I was devastated to find the inbox function gone. What a joke. This is what i use the most and is actually what helped me get friends to start using Spotify. Id hear all this new music and to be able to share with a friend was so great.”

— kitastrophe

Act II: Our Solution

Our solution was to create a more user-friendly sharing interface — specifically through adding direct messaging (DM) and an option to share music through links or a message via a dialog box.

Spotify used to have a private messaging system, and when this was removed, a loss was felt in the Spotify community. By removing an extra layer in sharing music, users won’t have to navigate separate applications when sharing privately. Our design allows users to communicate through music. Users can share songs and artists they think their family or friends will enjoy. This is something already widely done, now made easier by having it on a singular digital interface. It also allows for group sharing and establishes a better online community between listeners.

Direct Messages

Spotify on desktop has a Friend Activity bar on the right side of its interface. Currently the activity bar allows users to view what their friends (people who follow the user and vice versa) are listening to.

We modified Spotify’s current Friend Activity bar so that now a user can view friend activity as well as direct messages. The user clicks on the “Direct Messages” to view all their messages.

Unread messages are indicated by a green circle surrounding the friend’s icon or profile picture. A preview of the last message sent in the chat can be seen.

The timestamp at the top left corner indicates when the last message was sent. An airplane icon on the right means that the last message (or new unread message) was sent by the other user.

*An unread message from “gracezoppi,” and no unread messages from “janelley0.” The last message was sent from whoever’s Spotify account this belongs to.*

The Sharing Dialog Box

*Green line indicating what’s being displayed*

At the time of this project, users would have to share songs by hovering over a song, clicking on the horizontal ellipsis button, and then hovering over “Share.” Then users could click on buttons that would allow them to share the song using other social media.

In our redesign, we want to make sharing easier by allowing users to just click “Share,” then a dialog box would open. It would give users the option to share the song via DM or social media.

Our initial sketch of the dialog box has a lot of buttons and contains a lot of information up front. This design does not really match Spotify’s current design. In the final version of the share dialog box, we used a green underline to switch between the “Share via Link” and “Share via Message” tabs. This feature originates from the green line Spotify uses. In this picture, the green line aligns with “Artists” indicating that the artists page is displaying in the main viewer.

Final Version

From the dialog box, a user can share through message or via link. To share through a message, the user has to have the “MESSAGE” tab opened. Then they must type their friend’s name into the field and add an optional message. Clicking on the “DONE” button sends the song and the optional message if it was added.

Currently, Spotify allows users to send music through other platforms, so we kept this in our design. They just have to open the “VIA LINK” tab and share through whatever platform they prefer. For example, if a user wants to share this artist through Facebook, they click the Facebook button to open Facebook to share through there. Once they’re done sharing on Facebook, this dialog box will still be open, and the user can leave the box by pressing “CANCEL” or “DONE.”

This also includes a direct link to the content on Spotify. A user could copy a link to an artist through the “Copy Artist Link” option. Then the user could paste that link to wherever they want the link to go.

Act III: Deliverables

The Report and Prototype

This report explains the purpose of our redesign, all the changes we made, technical aspects, and explains the greater implications of our project.

Read the Report

To wrap up our project, my partner and I presented a pitch giving an overview of the report to instructors and fellow students. While pitching, we demonstrated our interactive Figma prototype.

Figma Prototype