Remove downloads and select multiple songs on Spotify

Adding a feature for the most famous music streaming service

Week 4 has arrived at the Ironhack Bootcamp and now we had to add a feature for an already existing service.

During this project, you are going to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. The feature you develop will be based on an area of functionality to be explored and compared to user input.

And to make this project even more challenging, it was also the first time that I’ve worked alone in the bootcamp.

My client, Laissa Moura Ferreira, presented me a problem: It’s not possible to remove downloads on Spotify and it’s also not possible to select multiple songs on the mobile version.

My final goal was to present a high-fidelity prototype showing my solutions to those problems.

Understanding the problem

I’ve started my research phase interviewing my client. Laissa told me about her pain points with Spotify:

• She would like to remove songs just from the offline list
• She would like to do that in order to clear some room in her smartphone storage
• She would like to select several music at once

After a fast round of Lean UX Canvas, to find out more about what I was looking for, I moved to some personal interviews. At first, people were not understanding why you would remove some downloaded songs. So I changed the question. Instead of asking “would you like to have a feature that would help you manage your downloaded songs?”, I simply asked “Would you like a feature in Spotify that would save you storage?”, and everybody was like: YES!

With a fast desk research, I’ve found out that many people wonder in the internet why Spotify demand so much storage. Part of this storage happens because of the cache, but mainly because people have thousands songs. Also, it was possible to find out that users want to select multiple songs on the mobile version.

These are some of the pains points of Spotify users:

With that in mind, I’ve tried to synthesize the Spotify user behavior:

Searching for inspiration to solve those problems, I’ve established a Job-To-Be-Done:

When users want to save a new offline song but they have no more storage, they want to be able to eliminate a song just from the offline list, so they can still have this song on the online list.

How Might We

It’s time to visualize our problem statement and come up with solutions.

For the first problem — faster way to clear storage — I had an intuition that the answer was in this green button:

In the past it was possible to click on this button to remove just the download. I thought that if I could made this button clickable again, I would solve this problem. In the testing phase, users had no problems to understand that.

The real challenge was to create a easy and intuitive way for the users to select multiple songs on the mobile version.

Testing

To accomplish this, I’ve asked my flatmates to open the Spotify Mobile and try to select multiple songs, which is not possible to do.

But I’ve had an awesome insight with this test: all of them tried to click and hold on the song. I’ve asked why and the answer was: “because on WhatsApp, or Gmail, or even in the photo gallery, you can click and hold to select multiple things.”

With these results, I truly believe that clicking and holding is already a solid behavior for users to select multiple things on the mobile world.

Low and Mid-Fi

In the test phase of the prototype, I’ve realized that the users were trying to click and hold to select multiple songs, but also that they were expecting to find the “Remove Download Button” on different places. That was essential to move to the High-Fi, were I added this button in more than one place, so the user can remove the download in different ways.

High-Fi

Moving to the High-Fi, I’ve had some strong learnings: design system, components, and different states for the component. This was more than essential to design my prototype.

I’ve tried really hard to follow the Spotify Guideline and to make my features blend into the app. I didn’t want to draw attention to my feature. I just wanted to make it easier for the user to find it whenever in need.

What you will be watching below, is an user trying to remove the download in different ways and, at the end, selecting multiple songs to offload.

Takeaways and Next Steps

• Working by myself was really hard. When your are working in groups you have instant feedback. But doing the project solo was really good to gain confidence in my work.
• Once again: design system, components and states are freaking awesome!!!
• Auto-Animate on Adobe XD is amazing, but I have a lot to learn about animations.
• If I had more time, I would like to refine my icons, so they could have a better match in terms of style and proportions with the real Spotify icons.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

It was hard, but this week project was really fun and rewarding!

Thanks for reading :)