Spotify, Social-fied

Designing a new "social" feature for Spotify

My role:
Researcher & Designer

Project type:
Class project

Timeline:
February 2024 - 4 weeks

Software:
Figma

Project summary:

Given the opportunity to design a new social feature for one of my most-used applications, I conducted user and competitor research, designed prototypes of increasing fidelity, and user tested along the way to create a fully-functional prototype of the Spotify Friends page, a social feature which connects Spotify users with similar music taste, allowing the discovery of new songs, artists, and playlists.

The challenge

"In this assignment, you are tasked with adding a social function to the Spotify application. It asks you to consider the components and features of a digital social community. Sharing content? Representing oneself on a profile page? Messaging back and forth? A general feed? You will do a deep dive into what features constitute a “social function” and then build out your version of a social function for Spotify."

A big challenge, yet an exciting one, Spotify being an application I use often in my day-to-day life. I addressed this challenge systematically, beginning by researching my audience and competitors.

The research: What does "social" mean?

The first step I took was to conduct a user interview on a member of my prospective audience. In the questions asked, I focused not only on Spotify but on social media as a whole, asking my interviewee broad questions about how social media impacts her life both positively and negatively, along with digging into more minute features in specific apps. The complete user testing notes can be found at the link below.

User testing notes Figma file

Given the context of this being a class project, I had the opportunity to share information with my classmates, summarizing our user tests in class, presentation style. We worked as a group to summarize the 14 user tests my classmates and I has completed, and organized the information into relevant categories, such as the context for which Spotify was most commonly used, how they used social features to connect with their peers, things users commonly disliked from their various social media apps, etc.

Summarizing the class's collective user interviews helped to clarify what users other than myself found important in both their social media and music-listening experiences. A common thread that stood out to me was the desire to stay connected. This need is summarized well in a quote from one of the user interviews:

“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 and we can chat and talk about it…this would make people closer.”

The idea of connectedness leading to what many qualified as a "social" feature digitally inspired the idea I ultimately pursued, but the next step in the design process was to take a look at some social application competitors to analyze how they connected both existing friends and strangers across the globe. I did this through two competitive usability audits in which I identified both pain points and bright points of this user flow based on Jakob's Ten Usability Heuristics by the Nielsen Norman Group.

Usability audit Figma file

With my preliminary research done, I was ready to move on to defining my project.

The idea: Who uses "social"? How do they use it?

Excited about the idea of connecting users across the globe over music, something that has bonded people for generations, I framed the idea of my project using the "How might we" question framework to generate a creative, yet directed solution.

How might we connect users who have similar music taste?

This was a big question to tackle with an inspiring range of possibilities. My first step in ideating was to determine who my primary audience was. To do this, I created a user persona which helped me gain a clearer understanding of who my new feature could impact.

With a better understanding of who might be using my new feature, I brainstormed many ideas to answer the "how might we" question.

A note on iteration: At this stage in the process, I was pretty set on connecting people with shared music taste in person. However, right around this stage I began to discover too many pitfalls in terms of assuring user safety that I would not be able to solve, at least in the time frame of this project. From there, I decided to pursue a similar idea without the in-person aspect. My new idea still served to fulfill the answer to my "how might we." This experience continued to teach me how important mistakes are in the design process, as my initial idea that I did not pursue led me to the idea that I ultimately completed.

With an idea in mind that catered to my audience based on the research I had completed, I brainstormed how my idea could impact my user persona in the form of a UX narrative (found in pitch deck slides below) which I visualized in a storyboard:

Finally, I was ready to wireframe a tangible product.

The process: Low-fidelity wireframing

The next stage of picturing my design was to create a paper prototype and user test to get feedback before going into digital wireframes. Below are my paper prototypes and a link to my user testing notes.

User testing notes PDF

This stage of user testing was the most critical in my process. The idea had just been formed, and wasn't even digital yet, leading to the most flexibility and creativity in my conversations with three potential users of this feature.

Add search bar to new friends page to consolidate design and minimize buttons and appearance of options. Users can search for friends within that page.

Profile page upgrade was popular among all 3 users. Take inspo from stats.fm to show profile music statistics, but give users option for privacy if they want it!

Pin media that the USER chooses, not the algorithm (share what you want to show, not just what your data is).

After consolidating my conversations into actionable feedback, I designed low-fidelity digital wireframes for my new feature.

Lo-fi wireframes complete, I user tested for the second time, with some valuable questions I found I needed to answer along the way:

Will profiles be public or private?
This question was easily answered in Spotify's existing privacy settings. Users can choose to turn on listening activity or not on desktop, so I planned to stick to the same pattern on mobile.

