Spotify
Spotify
overview
project details
Duration | 4 weeks
Role | UX/UI Designer
Tools | Figma, FigJam
about the project
For this Spotify project, I decided to add a customization feature for the app that allows users to organize and categorize - with no hassle. As a Spotify user myself (who loves to organize), I always struggle with the Library section, as it can get quite messy. With this new feature, users can edit their library and separate their playlists from their artists, creating a well-balanced collection to fit their tastes.
The main goal of adding this feature was to make the users’ lives easier, without hindering the existing UI of the Spotify app.
research
goals
For this project, the research was going to be crucial in order to determine whether this feature would be useful or not. My main objective was to observe Spotify users’ pain points when it comes to organizing their library in order to envision the best user experience with this feature.
competitive analysis
While conducting my competitive analyses for this project, I made sure to look at the other successful music streaming apps out there. Since Spotify is already a well-established and well-loved app, my main goal was to see what works and what doesn’t. I was able to gather that many music platforms prioritize music recommendations rather than the music library itself.
user interviews
I conducted user interviews with 7 participants; 5 of them were Spotify users, while the other 2 used different platforms. My goal with these interviews was to empathize with the user, while also thinking about how I can improve their user experience. The main pain points I noticed were that users had a hard time customizing their music library, and wanted more freedom with it. Most participants seemed to be interested in a feature that allowed them to make folders and rearrange their libraries.
“I wish there was a separate place for my followed artists. I follow a lot, so it gets a bit crazy.”
“Personally, I would enjoy a button or something that could help me when the library gets messy.”
“I like that there’s categories for everything but I do wish it was a bit more organized. It feels like everything is jumbled.”
synthesis
affinity mapping
By creating an affinity map, I was able to gather what patterns I noticed with the users. This was especially helpful, allowing me to see what the most common struggles were.
Most users feel discouraged with their library because it can get too jumbled, too fast.
Users like to have the option to organize/personalize their music library.
user personas
I created one persona for this project, Lyla. She encapsulates all the participants I interviewed prior to this, as well as the average Spotify user. Lyla was a very insightful way for me to wrap up all the research I had done, allowing me to summarize what the most common pain points were for users. Creating this user persona was crucial for me in empathizing with the user and understanding their struggles.
problem statements
Problem
Users have a difficult time organizing their Spotify libraries because their customizing options are limited.
POVs
I’d like to explore ways for Spotify users to feel more comfortable using their music libraries.
I’d like to explore more options to offer to users when it comes to organizing their music.
HMWs
How might we help users feel more confident when it comes to organizing their libraries?
How might we personalize the user’s experience and provide sufficient tools to help them?
ideation
user flows
After gathering all the research needed for this project, I was able to start thinking about what design choices I would be making for this. I created a user flow for editing the music library, as that would be the most important flow for this project. As Spotify is already an existing application, I felt it would be important to synthesize and map out how everything was going to look.
testing & iterations
low-fidelity wireframes
While I was sketching out my wireframes, I mainly just wanted to get a rough idea of how things were going to look. This step would be laying the foundation of the design itself, which determines how the final product will look.
MID-fidelity wireframes
After creating the sketches, I took the wireframes to a higher level that would allow me to truly visualize my designs. I was able to make decisions on my design choices and how I would want the final wireframes to come out. I then tested the wireframes with a few participants in order to gather insights on the progress made so far.
All users were able to understand what each screen was for
Users were curious to see what the rest of the screens would look like
high-fidelity prototype
For this prototype, I wanted to prioritize the user’s needs in order to curate the best user experience. I made sure to reference the previous research as well as my user persona in order to keep thinking about the user and how I can resolve the pain points at hand. As for the visual design itself, I wanted to maintain Spotify’s UI while enhancing the new feature I added.
playlists
For the “Playlists” flow, I wanted the user to have options when organizing their library. Since the main issue while researching happened to be the lack of customization, I prioritized the editing feature.
Artists
For this flow, I wanted to keep it consistent with the playlist flow in order for the best user experience. Keeping things straightforward allows the user to be able to customize their library and make it as simple or complex as they would like.
test
After finishing my first round of mockups, I was able to test them with 6 users. I chose 4 Spotify users and 2 users who were not. This allowed me to gain perspective on whether new users who weren’t familiar with the app would be able to navigate it. They were given 2 tasks to complete: Reorder/Pin Playlists and Reorder/Pin Artists.
results
Both tasks had a 100% completion rate
Most users completed the tasks at a reasonable speed with little to no mistakes
Spotify users mentioned they would appreciate if the app had this feature
One user said they wished they could see what the downloads section had
“I like how easy it was to navigate the screens, everything was very straightforward.”
“I enjoyed the whole personalized aspect of this feature, i would use this everyday.”
“I liked the idea of making folders for artists and playlists, it felt more organized.”
next steps
With this project, I hope to keep iterating on it and improving the application, as well as my skills as a designer. I will continue to work on this and test the screens to make sure I still remember my main goal: keep the user happy. I plan on conducting more user tests and receiving feedback while iterating.
reflection
This design project was a huge learning curve for me as a designer. I learned that maintaining UI that already exists could be tricky, but not impossible. I believe this pushed me further as a designer, because I was taught how to manage my time and keep myself accountable. I was also able to learn the importance of the user and their feedback.
Overall, I am very thankful I was able to work on a project such as this one, and I believe it deepened my passion for UX/UI design and taught me many new things.