Project Overview

Background

Founded in 2006 and launched in 2008, Spotify is a music streaming platform that provides access to music for everyone, everywhere.

Challenge

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.

Solution

  • “Send to Friend” Feature that allows for users to send music to their friends directly within the application.
  • “Join Session” Feature that allows for users to join a friend’s listening session in order to listen along.

Tools

Affinity Publisher, Figma, Zoom, OBS

Role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

View Prototype

Empathize

Secondary Research

Research Goals:

  • Identify the user.
  • Identify the user’s goals, needs, frustrations, and motivations when engaging with the application.
  • Discover how users connect with others.
  • Find out competitor’s strengths and weaknesses with regards to social features and interaction.
  • Empathize with the users in order to best serve the users.

Research Assumptions:

  • Demographic will vary quite a bit, however majority of the users of Spotify are millennials.
  • Users rarely interact with other user accounts.
  • Users discover new music through friends.
  • Users discover new music through Spotify’s song-based playlist.
  • One of the main ways of social interaction within a music streaming application is the sharing of music recommendations with others.

Research Questions

  • Who are the main target users for a social media type feature?
  • How are users engaging with other users within the realm of music sharing?
  • How are users engaging with musical artists?
  • Is there a need for a social media feature?
  • Who are the main competitors? (What are their strengths? Their weaknesses?)

Research Methodologies

Secondary Research:

  • Market Research: Look at existing research about the music streaming industry in order to understand existing and upcoming trends in the space.
  • Competitive Analysis: Researching competitors in the music streaming space and gathering data on the strengths and weaknesses of each competitor.

Primary Research:

  • Heuristic Evaluations: Analyzing the usability of the Spotify UI using Jakob Nielsen’s 10 guidelines as the basis.
  • User Interviews: Conducting interviews with Spotify Customers in order to learn about

Competitive Analysis

In the competitive analysis portion, I first identified key competitors, and then began to  take note of their main strengths and weaknesses particularly in reference to their features and what each competitor offers.

Provisional Personas

From the market research conducted, I discovered that Millennials made up the highest number of users of music streaming services, and specifically, users between the ages of 18-29 were the dominant consumers of Spotify with those older preferring Pandora. Using that  information, I was able to create two key personas that represent the general target demographic.

Primary Research

User Interviews

One of the key methods of research for this project was the user interviews. For the customer interviews, the questions that I came up with had the purpose in discovering each participant’s relationship to music, relationship to others via music, and finally, how they interact with the application. With that, the goal was to further discover key insights and needs of Spotify’s customers.

After completing the interview plan, I looked for willing participants that fit the provisional  personas  to interview, and overall, I found 6 participants with a range of 26-28 years of age.

Empathy Map

After conducting the user interviews, I created an empathy map using the transcripts from the recorded interviews. After analyzing the transcripts and grouping similar responses from the participants, I managed to uncover four distinct patterns within the participants, and thereby four needs that’ll help in moving forward with the process.

Insights

  • Users discover new music through recommendations, which can feel inaccurate
  • Users share music by copying and pasting links
  • Users listen to music while completing various different tasks
  • Connection with others through music is important to users

Needs

  • Users need their recommendations to provide songs that they like.
  • Users need a way to be able to share music easily with friends.
  • Users need to be able to choose music based on activity.
  • Users need a way to engage with others that share similar taste in music

Persona

Using information retrieved from the empathy map and the market research conducted, I was able to create a persona that roughly represents the overall goals, needs, frustrations and motivations of Spotify’s customers. This provides a reference for future design choices and lends itself to creating the overall project goals.

Define

POV Statements & HMW Questions

In order to better flesh out the problems that I’m looking to solve, I used this POV & HMW chart.

Brainstorming

After creating the “How Might We” questions, I conducted two types of brainstorming. I began with individual brainstorming where I gave myself a time limit to think of as many potential solutions for each question in a mind map format.

  • 4 HMW Questions
  • 4 minutes/question

Once I was finished with the individual brainstorming session, I conducted an online brainstorming session where I recruited four participants (all Spotify users) and asked them the same questions with the same time limit. In addition, after each question, I asked the participants to share what they came up with and at the very end, asked them to select their favorite solution for each question.

Potential Solutions:

  • Allow for positive and negative feedback within the radio feature (to help Daniel’s recommendations provide songs he  likes)
  • Be able to send music directly to friends on Spotify (to help Daniel share music easily with friends)
  • Scheduling playlists for a whole day of music (to help Daniel choose music based on Activity)
  • Provide the ability to have group listening sessions (to help Daniel engage with others that share a similar taste in music)

Project Goals

Referencing the Persona along with the Project Brief, I created a venn diagram of the combination of the User Goals, and the Business Goals which were outlined in the brief.

Ideate

Feature Roadmap

The Feature Roadmap is great in laying out a path forward. Using the research data as well as the Project Goals, we are able to better flesh out our priorities when it comes to features presented.

Application Map