How do friend requests work? What is visible, and what is hidden?
This new feature too, would follow Spotify's existing precedent, and that of many other social media apps including Instagram and Pinterest, the apps on which I conducted my competitive usability audit. "Friendships" could be non-mutual, yet turning an account private would prevent strangers from accessing your activity.

Would there be the ability to caption pinned content?
Not yet, given the timeframe of the project there was not enough time to implement this feature, but it was a great idea for future iterations!

The process: High-fidelity wireframes and critique

With the second round of user testing done, I began my high-fidelity wireframes. Below are my first hi-fi wireframes before the last round of feedback and iteration. The final wireframes can be found at the bottom of this page.

Hi-fi wireframes 1 Figma file

I presented these in class in my process portfolio, found below, and collected one final round of feedback to iterate one step further.
The most valuable takeaways from the class discussion were as follows:

Problem: User flow does not make sense. Action of requesting friend is not in the correct information hierarchy.

Solution: Move the "Friend Request" button below taste match note on profile page to allow for better readability and flow.

Problem: Green circles around profiles look like user progress through the song. This is misleading because green is used to signal play in the Spotify design system.

Solution: Change green to white to improve clarity of meaning.

The result: Final product

My elevator pitch for the Spotify Friends tab was:

For Spotify users who enjoy sharing their music taste with friends and who appreciate new song recommendations, the friends tab is a social feature for Spotify that connects users with people who share their music taste.

Unlike Spotify currently, the friends tab on mobile allows users to connect with both their existing friends, and similar users, allowing anyone to bond over shared music taste from wherever they are in the world.

The following slides include a summary of everything discussed on this portfolio page, in brief.

My takeaways

I learned a TON about how to follow an existing design system and keep design patterns consistent between existing and new features and across screens. This was my first time extensively implementing a new feature within an existing platform.
I expanded my skills in Figma, practicing skills I have learned like using component libraries, overlays, and prototyping.
I conducted three rounds of user testing, and spent much more time researching and defining my problem and audience before jumping into the creation of a new solution.

What were the most important parts of the design process for you?
‍Overall, the most important part of the design process was obtaining feedback. It is also my favorite part of the design process as it allows me to see my own designs from a new perspective, allowing me to better understand what stands out in the designs I created, both positively and negatively. Getting feedback at a variety of different stages in the process was especially valuable because I could see how the evolution and trajectory of my idea changed as I had conversations with more people about this theoretical Spotify feature.

What different ideas did you start out with? What direction did you go and why?
‍I pursued a secondary idea for much of this project, and only shifted to my current idea partway through. Originally, I planned to create a feature that encouraged new, in-person, friendships to form through common music taste. However, there were many safety precautions that I wasn’t able to account for, and the longer I worked on that idea, the less appealing I found it. I didn’t want to use my own product which caused me to doubt the path I was on. I thought about the idea and realized the part I was excited about was finding new friends based on common music taste, and the ability to get new song recommendations from them. That was what brought me to my current idea, which brings people together in a different way (that doesn’t have the same safety pitfalls).
‍
‍What did you learn from user observation and from exploring and applying Spotify’s design system?
‍I learned a ton while designing this prototype. In sticking to an existing design system, I have never gotten to know an app better! Being able to replicate an app I really admire was very motivating to me. In the user testing process, I learned a lot about how each user perceives things uniquely from myself and each other. I was really interested in how my conversations with each user followed very different paths, because each person I talked to used the app in a slightly different way, and therefore had different priorities and answers to my questions. After doing three user tests that started out the same, on the same paper prototype, I came away with three unique and enlightening conversations that expanded my view of the product tremendously in such a short span of time.

What was the most successful part of your solution? How do you know?
‍The most successful part of my solution is the ability to unite people over a shared interest. There are many pros and cons to “social media” apps now, but one reason for their popularity is that they have the ability to increase connection and a sense of belonging. This new feature allows users to find people who share their potentially niche music taste, and then goes a step further, allowing users to learn more about their new “friend” based on their profile, hopefully getting a recommendation or two along the way. Music has the power to allow people to feel a strong sense of solidarity (think concert, fanbases, etc!). Using a popular music app like Spotify to let users know that there are other people who love their favorite artists and songs is really powerful, which is what makes the overall goal of the design the most successful part of my solution.

‍What would you change if you were to continue working on this project?
‍One feature I would love to add to the updated profile pages is the ability to add notes as to why a song/playlist/artist might be pinned on a user’s profile. Is it their current favorite? All-time most listened to? Something they recommend to others? I believe this added level of personalization would enhance the existing additions to the profile page.