Spotify

New Spotify social feature.

SPOTIFY CASE STUDY

ROLE: LEAD UX+UI DESIGNER

CLIENT: SPOTIFY (UX Academy Project)

TIMELINE: 80 HOURS OVER 4 WEEKS

PROJECT OVERVIEW:

Spotify is a leader on streaming music and wants to make a move into helping that connection further. They already have some core capabilities, like following artists or friends, and a basic feed of activity. Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” As a streaming music service, Spotify is the group lead and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities.

CHALLENGE:

Design a new social feature to improve social user engagement and retention in the app.

SOLUTION:

I came up with the idea to have a social collaborative playlist inside the Spotify app called Spotify Player. This feature acts as a DJ feature where users can create playlists, add their friends as collaborators, add music, and vote on their favorite songs.

RESEARCH

MARKET RESEARCH

To begin, I did a lot of research because I knew very little about Spotify. Especially not being a Spotify user myself. I started by conducting market analysis to learn more about Spotify and understand the types of users that use Spotify and by looking into their demographics. Then I started doing competitive analysis to learn about Spotify's competitors and their strengths and weaknesses.

PROVISIONAL PERSONAS

I created personas based off my market research done on Spotify that captured demographics and behavior. These would be later used to help target who I wanted to interview.

SURVEYS

I surveyed 12 participants with 10 questions using Survey Monkey. All participants were Spotify users.

The results were:

50% participants preferred to use Spotify as their music streaming service.

58.33% participants pay for a monthly streaming subscription.

50% participants were not using the social features in their music streaming service.

Following friends and artists at 62.50% and Sharing playlists with friends at 50% were features that are used the most.

83.33% of participants said they used mobile to stream and listen to music on.

If a new social feature was added to their music streaming service 33.33% of participants said they would want to see shared playlists with their friends.

USER INTERVIEWS

Using a list of questions I created from my interview guide that I had prepped and ready. I asked participants 14 questions along with a few demographic questions to start. I interviewed 5 participants, that included 2 females and 3 males, ages 22-29. The interviews were remote via Skype and Zoom. All participants are frequent Spotify users.

SYNTHESIS + DEFINING

EMPATHY MAP

After collecting my research findings from my user interviews I created an empathy map. While doing so I looked for specific patterns and similarities to uncover insights and user needs.

USER PERSONA

Using the pains and gains from my empathy map I created a user persona. These helped me create the goals and frustrations for my user persona. Connor likes listening to music and relies on Spotify to find new music and artists. Music is a big part of his life. He shares music with his friends a lot especially in social settings.

DEFINING THE PROBLEM

With my primary persona created, I began creating my "Point of View & How Might We" questions to set the tone for my design. Using my insights and needs from my persona I was able to create 'point of view statements & how might we' questions.

BRAINSTORMING

I did a brainstorming session to gather ideas for each of the how might we' questions. I took the opportunity to just write whatever came to mind in 2 minute increments twice for each question.

INTERACTION DESIGN

SITEMAP

Using Spotify's current layout I mapped out the navigation. I incorporated the new social feature I created called "Spotify Player" that uses social playlists and integrated that into the sitemap as well. Green on the sitemap represents the new social feature "Spotify Player".

LOW-FIDELITY WIREFRAMES

I created low-fidelity wireframe sketches of the screens for the key user flows that I had mapped out. By doing this it helped me get my ideas down on paper and envision how the designs would look before moving them to digital form.

TASKFLOW

Using the sitemap I created 3 scenarios to create the task flow. These showed multiple ways users could interact with the new social feature Spotify Player. By creating the task flow it helped me think through the scenarios and screens I would be creating for the prototype.

UI REQUIREMENTS

Before starting to design I came up with UI requirements for each screen. This helped me think of the priorities and requirements or each screen. This is essential so that I don't forget to include anything and can get it all down on paper before designing.

HIGH-FIDELITY WIREFRAMES

Once I had all of my UI requirements down I was now ready to start designing. I used my low-fidelity sketches as a blueprint. Since I was working with an existing app, Spotify, I was able to closely model their existing design.

PROTOTYPE

I used my high-fidelity wireframes to create a prototype using Invision. Using this prototype I had users test the 3 scenarios from my task flow I created.

View Prototype

USABILITY TESTING

Test Objectives:

- Test the usability and functionality of the Spotify app as the users navigate through it

- Observe and identify any confusion and pain points users face

- Identify any inconsistencies or missing elements

- Observe features users are drawn to

I created a usability test plan before conducting my usability tests. My usability test plan consisted of my test objectives, goals, and details. I had the participants go through 3 tasks in the prototype after reading them different scenarios. The goal was to see how they reacted and if they were able to successfully complete the tasks. While participants navigated through the prototype I carefully observed and recorded so that I could take notes later after our session.

INSIGHTS + RECOMMENDATIONS

Using the notes taken after the usability testing I created an affinity map. I used digital post-its in different colors for each participant. I grouped together similar patterns. I broke down successes, problems, observations/feedback, and comments from participants. This helped me find insights and recommendations for my design.

Key Insights:

- Only having the add icon instead of the collaborator’s name as well as a hotspot added confusion.

- Participants appeared somewhat confused as to what the difference between the Spotify Player and the Social Playlist was.

ITERATIONS

Based on the recommendations I changed a few hotspots in the prototype, created a few new screens to make the prototype flow better, and made a few other small changes.

PROJECT TAKEAWAYS

This project was challenging for me because I was not a Spotify user. That was the main reason why I chose to tackle it. I am a loyal Apple Music user and prefer it over Spotify. But now after completing this project I have become fan of Spotify. I always thought Spotify was confusing and did not like the UI and dark colors. I have learned a lot about both Spotify and Apple Music. While doing research on the music streaming industry I did not realize there were social features incorporated in them.

Working to improve an existing product has it's ups and downs. You don't have the freedom to create your own brand and UI elements. You already have an existing brand that you have to work with and match exactly.

NEXT STEPS

With more time I would implement the ability to vote on music into the prototype. I would also like to design this new feature for Desktop.

Other projects: