Spotify Friends
Connecting people with similar music taste
Timeframe
February 2024
Class
Interaction Design
Focus
UX Research, UX Design
Software
Figma
The assignment: Make Spotify “social”
Many people love discovering new music, but Spotify lacks meaningful ways to connect users who share similar taste. While users can see what friends are listening to via the desktop Spotify app, or manually ‘stalking’ their friends’ playlists, there's no easy way to find new people who share your taste in music or get recommendations from them.
My goal: Provide the opportunity for users to connect with and discover new music through similar listeners.
What does 'social' mean?
Working with my class, we analyzed 14 user interviews and found consistent themes around the desire for meaningful connection. I then conducted competitive usability audits of existing social apps to understand how they facilitate connections between strangers.
It became clear that the most successful social features balance discoverability with user control over privacy.
“I would like the option to listen to a song that someone else on the other side of the world is listening to at the same time…this would make people closer.”
- User Interview
Left: In-class interview summarizing activity, Right: Pinterest and Instagram usability audits
Ideation (the first idea isn’t always the best one)
Determined to take users off their screens -- is it really “social” if you’re still on your phone? -- I decided on an idea which would allow people to connect in-person based on music taste. Although this was a seemingly good idea within my setting at Northeastern University, I soon realized that there were major safety and privacy concerns once expanded to Spotify’s broad audience.
Left: Solution brainstorming, Right: Storyboard for user persona
Going back to the drawing board I reflected on what would come of these in-person interactions: music recommendations, surely. So, with that in mind I identified my goal: to provide the opportunity for users to discover new music through similar listeners.
User feedback on paper prototypes
Paper! And pen! And a bit of white-out... I started the design process user testing physical designs. At this stage the designs were the most flexible and the feedback the most formational to the design at its pre-digital stage:
Paper prototypes with user feedback notations
Changes made based on user feedback:
a) Add a search bar to ‘Add Friends’ page to consolidate design and minimize clicks and choices.
b) Profile page upgrade was popular among 3/3 users. Reference stats.fm which displays profile music statistics, but give users option for privacy!
c) Pin media that the user chooses, not the algorithm (share what you want to show, not just what your data is).
Mid-fidelity wireframes
Transitioning to high-fidelity
With low-fidelity testing complete, I created high-fidelity prototypes that brought the Friends feature to life within Spotify's existing design system. I focused on making the new social elements feel native to the app by maintaining both Spotify's clean design system and music-first mindset.
Task Flow #1: Share Your Music
Task Flow #2: Find New Music
Takeaways:
1 Learned how to follow a design system
2 Conducted 3+ rounds of user testing
3 Expanded technical skills in Figma
Working within Spotify's design system helped me understand what it means to use a design system, not just create one. Embedding my new feature into Spotify’s design system was a welcome challenge. Additionally, This project proved how getting user feedback at different stages reveals unique insights - - what users see in a paper prototype versus a high-fidelity design helped me to solve problems I hadn’t noticed in my own design. Lastly, learning how to use component libraries, overlays, and prototyping in Figma improved my technical skills.
Moving forward, adding personal context to pinned songs - - letting users explain why a track matters to them - - would make these connections even more meaningful.