With the feature roadmap created, the next step was to create an application map. One of the major goals when creating this was to incorporate the features I intended to add as seamlessly as possible.

While I originally placed the “Your Feed” section as its own major tab at the bottom of the application, after being informed of previous work that Spotify had conducted, I ended up placing that feature within the “Your Library” screen.

Task Flow

Referencing the UI Requirements document, I created the task flow for each task outlined. By laying out each action and screen involved with each task, I was able to get a better understanding of the necessary screens that would need to be created when designing the wireframes.

User Flow

Following the Task Flows, I expanded the flow by adding in potential points of deviation based on choices such as whether a user may want to search or just select a friend. This exercise helped in outlining potential drop-off points when a customer is using the product.

Sketches

Taking the information from my UI Requirements and other deliverables, I created rough sketches the screens listed in the task flow all while trying to stay within the bounds of the patterns within the application

High Fidelity Wireframes

With the low-fidelity sketches in hand along with screenshots of the application (within the Android ecosystem), we created High-Fidelity Wireframes of each screen and screen in action based off of our Flows and UI Requirements. By using the screenshots, we’re able to design the new features in a way that blends seamlessly into the existing UI by using current existing design.

Prototyping

Mobile Prototype

In the prototyping phase, we created a high-fidelity mobile prototype through the use of Figma and their built-in prototyping functions. Our goal was to place the prototype in front of potential users in order to first and foremost, test the Information Architecture and placement of features within the app. Through the testing, we can get a better understanding of User habits within the app itself and potential glaring mistakes that were missed during the initial creation of the prototype.

Testing Goals:

  • Test the Information Architecture to see if placement of the feature makes sense.
  • To observe how users interact with the send feature
  • To observe how users interact with the Social Tab
  • Test the usability of the feature
  • To identify potential frustrations users may have with the new features

Testing Methodology:

Moderated Think-Aloud Method: I will conduct this method over Zoom or the appropriate Voice Call Software by asking participants to verbalize their thoughts and actions all while completing the specified tasks through their screen-share. All sessions, both video and audio, will be recorded via OBS with consent.

Testing Procedure:

  • Scenario #1: Omar Sharif just came on, and you know that two of your close friends, Nathan Wong and Peter Hong would probably both enjoy the song. You’d like to send the song you’re listening to to the two of them.
  • Task #1: Send the song to your friends, Nathan Wong and Peter Hong
  • Scenario #2: After sending those songs, you’re now wondering if you received any songs lately from your friends. You’d like to check if there have been any songs that you’ve received.
  • Task #2: Check if any songs have been shared with you
  • Scenario #3: You suddenly have some free time, and you’d like to see what your friends are up to.
  • Task #3: Check what your friends are up to and join one of their listening sessions if they’re currently listening to music.

View Prototype

Testing

Affinity Map

Taking the notes from our usability test, we created an Affinity Map to make sense of, and organize the data into patterns observed. From our findings, we discovered that there were two crucial insights:

  • Users are used to going through the music settings menu to access the ability to send music.
  • The notifications feature is generally expected to be placed in a more directly accessible location such as the Home Page.

These insights led themselves to potential solutions that led to the final revisions for our prototype.

These are the potential solutions that I ended up suggesting, in accordance with the feedback received from the usability test participants. Here,  they are arranged in order of priority, based off of impact and cost:

  • Priority #1: Integrate the send feature in the music settings menu.
  • Priority #2: Don’t move forward with the notifications feature

As you may notice, Priority #2 does not necessarily match with its insight. The reason for this is that during a previous meeting, the fact that notifications may potentially distract users and lower retention rate was brought up. With that information and looking at patterns in other music streaming services, I decided to alter the original solution to what it is now.

Priority Revisions

Taking the priority revisions, I ended up making changes to the wireframes and prototype in order to better integrate the features that are being added.

Branding

As Spotify already has its visual branding developed, the style tile and UI kit is to allow for designers to have an easy and condensed reference in order to design with Spotify’s branding in mind.

Mood Board

Style Tile

UI Kit

High-Fidelity Wireframes

Desktop

Tablet

Mobile

Reflections & Next Steps

Reflections

This project was definitely very interesting and challenging. Working with an already developed product meant that working within the confines of already established design patterns was particularly important. This showcased one major area that skimped on and that was specifically the research phase, particularly research about Spotify specifically. With more in-depth research, some of the problematic design choices made might not have come up.

Next Steps

  • Moving forward, more usability tests will be conducted with the revised Prototype.
  • Additionally, after conducting those tests, we’ll be ready to hand off to developers.

Reflections & Next Steps

Reflections

This project was definitely very interesting and challenging. Working with an already developed product meant that working within the confines of already established design patterns was particularly important. This showcased one major area that skimped on and that was specifically the research phase, particularly research about Spotify specifically. With more in-depth research, some of the problematic design choices made might not have come up.

Next Steps

  • Moving forward, more usability tests will be conducted with the revised Prototype.
  • Additionally, after conducting those tests, we’ll be ready to hand off to developers.