Spotify: A Design Case Study

Introduction

Overview and Problem Statement

This case study focuses on the Spotify desktop app experience. Spotify is arguably the most popular streaming service available today. After reviewing Spotify's goals at the end of last quarter, the Spotify Design Research (SDR) team wants to identify if they have an opportunity to make users stream more content. They have identified a challenge which they think is worth exploring:

“Improve how Spotify users find music to listen to.”

User and Audience

So who exactly are the Spotify users we're designing for? The SDR team gathered mountains of data from focus groups and 1-on-1 interviews with Spotify users. The result was 3 different fictional users each with their own journeys and issues they encountered with the Spotify desktop app during their journey. There's a wide variety of people that use Spotify for different reasons, but a common use for Spotify is for students to find study music.

Let's Meet Alex

Enter our main character for today's case study, Alex. Alex is a 28 year old male student at Seattle University studying for a Bachelor of Arts in History. He's got a keen interest in music and is pretty adept at using software. Like most college students, Alex lives with a roommate. Being the overachiever that he is, Alex's impeccable study habits include around 3 hours of studying each night.

However, the issue is that Alex finds he lacks focus when he's trying to study and his roommate is around. The quickest thing he could do to help solve his problem is to purchase a pair of noise-canceling headphones, which he's now done. This is where Alex's love of music comes back to bite him. Being an audiophile, he quickly finds himself listening to the lyrics of songs while he studies, instead of focusing on his work. He attempted to solve this problem by searching for songs without lyrics, but they tended to be too mellow and gave Alex no motivation to do his work, only motivation for his head to find his pillow.

In a nutshell, Alex is looking for 3 things in his use of the Spotify desktop app. First and foremost, he wants to gain focus while studying. Seeing as his performance in school is directly related to the quality of his study, this is his primary focus. His next 2 goals are somewhat cascading in nature. His second goal is to cut the distraction from his roommate, which will help him gain focus while he studies. He plans to achieve through his use of his shiny new noise-canceling headphones, and a seamless Spotify experience that finds the perfect music for him. His final goal is what he would like to get from using the Spotify desktop app. He wants the app to quickly find playlists without lyrics that have a motivating tempo, while also excluding the mellower songs. This will not only help him stay upbeat and motivated without pulling his mind into the song's meaning, but it will likely be enough ambient noise that he no longer hears his roommate. This leads to less distraction, which will ultimately lead to better studying and thus, better scholastic performance. The icing on the cake would be if Spotify can not only curate these playlists, but make theme easily discoverable so Alex can focus on studying and not on finding suitable study music.

Below you'll find Alex's full Persona:

The User Journey Process

Alex's User Journey

Now that we have an idea of what Alex is looking for from his Spotify desktop app experience, let's follow his journey step-by-step and see what design changes we could implement to help him accomplish his goals. Below you'll find Alex's personal user journey, which will be our roadmap for the following section.

To begin his journey, we can see Alex is already feeling unsure and hesitant as he opens the app. This to me is a glaring pain point, although the research team didn't technically specify it as one. If a user gets negative feelings as they open your app, you're going to face quite the uphill battle in getting them to continue using your app. My hope is that after removing several of his pain points, Alex actually enjoys the experience of using the app and is excited and eager when he opens the app.

Pushing past his apprehension, Alex moves onto entering his search query. He's quickly gone from being hesitant to being confident, with his confidence based solely on him believing the search will return pristine results. However, after clicking search, Alex encounters his first real pain point.

Pain Point #1 - Search Results

The first pain point Alex encounters is right after he begins his search for an "electro focus" playlist. Right away we see he's thinking "Where are the playlists?" If we remember from his user persona, Alex doesn't want to spend a lot of time browsing for music. His goal is to use Spotify to study, and time spent finding music is time not spent studying. After scrolling to the bottom and finding the playlist search results, Alex encounters his second pain point.

Pain Point #2 - Lack of Options in Playlist Results

Alex's second pain point revolves around the search results that are returned. After taking the time to scroll all the way down and find the "Playlists" section, Alex is perturbed to notice that it only shows 3 results. "3 results?" he thinks to himself, which is an awfully low number indeed. His disappointment quickly turns to relief after he finds the "See All" button. "Oh, there are more" he surmises. What seems like an eternity and countless button clicks later, he finds the entirety of the search results. It didn't take long for Alex to encounter his third pain point.

Pain Point #3 - Difficult Result Parsing

