Client: Spotify (UX Academy Capstone)

Role: User Experience Designer 

Objective: Research the ways people relate to music and each other and use these findings to develop an improved social feature within the existing Spotify design


Project Background

Although Spotify has a commanding position when it comes to streaming services, its numbers have remained modest compared to Pandora and has room to improve its design. Spotify is looking to improve its social features, within the existing product. 

To understand the situation deeper, Spotify users and general music listeners will be researched to discover how they related to music and each other. Based on these findings of what role music has socially, one development will be made to improve the current app.

Design process.png



Building empathy with the user and uncovering their needs through in-person interviews and secondary research

Research Goals

  • Learn how people are sharing music and why 
  • Learn why people don’t share music 
  • Define target demographic
  • Discover if mobile or desktop app is used more often
  • Learn how people feel about their current Spotify experience 
  • Learn about experiences people have with music that make them feel connected 


  • User interviews: Interview 5-10 strangers in a public space who listen to music. Use thoughtful questions to guide the interview while also allowing the conversion to flow naturally so participants share their stories and personal experiences. 
  • Secondary research: Conduct online research to learn more about Spotify’s current branding, design and statistics.

Empathy Mapping

Notes from 7 different user interviews were taken on different colored Post-It Notes, each color corresponding to a user. Research notes were then divided into categories: Doing, Thinking + Feeling, Seeing, Hearing, Pains, and Gains. This method, called empathy mapping, is a way to organize research findings reveal the problems and mindset of the users. Empathy mapping takes all the different pieces of data and creates a cohesive vision that is human-centered. It also makes it easier to find patterns across the data. 

Themes developed from this data became insights, which defined user needs for this project. 

Empathy Mapping


A persona was developed to present data found from research in a way that is easy to relate to and understand on a human level. It keeps the user and their needs at the center of the design process and helps eliminate designer assumptions as the design process moves forward. A provisional persona was also created prior to research based off of any known user information, which helps get the design team on the same page and reveal assumptions before research begins. The final persona is then defined based on data from research. 




Using research to define needs, ideate solutions and test preliminary designs

Asking the right questions

Research results are then synthesized in order to reveal insights and needs. Insights, developed from empathy mapping research, are based off of the main themes found and are used to define user needs. Needs are then written from the user’s perspective with Point of View (POV) statements to help keep the design centered around the user’s needs. POV statements are then rephrased into “How might we..?” (HMW) questions to help with brainstorming solutions for user needs

hmw chart .png

Defining where user goals and business goals intersect

I created a Venn diagram of Spotify's business goals compared to the goals of the Spotify users. This shows how the needs of the user and business relate to each other so that going forward the design isn't overly focused on one side's needs. 

business user goals spotify.png

Brainstorming solutions

I did 5-minute brainstorming sessions using Post-It Notes to brainstorm features that would solve the pre-determined needs. Ideas were then organized into a feature matrix to show what should possibly be developed first based off of low cost/high value to user.


Prioritizing Solutions 

I created a product roadmap based off of the two determined top needs that I brainstormed for. This gives an overview of what solutions are going to be executed on, and prioritizes them. This makes it clear on which feature will be developed for this project with the available time and money, and what possible future developments there are beyond the scope of this project.

Sitemap & User Flow

The sitemap shows the app's architecture or structure and shows screens relationship to one another. It also helps show what screens will need to be designed and developed.  The user flow shows the path a user would take to accomplish the task of creating a new personalized social playlist and sharing it with friends.

It outlines the user's journey through the feature and provides the basis for what pages/screens need to be developed. It provides an opportunity to make sure the experience is in line with the user's needs & doesn't leave out any steps in what they're trying to accomplish. It's easier to edit the flow during this phase instead of later on in the process.

I created this user flow by reviewing the sitemap and going through each step and decision the user would make while creating a new personalized social playlist, starting on the homepage and ending with the playlist being saved/shared.

Screen Shot 2017-12-03 at 7.57.10 PM.png


User Interface Design

Using testing findings to develop high fidelity wireframes and UI kit

  • I created a prototype in inVision from mid-fidelity wireframes I created in Sketch 
  • I tested the prototype on five participants in-person, having them run through five defined tasks: 
    • Create a new mixtape 
    • Add songs onto a mixtape
    • Personalize a song
    • Share a mixtape
    • Add a new friend on Spotify mixtape
  • Results from testing were then used to refine wireframes before creating high-fidelity designs

Mid-Fidelity Wireframes 

placeit (1).png

Usability Testing Results

User testing results were used to identify insights about the design, then developed into design recommendations to be implemented in the next iteration.

affinity_map_ (1)spotify.jpg
Screen Shot 2017-12-03 at 6.23.56 PM.png