Spotify: Case Study
By: Bree Browder and Rachel Lewis
Note: This project is split into 3 parts- Research, Prototype, Validate
Designer Language — Research
Introduction
Here at Holberton School, we are tasked with a group project in which we redesign the Spotify desktop app for better user experience. We want to identify opportunities to encourage users to stream more content. We specifically want to focus on how users find music to listen to. We want to solve the issues they face that prevent them from staying on the “happy path” in a successful user flow.
In order to remove assumptions and remain as unbiased as possible, we could have chosen from several different personas as examples of potential users. Our team has chosen to use the persona of Alex, a college student who struggles to find music for a certain situation.
User Persona
Our UX Research Team has collected data on Alex, a user who struggles with finding music to stream. Alex is a college student who lives in a dorm room with his roommate and struggles with concentration. He listens to music that allows him to tune out other distractions while working. However, he pays too much attention to lyrics, which causes a different problem. When looking for songs without lyrics, he is able to find some but unfortunately most of them put him to sleep. Alex wants to find music without lyrics that can keep him motivated.
Alex’s exact steps for finding music, as well as the issues he faces, are described here in this user journey map:
As you can see, when searching for music, Alex is consistently frustrated or conflicted with the design Spotify has implemented. When he is on the home screen, he hesitates to click on the “Browse” tab because he knows he will be disappointed, but eventually commences with his search and feels stressed and exhausted with the results. They are scattered everywhere in an imperfect way and lack organization. He wants a pre-made playlist that is tailored to his interests, but the A.I. in Spotify’s application has not yet grown accustomed to his music habits.
In order to help Alex and other users like him, the Spotify desktop app could use some improvements.
The Process
While looking at Alex’s user journey map, we recognized that the Spotify search was not equipped for Alex’s exact needs. The genre categories were too broad while the results from the search were too specific.
Although Alex is looking for instrumental music, for example, there are too many genres in the Instrumental genre for him to find the upbeat tempo he preferred. When he types in “Electro focus”, the keywords he would use to describe the music he desires, he discovers that other people do not name their playlists the same way he would, so he only finds a few. He also takes a moment to recognize that his search contains more playlists than what are directly shown on the screen. He has to click a small, hardly noticeable, call to action button to see all of the available playlists.
We have addressed all of Alex’s concerns and believe we have found a better solution that will provide him with a better experience.
We worked together on all aspects of the process to find a solution. As you will see, our primary limiting factor lies in the fact that we do not have access to Spotify’s metadata in order to know exactly how the Spotify A.I. creates playlists based on user preferences.
Pain Point #1 — Stares at results
Our immediate thought was that an advanced search might be what Alex needed. Here we have provided an example of where Alex might find the button to start an advanced search:
We believe additional filters to customize the search would be useful. Here we have provided an example of some of the filters we believe would be helpful:
As you can see, filters include tempo, genre, era, mood, lyrics and length which users can customize to their liking. We have also provided for more specific genre-searching rather than the vague categories Spotify currently provides.
Although Alex is specifically looking for study music, we believe the primary issue Alex represents is the ability to search for music for specific situations that fall outside of primary listening preferences. Alternatively, a user could sign up for Spotify but not know where to begin listening. Either way, the primary issue lies in the fact that Spotify’s initial search options are limited.
We believe that if Alex saw these options, he could easily identify that his search might be for the more specific genre of “dubstep” which would include the fast-paced instrumental music he is seeking. Or he might be interested in searching for the tempo/BPM of music. He might choose both “party” mood and “no lyrics”.
All of these options should provide Alex with better search results. That way, no matter how he decides to use the advanced search, he will receive suggestions better suited for his needs.
Pain Point #2— Sees playlist section with only 3 results
Alex’s second pain point lies in the list of results he is given. Here we have provided a wireframe of how search results could be better laid out:
As you can see, while Alex can still search for songs, artists, or albums, he will also be able to see preselected playlists.We believe that with more detail about the music he is searching for, Spotify’s A.I. can output better results for its users.
We know that if a user listens to enough music, the A.I. provides generated playlists beyond those that are created by other users. However, because this takes time, we want to speed up the machine learning process being handled through the back end of the application by introducing more effective actions.
As you can see, we have provided results for immediate selection of preselected playlists. We believe that Alex and other users like him would be less disappointed with the results. His results will include more options. We also plan on including a larger call-to-action button rather than requiring users to scroll down the page and look for the existing small gray text button.
Pain Point #3 — Reads playlists’ titles
Alex’s third pain point arises because playlists are described with a title alone. We wanted a better way to provide the user with enough information to make a decision, and decided on a playlist design that could include titles, artists, song lengths, etc at first glance.
Each playlist result would include an example of a few of the songs that are contained within.
As it is, Alex must play the first few songs in a playlist in order to know if they will fit with his goals. He wastes time listening to the tempo of the song and trying to hear if it contains lyrics which will distract him. We want Alex to be confident that the playlist he has chosen contains the music he wants.
Outcome — “This one will do”
At the end of Alex’s user journey, he is frustrated and exhausted and willing to settle for a playlist that meets some of his goals but not all of them. Because he is unhappy, he might not listen to Spotify as much and will be less confident he can find what he needs in the future. This is a poor user experience that we want to work to eliminate.
We believe we have found a solution to his problem. Because Alex represents a section of Spotify’s user base, we have extended our solution to reach others in a similar position. We have decided on the following idea to elaborate:
- Advanced Search
- Filters
- A.I. learning model
Our plan is reliant on an advanced search with larger call-to-action buttons and better integration of Spotify’s preexisting A.I. to provide better playlists to users.
We know that the Spotify A.I. has metadata about songs. This is how it is able to create recommended playlists once a user has listened to enough songs to generate a profile. We believe that if we can tap into the A.I. for an advanced search, users will not have to spend the time or frustration of developing a profile history and can easily find the music they are searching for.
Designer Language — Prototype
Introduction
Our next step was to make our solution real. Our solution is separated into three sections, all with their own designs in Figma. The first solution is the introduction of the “Advanced Search” button. This button will allow our users to navigate into a more intricate search path that gets to know the user’s likes, wants, and needs in music.
User Flow Diagram
FIGMA Design #1: Homepage Design w/ Advanced Search
We wanted to make sure this new feature was bright and easily noticeable.
FIGMA Design #2: Advanced Search Filters
Here is where the new design features really start being implemented. Once the user clicks “Advanced Search” it opens up a whole new window that contains several different categories where the user will make individual selections based on their own interests. If the user is indifferent, there is a selection labeled “N/A”, meaning not applicable. It is important to note that using this selection does lessen the effect of the application’s results tailored to you. Especially if chosen a numerous amount of times.
FIGMA Design #3: Playlist Results
In this final design, playlist results are provided. Of these results, a “recommended” playlist breaches the top of the frame in easy view. All playlist results are detailed. They include the titles of songs in the playlist, artist names, albums they come from, and how many songs are in each playlist.
Wireframes and Mockups
Link: https://www.figma.com/file/mbZDwgvQpdYpTS65wwXw0q/Spotify-redesigns?node-id=0%3A1
Designer Language — Validate
Process
In order to determine how successful our design would be in the real world, we conducted a usability study in order to get a glimpse from other perspectives if our proposed solution did in fact solve Alex’s problem. We recruited 5 peers at Holberton School to take a look at our designs and pitch ideas about things we could change and make better.
We explained Alex’s situation to our reviewers and asked them to replicate the steps they would take to accomplish the task of finding a playlist for Alex. We listened to our users as they gave meaningful and insightful feedback about our mockups. We kept Alex’s goal in mind as we watched them navigate through our design to determine if they found it easier to find the proper music for Alex.
Peer #1
Here is what our first reviewer had to say about it:
- Design is well developed
- Color combination is great
- Likes different colors for different categories of music
- Buttons are big and user-friendly
- Search result has too much information
He also provided helpful suggestions such as only showing the “name, singer/author, and length of the music. By doing this, on each page, there would be more space for showing a larger amount of results for the users.”
Though he enjoyed the bright colors and bigger button features, he noted that our search results seemed a bit cluttered and made the experience overwhelming.
Peer #2
Our second reviewer said this:
- Likes the look
- Adding bright colors adds positive emotion
- Some selections are too vague
Although our second reviewer liked the overall look, his one criticism was that the advanced search options were too vague. He added that he didn’t want to guess how his “selections would alter the outcome.”
Although our first reviewer’s response to the advanced search was that it was cluttered and overwhelming, peer #2 felt that the selections included in the search did not provide enough detail. He felt uneasy about the A.I.’s ability to accurately display results that he would actually enjoy listening to through the Spotify app.
Peer #3
Our third reviewer, reviewed our design like this:
- Format is simple and easy to navigate
- Enjoys the aesthetic of the design
- Likes how many different options to choose from when filtering
- Likes the idea of utilizing the existing A.I.
- Very quick and easy to get through the task
- Pleased with the end result
Our third reviewer’s response was that he was overall very pleased with the layout as a whole. He felt the navigation was simple and the range of filters to choose from was interesting. He said “the task was a total success and I was very pleased with the end result and how it worked around Alex’s needs and wants.”
He liked many options there were in the advanced search. Unlike peer #2, he felt confident that he would find a solution with our design.
Peer #4
Peer #4 had the following to say about our design:
- Doesn’t use advanced searches so wouldn’t have thought to look there
- Likes the size/design of the “advanced search” button but not the green
- Likes the advanced search page design and instructions
- Doesn’t see the point of the “N/A” options on the advanced search
- Options are clear but should be more visible (cut off at the bottom)
- Wants to see the “search button” on the page to see how it would look
- Doesn’t like “Spotify green” on the search results page
- Search results are too crowded and still not helpful
- Likes the “see all” and “play” buttons
- Wishes search options chosen are visible on results page
- Feels most confident in the A.I. generated playlist
Our fourth reviewer rarely uses advanced searches when trying to find anything, so was unable to click on the green text to enter the advanced search page. She agreed with peer #1 that our search results included too much information but added that the overload of information wasn’t helpful if you don’t know the names of the artists you’re looking for. Despite that, she agreed with peer #3 that she felt confident that the A.I would provide the results she wanted.
Our fourth reviewer disagreed with the other peers in that she didn’t enjoy some design choices, specifically using “Spotify green” which she felt clashed with other colors and especially other greens on the page. She also wished that our design had been more explicit in showing more options, which we were limited in doing due to being unable to incorporate scrolling or multi-page pages in our Figma design.
Peer #5
Our final reviewer thought the following:
- Likes the idea of an advanced search but not using filters
- Doesn’t like the bright colors as they draw attention away
- Would prefer to search by artist
Peer #5 would most likely prefer to use an advanced search that utilizes keywords rather than options. He also felt that someone who was looking for specific search parameters would be most likely to have artists in mind and would be most likely to be looking for similar artists.
His final conclusion was: “I would probably just click through a bunch of random checks until it generated a playlist, and if I don’t like those then I will search for a trusty artist I can always depend on.”
Conclusion
We were eager to hear the results of the interaction with our designs from each of our participants. We received both positive and constructive feedback. Because some peers found our colors to be “positive” and made differentiating between options easier while others found them “distracting”, it seems clear that design preferences are very personal, so we’d have to do more research on that front.
As far as our overall concept design, after this study, we realize we must go back to the first phase of the project and iterate on more ideas. For example, the advanced search filters can be implemented in a way that doesn’t appear as “chaotic” to a potential user. This could mean a toning down of colors, less options to choose from, et cetera. It seems likely some peers would prefer a keyword search or more explicit options, which is valuable feedback.
Three of our peers appeared to like our design a lot and felt it would be beneficial to them or someone in Alex’s situation. They were confident that using our design would help in finding a useful playlist. Peers #3 and #5 were less convinced that our design would solve the ultimate problem as far as finding specific types of music with full confidence. They didn’t feel that it would necessarily be quick and easy to find a playlist and also weren’t sure they would ultimately be able to find the proper results.
Though we learned what could be changed, at large the project was a success. Further points of growth to tackle in the future are getting more familiar with the Figma application and getting more hands-on experience using the tools necessary to create stellar web page mockups, as seen in, Designer Language — Prototype.
Ultimately we learned a lot about UX design and feel the knowledge gained was very beneficial to both our personal and professional growth as software engineers. Thank you for reading along.
