Making Spotify social, an independent redesign challenge
OVERVIEW
ROLE
Product designer
OBJECTIVE
Independent design challenge
TOOLS
Figma, pen and paper
DURATION
January 10-17, 2024 (1 week)
BACKGROUND
What is Spotify?
Spotify is the most widely used music streaming platform, with 500+ million monthly users worldwide. It has revolutionized the way people access and enjoy music, offering a vast library of tracks and podcasts across various genres.
Narrowing scope
Focused on Spotify's social features
I love sharing music as a way to connect with friends and discover new songs. Spotify enhances this experience with features like collaborative playlists and the annual Spotify Wrapped, allowing me to share my favorite tunes and artists easily. The platform allows me to bond with friends over shared tastes, explore new genres, and find unexpected musical gems, fostering a sense of community amongst its users.
USER INTERVIEWS
Four user interviews with Spotify users
I asked participants about how they use the app on a day-to-day basis, discover new artists, share music with friends, and more. Here were some of the insights I gathered:
Additional user perspectives
Read dozens of Reddit threads to understand alternative perspectives
While I encountered quite a diverse array of perspectives on Reddit, here were some common themes:
Users struggle to find new music. Many of Spotify’s generated “mixes” contain the same songs and don’t allow them to explore new ones.
Some users want Spotify to become more social and allow them to share music with their friends. But others disagree with this stance, saying that not every app needs to become into a social media platform.
Overall, users are somewhat satisfied with their experience on Spotify’s mobile app. Many appreciate the app’s UI, but are unhappy with aspects of the user experience, particularly for non-paying members.
Superfan is an app that imports Spotify data and allows users to create groups where they can share music with friends, generating weekly reports on user's music listening habits.
pain point #1
Browsing a friend's playlists requires too many steps
As illustrated below, navigating to a friend’s profile to view their playlists takes four steps across five screens. Users need a quicker, more intuitive way to browse their friends’ playlists.
Click image to zoom
pain point #2
Friend activity isn't available on mobile devices, only desktop
The popular feature, which allows you to see friends' listening activity in real time, is only available on a desktop. Both participants in my interviews and users online expressed their interest in having this feature on mobile devices as a way to discover new music and stay connected with friends.
pain point #3
Friends Mix, "Blend" playlists, and friends' playlists are in different parts of the app, making them harder to access easily
While all three of these features help friends connect through music, they are in different parts of the app, making it challenging for users to access and utilize these features.
PROBLEM STATEMENT
Spotify's social features are scattered across different parts of its mobile and desktop apps
The app lacks a centralized location for all social-related content including Blends, Friend Activity, and friend's playlists. Users are seeking a more streamlined hub where all social content can reside. Doing so will allow them to better connect with friends and discover new songs, ultimately upholding Spotify's goal of connecting people and music.
↪ How might we connect Spotify’s mobile users with social content in a streamlined way?
IDEATE
Brainstorming with crazy 8's
INTRODUCING FRIENDS FEED
"Friends Feed" — a new page dedicated to social content
Because all of the social elements lie in different parts of the app, I wanted to create a more organized, streamlined experience so users can more quickly and efficiently access friends' content. It incorporates three core elements:
Create a mobile version of "Friends Activity," so users can see what their friends are listening to in realtime.
Allow users to view their friends' Discover Weekly playlists to foster connection and encourage users to listen to new music.
Easier access to friends' most recently created playlists, so users don't have to navigate to each individual profile.
LOFIS
Designed three initial layouts
I had quite a tough time choosing between these three layouts. #3 presented a unique solution that most closely resembled a feed. #2 had a clean and simple interface that would be easy to use, but the high-level filters didn't match the categories that exist across the app. Ultimately, I chose #1 because it more closely matched Spotify's current design style.
Click image to zoom
INITIAL HIFIS
I started by designing the smaller boxes for playlists, referencing Spotify's existing design system as a starting point.
These are the four variations of square content sections currently used by Spotify. While my Friends Feed page mostly contains playlists, I thought that Spotify's version below (#2 and #4) didn't convey enough detail for my use case. I used these four variations as inspiration for my own iteration.
Spotify's current design system:
1: Podcast
2: Playlist from Spotify
3: Album
4: Playlist from user
I modeled my playlist design after the album format shown above. Here was the result:
I considered adding the user's profile photos in the bottom right corner of the playlist, mimicking Apple Photos' collaborative album design. However, this stylistic choice doesn't align with Spotify's current style guide, so I decided to keep the designs shown above.
For Discover Weekly and Blend, I created sections dedicated to these types of playlists. Spotify's current UI didn't contain a specified layout for friends' Discover Weekly playlists, so I opted for a format similar to the way Spotify's playlists are displayed on the app (#2 above).
FRIEND ACTIVITY
I added the "Friend Activity" section to the Friends Feed, bringing the desktop-only feature to mobile.
The Friends Feed gives a preview of Friend Activity, and the full list is kept in a separate page. By listing the most recent listening activity from friends, it provides users with an up-to-date snapshot of what their friends are playing.
I worked through a number of iterations on this screen, but ultimately, I decided to maintain a similar design to Spotify's desktop version. This similarity makes it easy for users to transition to the mobile format.
NAVIGATION ITERATIONS
I designed two different ways to access the Friends Feed page:
Iteration #1: High-level filters on home screen
In this iteration, Friends Feed is embedded as one of the filters on the home screen, next to "Music" and "Podcasts."
Pros: Easy to find and access, leading to higher usage
Cons: Doesn't match the hierarchy of filters (music, podcasts, etc), making it somewhat out of place
Iteration #2: Side menu
In this iteration, Friends Feed isn't immediately available from the home screen, but users can click into the side menu to find its contents.
Pros: Organized within menu, giving Friend Feed its own dedicated space. Instantiates it as a separate social content type, different than the rest of the home screen.
Cons: Friends Feed is hidden from view, thus harder to access. Might not receive as much traffic from users.
Ultimately, I selected this version because it aligns better with the app's information architecture and hierarchy.
FINAL HIFIS
Here is the final working prototype for Friends Feed:
On Friends Feed you can...
See friends activity from your phone
Easily access a hub of social content, including Discover Weekly and Blend playlists
See the latest playlists created by your friends
REFLECTIONS & NEXT STEPS
Final learnings from this project
Working within an existing design system
Spotify's well-defined design system provided both structure and constraints to my design process. I learned to work within these constraints, balancing creative liberties with the existng style guide.
A new kind of challenge
I found it challenging to work on a solo project and not be able to seek the advice of a design team or stakeholders. I learned to pay special attention to user perspectives, since that was the primary guiding perspective throughout this project.
.gif)
.gif)
