Final Case Study Med_edited.png

Spotify

UI/UX Case Study

 
Summary

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.

Role

Research, UI/UX, Prototyping, Motion Graphics

Tools

Figma, Illustrator, Adobe After Effects

Duration

Sept 2021

1 Month 

Team

Solo Designer

Problem

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.

Reddit Research Proof.png

Design Challenge

How can Spotify integrate and improve its social component? How can I fully utilize and expand the friend activity feature on the mobile application?

Solution

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.

Spotify.png
Spotify Case White.png

FINAL PROTOTYPE

Activity Mock.png
Friend Activity

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.

Feed Chat Mock.png
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.

OTHER FEATURES

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”.

Spotlight.gif
Group Session

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.

Listen Along

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.

Group Session.gif
Listen Along.gif
Spotlight

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.

Motion Graphic

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

PROCESS

Constraints

Knowing the constraints helped me better focus my design decisions.

Visual Design

Spotify Design System

Integration

The solution to be integrated into Spotify's Mobile Application

Experience Type

Mobile Experience

Feasibility

Design from already existing Spotify components

Design Process
Design Process.png
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.

Findings

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.

Reddit Research - 3.png
Appstore Rev.png

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.

Sketches.png
Sketches2.png
1/2

USERFLOW

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
UserFlows.png
New User Flow
1/4

Here is a visual representation of the screen interactions and flows

Visual Design

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.

Visual Guideline Black.png
Spotify Case White.png
Reflection

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.