UI/UX Case Study
Spotify is the world’s largest music streaming provider, with over 381 million monthly active users. Spotify offers digital copyright-restricted recorded music and podcasts, including more than 70 million songs, from record labels to media companies.
As a Spotify premium user myself, I found myself using it every day and as the main application for listening to music. Working from home, I found myself using the desktop version. However, I found the mobile application to lack some of the features compared to the desktop interface.
This is a University project and an overview of my design process in creating an experience that enables Spotify mobile users to discover music through their friend’s activity.
Research, UI/UX, Prototyping, Motion Graphics
Figma, Illustrator, Adobe After Effects
The only social component Spotify carries would be the friend activity feature that is only on the desktop version. Many users questioned why Spotify didn’t include the friend activity in the mobile version. In the Spotify community, thousands of users upvoted the friend activity request for Spotify mobile for years.
How can Spotify integrate and improve its social component? How can I fully utilize and expand the friend activity feature on the mobile application?
My solution provides Spotify users with the ability to see what their friends are up to in the “friends” tab on the explore page. With this solution, users can see what their friends are currently listening to through stories and the activity tab. Users can also browse through their “friend feed” to discover new music, artists, and podcasts that are recently added by their friends.
Similar to the friend activity feature on desktop, mobile users can see what their friends are currently listening to through stories and the activity tab. Stories will play the music the users are currently listening to, allowing users to discover music through their friends.
Friend Feed & Messages
Discover new music, artists, and podcasts that are recently added by your friends. Communicate and share music with your friends through the messaging system.
Aside from expanding on the social component, I tried experimenting with improving and creating other features. I improved the group session feature and came up with the “Listen Along” feature and “Spotlight”.
Access the group session feature easily from a button, rather than going into the song you are currently listening to, and tapping on devices, then scrolling to the group session section. Invite friends to the session with your Spotify friends list, rather than inviting them through other applications or links.
This feature allows users to efficiently listen along with their friends. As users explore what their friends are listening to through their stories, if they like what they’re hearing, they can join with a click of a button.
The pain point of having to use Shazam and then adding the song through that application to Spotify is gone! Spotlight allows users to easily discover music they don’t know what they are currently listening to. After Spotlight spots the song playing in the user’s background, they have the access to add the song into their library with one click.
At the end of my project, I created a video summarizing the different features and ideas I had for the existing application. Here is an overview of all the features & ideas.
Created by Janet He
Knowing the constraints helped me better focus my design decisions.
Spotify Design System
The solution to be integrated into Spotify's Mobile Application
Design from already existing Spotify components
Identifying the Problem
My research began with conducting research on Spotify users’ pain points. With the help of Google, the App Store’s reviews, Reddit, and the Spotify Community, I have gathered many insights and ideas.
As I browsed through Reddit, I noticed that many users questioned why Spotify didn’t include the friend activity in the mobile version. Users also complained about how Discord integrated a better friend’s activity feature. Many users from the Spotify community upvoted the friend activity request for Spotify mobile.
As for the app store, I discovered that most users were complaining about the new interface for the Library section. Desktop users dislike the mobile version due to the lack of features compared to the desktop version. Many users were also complaining about the glitches and the bugs from the new update.
App Store Reviews
Ideating the solution
Once the pain points and opportunities were covered, I started ideating what the solution could look like through sketches, and low fidelities. After presenting my sketches and ideas, I went forward with a class activity called Crazy 8s where my peers would expand on my ideas within 8 minutes.
In order to visualize the journey of the users, I created flows of actions while comparing them with Spotify’s current flow.
Existing User Flow
New User Flow
Here is a visual representation of the screen interactions and flows
One of the main constraints of this project was to make sure that I was following Spotify’s current brand guidelines. I created most of my assets from scratch and ensured that I was using the correct sizing of text, typeface, and colors.
This Spotify project was the first project where I challenged myself to add and improve an existing application. I learned that when it comes to designing from an already established design system that I would always find myself thinking about all the potential features and solutions.
The main challenge would be creating Spotify’s assets from scratch. I would constantly compare my designs side by side with the screenshots to ensure that my designs were following their branding guidelines. Seeing the end result was extremely satisfying!
Overall, I really liked this project and gained a lot of insight and experience on the journey. I found this project to be just as fun as creating a new application from scratch.