Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Learn to simplify things from Spotify Library Sidebar

We need to know which ones need to be prioritized.

Idham
Bootcamp
Published in
3 min readMay 29, 2023

--

April 2023. Spotify, one of the biggest music streaming platforms, published a new update with the brand new Your Library section, which is now grouped together with the sidebar.

Spotify Desktop Sidebar Prototype — I recreate it with the help of a Chrome Inspect Elements feature.

Let’s breakdown on:

  • What is the focus scope?
  • What issues are being solved?
  • What are the principles of the solution?

DISCLAIMER: This is full of my point of view, I’m not a designer of Spotify, I’m here to break down and analyze their design update. Hopefully, we can learn something.

It needs to stay accessible

What are the things Spotify was focusing on?

Your library is essential because it’s a like a home for our songs collection, it needs to stay accessible, and the best place for it is the Sidebar.

Sidebar was useless

What might be the problems?

  • People don’t aim for creating a new playlist, they aim to listen to songs.
  • Liked Songs is not the main thing we look for, we often have a specific playlist for a specific moment.
  • The list is not very recognizable and attractive to be noticed and clicked on.

So, we are ready to make the most out of the Sidebar, but…

How might we simplify a big page into just a size of a sidebar?

Prioritize the right things

It all comes down to one principle:

To simplify things we need to know which ones need to be prioritized.

Some of the decisions are…

Know which one is secondary.

Deprioritizing the Create Playlist action considering it’s not the primary action that users always want to click on.

Create New Playlist action became just a plus icon. The small trick is if they don’t group the add and expand buttons altogether, hiding the add button would make the expand button icon feel like a link to an individual page of the library.

Grouping similar actions.

If you can recognize that this group is all about filtering the content. Making them closer to each other makes it easier for users to focus and navigate.

Categories, Search, and Filter became 1 group of the layout.

Focus on what people look for.

Users are coming to play certain songs, one of the moments is when the songs are already in their playlist before. This is where we need to make sure it’s discoverable for them.

Incorporating the cover of the artists/playlist now makes them easier to scan.

But, people need to adapt

From my observation on Twitter, I noticed some of the problems of this new design update

  • The expanded version of the Sidebar seems too much of an oversimplification. They put lots of content into a small space.
  • Few people say that they started to unfollow certain podcasts/artists because the sidebar looks cluttered if it’s don’t.
  • The expanded cover from the currently playing bottom bar mess up the sidebar layout as it got covered.

Help me build this type of design breakdown by giving me feedback! To help you, I made a couple of questions:

  • Beyond just context, problem, and solution, what are the things that you expect me to break down?
  • Do you find the presentation is easy to understand?
  • What might be the things that could help me better next time?

Thanks!

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Idham
Idham

Written by Idham

Write about craft, collaboration, strategy, and impact as a designer.

No responses yet