The third pain point in Alex's user journey involves the difficulty parsing results for a suitable match. Alex's relief doesn't last long as he's quickly overwhelmed trying to find a playlist that'll work for him. At this point, Alex is forced to either just pick a random playlist for the sake of brevity and play the first few songs to determine if he enjoys it, or to spend more time reading playlist descriptions to determine if he would enjoy a specific playlist. Alex typically only saves playlists after he's spent time reading their descriptions and listening to the first few songs. That means that Alex essentially has no way of instantly finding a good playlist from the search results, he always has to read descriptions first. This collides in a major way with his main goal of quickly finding upbeat, lyric-less playlists. Plus, reading all the playlist descriptions after spending so much time navigating the app has left Alex exhausted. Even though he's now find a suitable study playlist, he has no energy or motivation to actually study.

In summary, Alex starts his journey hesitant and unsure, and ends his journey frustrated and exhausted. This doesn't seem like the trajectory of someone that will continue to use the app on a regular basis. There are some things I think could be done to improve the Spotify desktop app experience based on issues Alex encountered on his user journey.

Opportunities for Improvement

• Add a filters section to the empty space between search bar and user info at the top of the app
• Add a filter to the search mechanism that allows you to specify whether you want your results to return playlists, artists, songs, podcasts, playlists, etc.
• Add a filter for preferred tempo
• Add a filter for lyric amount based on number of lyrics
• Add a ranking mechanism for playlists, artists, songs if user wants all result types returned. This would allow playlists to feature at the top instead of the bottom, for example
• Allow an option/filter to "See All" of a specific result type on the FIRST results page
• Provide a "Similar Playlists" section of the playlist search results, to quickly find new playlists without randomly selecting or spending time reading playlist descriptions
• Curate the "Similar Playlists" section with pre-made playlists, but also add custom playlists based on favorited songs, artists, albums, similar artists in other playlists you like, etc.

Design Ideas and Sketches

The premise of my ideas focus on one specific implementation detail: utilizing free space at the top of the window to better structure content based on the user's desires. This free space exists in the same area on every window view, so it would easily be added to the template, and filled with the correct data based on the window's contents.

This new component would be multi-faceted. Users would be able to restructure contents on the page dynamically through the ranking of result listings. They would also be able to better filter the search results returned to better suit their desires. If a user only ever listens to playlists like Alex, it would vastly improve their experience if playlists were always the first result returned.

I admit, this idea could be implemented differently using some form of personalization template in user settings. However, for the sake of simplicity, we're using an added component to control user settings on the page.

New Filter Component on Search Page

As you can see, this filter component adds a lot of useful features. Users would be able to filter the search results by type, amount of lyrics, and tempo. They would also be able to order their results, which would then change the layout of the search results page, returning their results in the order they ranked them.

New See All/Results Options Component

This new results options component has a few features. First and foremost, it allows users to select a media type for which they would like to view all results. This eliminates the need to always hit the "See All" button whenever you want to view all the search results for a given media type. It would convert that result section into a container that included all results horizontally scrollable. If a user like Alex wants to always see all possible Playlist results, that option should be made easily available and not require extra clicks each time a user uses the app. Secondly, it carries over the same restructuring logic from the Filters component. If a user forgot to rank order their results when they searched, that functionality is still present. The page will restructure based on their choices.

New Similar Playlists Section and See All Logic

Here we see the addition of the similar playlists section at the top of the search results returned from searching for playlist types. We also see the scrollable Playlists section showing all playlist search results, since the option is selected to see all playlists. "Similar Playlists" could become "Similar Songs" or whatever other search result you were searching for first. This example is showing what it might look like for someone in Alex's shoes who only wants to view playlists.

Conclusions

After numerous discussions regarding viability and opportunity cost, my team has chosen to focus on adding the initial search results filter component. Although it won't be hard to reuse most of the component for the other ideas, focusing on adding the feature as early in the user journey as possible seems to be most prudent. In fact, there may be an opportunity to incorporate the results options component into the initial search results filter component to where the component is the same on all pages. If this proves viable, this might be the best path forward due to the simplicity it offers. Adding the new views might prove more time-intensive and labor-intensive to tackle initially.

Ideally with this new design, my team will be able to eliminate major pain points for Alex and numerous other Spotify users. If this is successful, we'll ultimately be able to accomplish the goal of getting users to stream more content because they'll have vastly improved experiences with the app and actually be able to see its benefits. By implementing this design, my team thinks we could help countless users have a more pleasant journey through the Spotify desktop app.

Pt. 2 - Prototyping

This portion of the project handles storyboarding the new widget and providing links to view the designs and prototype. LinkedIn wouldn't play nice with the Figma links, please forgive the format!

Storyboard

Mockup Link

https://www.figma.com/file/PsyMhqpVGye8vM2Sek8t8h/Spotify-(Copy)?node-id=0%3A1

Interactive Prototype Link

https://www.figma.com/proto/PsyMhqpVGye8vM2Sek8t8h/Spotify-(Copy)?node-id=1%3A2&scaling=min-zoom