STUDENT PROJECT
Spotify
This hypothetical project explores adding a feature to the existing Spotify app: the ability to add a song to multiple playlists at the same time.
YEAR
2022
ROLE
UX/UI designer
DURATION
40 hours
TOOLS
Figma, Miro, Otter.ai, Maze
Introduction
During this project, I explored the process of adding a new feature to an existing app. Inspired by my own personal interest, I chose to focus on Spotify, the digital music and podcast service. Spotify has over 456 million monthly users, 195 million of whom pay for the premium service. However, although Spotify could be considered the #1 music streaming platform, competition is present thanks to services such as Apple Music, YouTube Music, Amazon Music, and more. This project served to add a hypothetical feature to Spotify, which would add value and encourage people to start and/or continue using the product.
Keeping in mind my very limited time frame, I scoped the project by limiting my focus to the playlist feature. Additionally, my decision to work on Spotify was also influenced by the fact that they encourage users to express ideas about what new features would be beneficial, via their ideas forum. This was a valuable resource that allowed me to quickly pinpoint a problem that a large number of users have, and to then design a solution that addressed that problem.
Constraints per the design brief:
The new feature had to conform to Spotify’s current brand guidelines.
The new feature couldn’t include images that require licensing.
Process Overview
RESEARCH
Research plan
Secondary research
Interview guide
User interviews
Affinity map
DEFINE
Research findings report
User persona
Task flow
Spotify design pattern research
DESIGN
Mobile wireframes
Desktop wireframes
Interactive prototypes
ITERATE
Usability testing
Test data analysis
Iteration on wireframes and prototypes
STEP 1: RESEARCH
Discovered that users desire the ability to add a song to/delete it from multiple playlists simultaneously.
DELIVERABLES
Research plan
Secondary research
Interview guide
User interviews
Affinity map
Secondary Research
I started this project by scouring the Spotify Community ideas forum, as well as Apple app store reviews, to see if I could find anything that stood out as being a widespread issue in regards to the playlists feature. Several interesting concepts were proposed, and problems were expressed that seemed worthy of a solution. One such suggestion that appeared on both databases was that users would like to be able to add a song to multiple playlists at the same time; this concept had 1,056 positive votes in the ideas forum, which led me to believe it warranted more research. Adding this feature would alleviate frustration for a large number of users, by reducing the number of steps it takes for them to complete their desired task.
User Interviews
Process
I recruited 6 participants via social and professional networking. All participants use Spotify regularly.
I thought I had ensured that they all create and manage playlists regularly as well, but during the interviews I discovered that one of them does this very rarely. This was a good reminder to be extremely clear about requirements for interviewees during the recruiting process, as her input was less relevant than that of the other interviewees.
Interviews were conducted via phone and in person and were recorded/transcribed using otter.ai.
Data points were grouped by concept using an affinity map, in order to pinpoint patterns and insights.
Goals
I needed to validate the hypothesis that the proposed new feature would improve user experience. In order to do this, I needed to learn precisely how people use and interact with the playlists feature, specifically when creating or editing a playlist (adding/removing songs), as well as to understand what their pain points and delights are in regards to this task. This would help determine if the proposed feature was a valuable one to add to Spotify, and would act as a starting point for generating solutions to the problem.
SPECIFIC RESEARCH OBJECTIVES
Understand how using the app fits into the daily lives of users.
Determine how users go about creating or editing playlists.
Verify that users add a specific song to multiple playlists.
Learn what is not currently working well with this process.
Learn what is currently working well with this process.
Verify that it would improve user experience to be able to add a specific song to multiple playlists at the same time.
Insights
Generally speaking, the insights I gathered validated my assumption that the proposed new feature would be relevant and worthwhile. They also proved that it would be important to explore designs for this feature on both mobile and desktop.
The majority of users (4 of 6 interviewed) create and edit playlists based on genre or mood, so that they have the perfect playlist for a specific day-to-day activity. They also make playlists for special events. (So, they may add a song to both their genre playlist AND an event playlist, for instance.)
Nearly all users add the same song to multiple playlists at least occasionally (some more frequently than others). These users would find it helpful to be able to add the same song to multiple playlists simultaneously, rather than having to go through the same task flow for each playlist.
Nearly all users delete songs from their playlists at some point (if they tire of the song, or they find it's not actually a good fit for the mood). 3 of 4 users would find it useful to be able to delete the same song from multiple playlists at once.
Although users frequently choose mobile over desktop for general listening, they typically use desktop for purposeful creation and management of playlists. They will often use mobile to add a song to an existing playlist.
STEP 2: DEFINE
Pinpointed specific screens needed for the new feature’s task flow, and determined which existing Spotify design patterns could work for this flow.
DELIVERABLES
Research findings report
User persona
Task flow
Spotify design pattern research
A research findings report might typically be considered part of the “Research” step of the UX process. However, for this project it acted to help me define the project, in that I was able to conclude that the proposed feature was worth designing and that it was important to design both mobile and desktop screens.
In order to create concrete documentation that would remind me what and for whom I was designing, I developed a task flow and user persona. The task flow was so simple that I hesitated to even bother creating it, but I discovered that even in this case it helped me organize my thoughts about precisely what screens were needed. This helped me focus on one thing at a time, in a moment when I was feeling overwhelmed by the larger picture.
I then circled back to another research-related task: defining what Spotify’s current design patterns are. By studying and documenting the patterns they use for various tasks on both devices, I generated ideas about what could work for the new feature, while also staying consistent with the current Spotify app.
STEP 3: DESIGN
Used time-saving techniques to quickly design a solution that fit within Spotify brand guidelines.
DELIVERABLES
Interactive prototypes
When I first began this project, I had intended to completely recreate the Spotify desktop and mobile apps in Figma, as a way to continue improving my skills with the software. However, when I reached the design phase, I reevaluated that decision. I looked at the amount of time I had for the remainder of the project, and I asked myself if it was actually necessary to go that route in order to achieve a successful end result—and ultimately, I decided screenshots of the app would work just as well. Knowing that I would have time to hone my Figma skills in the coming months, I decided to prioritize expediting the project over sticking to the original plan.
Therefore, I started the design phase by going through the existing selected task flows step by step, on both mobile and desktop, and taking screenshots along the way. I overlayed icons and components on the existing “Add to playlist” menu, exploring various options that would allow the user to add a song to multiple playlists at the same time.
After discussing these options with my mentor, I moved forward with the design pattern I believed to be most effective for this new feature: checkboxes with a primary confirmation button. Although this pattern doesn’t currently appear in the Spotify app, it is used on their website. After reading several articles on best practices, I deduced that it was an appropriate usage and the most intuitive option for users based on their experiences with other digital products.
Using this design pattern and components consistent with the Spotify brand, I created four sets of screens: a task flow for adding a song to multiple playlists on mobile and desktop, and another for removing a song from multiple playlists on mobile and desktop. I then linked the screens together to create a clickable prototype that I would be able to use for testing.
STEP 4: ITERATE
Based on usability testing, combined the add-a-song and delete-a-song task flows; users can manage song occurrences in all of their playlists simultaneously.
DELIVERABLES
Usability testing
Iteration on wireframes and prototypes
Using the online tool Maze, I set up unmoderated usability tests for two of my prototypes; I chose the desktop prototype for adding a song to multiple playlists and the mobile prototype for removing a song from multiple playlists. These choices allowed me to test both task flows and both devices in a short span of time. Because the two task flows are very similar on mobile as well as on desktop, I had high confidence that feedback for one task flow could be applied to the other task flow on the same device. The purpose of testing was to validate the assumptions I made while designing, ensuring that users found the design to be intuitive and in line with current Spotify design patterns.
By recruiting through my professional network, I found ten users to participate in this unmoderated test; according to Maze, this number allows you to “uncover the most common issues and learn how your designs perform with sufficient participants for accurate results.” (Given more time, more than 100 testers would have led to the most accurate results.) The Maze software allowed me to quickly analyze the results, and to ascertain that my designs were 80-100% successful, based on my predetermined success metrics.
I compiled the test results in an analysis report, and included recommendations for next steps. Although overall, usability testing validated that my designs were intuitive for the majority of users, there were a few minor changes that I wanted to implement based on mentor feedback and my own thought process.
Desktop “Add song” menu
Centered primary button for more visually pleasing UI.
Mobile “Remove song” menu
Added the option to delete a song from all playlists. This cuts down on the number of taps a user must make if they have the song on numerous playlists and want to delete it from all of them.
Mobile “Add song” menu
Converted “New playlist” button to an item in the checkbox list. This gives users the ability to create a new playlist with the song while simultaneously adding it to existing playlists.
Additionally, during usability testing I had gained feedback from testers that made me believe it was worth trying to combine the add and remove features into one single menu where the user could manage the song in their playlists. This would allow the user to both add a song to and remove a song from multiple playlists simultaneously, as well as simply see which playlists it was already in. I iterated on my wireframes yet again to design a solution for this new concept.
Usability Testers:
“I would keep the boxes checked for the playlists that it is currently in, and then request them to uncheck the playlists you want them to remove the song from.”
“I also like the feature of just being able to check which playlists a song is in.”
Next Steps
Perform another round of usability testing on the original concept, to ensure that the last round of iterations improved the design.
Conduct A/B testing with the original concept and the new concept, to determine which one works best for the users.
Conduct research to determine if users need to be able to add the same song to the same playlists multiple times (which Spotify does currently allow).
If it’s determined that this is a valuable feature, explore ways to integrate that possibility with whichever concept was deemed more successful during A/B testing.
Conclusion
This project was quite a bit different than the previous two projects I had completed for Designlab’s UX Academy. Being constrained by existing branding and design patterns was a great learning experience, requiring me to brainstorm and make decisions in different ways than I would have if given complete freedom. (For instance, diving more deeply into Spotify design patterns and choosing from limited options, rather than doing broad and shallow secondary research of design patterns and choosing from a wide variety of options.) I also found myself rethinking the entire UX process, as the individual steps differed from those I had taken during end-to-end projects. The project timeline I created at the very beginning of the project, which listed each deliverable and the order in which I would complete them, looked very different by the end of the project! Compared to previous projects, I also had more extreme time constraints for this project, due to obligations in my personal and professional life; this forced me to continually reevaluate my approach to the process in order to be as efficient as possible.