I spent three months working on a personal project: a mobile app redesign for ♫ Spotify
Below you’ll find a case study offering potential solutions for how Spotify could reorganize misplaced elements, retune half-baked features, and improve their visual consistency. I based my work off of qualitative data, user interviews, and Spotify’s public design research articles.
Disciplines
Team
Timeline
Tools
Adobe Creative Suite
Note: all images with a green gradient are prototypes that I designed for this case study. If a screenshot is on a pure grey background, then it's a from the current Spotify app.
Don't want to read? Skip to the end ↓
Silicon Valley's "Cinderella story."
Spotify is a Silicon Valley “Cinderella story.” A startup that managed to grow into a massive corporation, despite competition from trillion-dollar companies.
In many ways, Spotify owed its unique success to its fantastic product design. To an interface that was sleek, focused, innovative, elegant. One that deeply understood its users.
Spotify's mobile interface in 2018: clean and streamlined!
However...
With dozens of new features being added every year, Spotify’s interface has slowly become increasingly confusing, frustrating, and inefficient.
Spotify's mobile interface in 2024.
Before we narrow down into specifics, let’s acknowledge the big picture problems.
Some of Spotify's recently added interactions are relatively half-baked. No matter how useful or interesting these features could be, the design is holding it back. A few small improvements to these would go a long way.
Spotify’s system of Home, Search, and Your Library worked extremely well five years ago, when Spotify was a much simpler app. However, Spotify has added a lot of content since: podcasts, audiobooks, Blend/music sharing options, TikTok-style autoplaying preview channels, merchandise, events, etc. With all of these new changes, the old architecture has become obsolete.
For one, there’s a lack of parity between the features that the desktop version of Spotify offers and the mobile app version. And beyond that, there’s a general lack of visual consistency within the mobile app that seems careless and unnecessary and could be easily smoothed out.
Obviously, lots of people. It would be remiss to generalize Spotify’s 636 million active users into a singular user persona. Instead, it’s easier to imagine all listeners being placed on the following graph:
Adapted from Jason Yuan’s case study: “I Got Rejected By Apple Music... So I Redesigned It”
"I like their playlists a lot. And it's free."
"Their Daily Mix algorithm is so good!"
“Why do I use Spotify? To listen to music!”
Considering Spotify’s goals, and young user base (50% are millennials or younger), it’s safe to say that Spotify appeals the most to nomads: people who care about audio discovery and personalized content. And while Spotify has been trying for a while to get users into its podcast and audiobook selection, the app remains primarily a place for music listeners. In other words, Spotify most appeals most to the top right quadrant. For Spotify to expand it's listener base, they need to continue to try to appeal to users in other quadrants of the graph.
We're going to analyze Spotify piece by piece, fixing organization and improving intuitiveness. But here are our big picture goals that will dictate how we try to make those positive changes.
- Design new ways to stream/discover audio to entice hoarders to use Spotify.
- Find subtle ways to emphasize Spotify's new podcast and audiobook content.
- Rearrange/retool features from Spotify's current app instead of adding features that may not be easy to develop.
Like every tech company in the world, Spotify has been trying to capitalize on AI with a new feature: the DJ. However, a major complaint is that the DJ doesn’t allow users to pick the vibe.
“One second, I’m listening to Clairo. And then suddenly the DJ plays, like, 2015-era Travis Scott... and I’m just like, ‘How are these two related in any way?’”
A quick skip-through of the DJ confirms this problem...
Sultry Amy Winehouse followed by a hyperpop anthem followed by a spacey trip-hop track followed by a trap banger? Pick a lane...
Can we solve this issue with... more AI?
Spotify already has been recently beta-testing AI-generated playlists, meaning they already have an algorithm in place for customizing a user’s mix. Let’s bring this existing algorithm to the DJ.
Picture this:
You’re driving late at night, listening to the default DJ playlist, and you suddenly feel in the mood for smooth R&B. What do you do? Simple! Set the mood on your own. Ask the DJ.
Easy accessibility.
Users can easily access this feature by scrolling down underneath the song.
Still not satisfied?
Don't sweat it! Just go back to "Ask the DJ" and refine your message to fit your needs.
A low-stakes version of AI-generated playlists.
This is a perfect outlet for Spotify’s AI algorithms. After all, playlists are often very personal and hyper-specific, and many users mentioned that they were skeptical of having an AI create a playlist that would clutter their library.
However, when listening to the DJ, users are simply
trying to listen to turn their mind off and jam out to some music that's just good enough to fit the vibe. It’s a stress-free way to listen to a mix of curated songs without spending time on the curation yourself.
If it ain't broke...
Over a year ago, Spotify made some changes to one of its most integral features: adding a song to your Liked Songs by tapping a ♡ button. Instead, they folded the ability to like songs and add them to playlists into one button:
On paper, this seems to work. But in practice...
Users across the board had complaints about this issue, even those who had never used Spotify before the update. Why?
No button should do two things at once.
This button too much heavy lifting. It does two different actions, and the iconography of a completed checkbox to add audio to the user library is very confusing. It also doubles the number taps users need to use to add songs to playlists.
If it's doing two things, why not split it into two buttons?
With both a ♡ and ⊕ button side-by-side, users can continue to easily add songs to their Liked Songs and to their playlists, without any sort of confusion.
This update also reduces friction and smooths out the confusing iconography.
Preview boxes were introduced two years ago, in an update that replaced the homepage with a TikTok-style doomscroll. It was so controversial that it got repealed within days. Later, Spotify redesigned these boxes into the following:
They’re not only disorganized, but also unengaging.
There's a lot of issues here. It's organizationally confusing, lacks clear visual communication, and uses uncommon interaction patterns. There's no delightful visual interaction here for when users preview audio, which is often a big appeal of these types of elements.
How can we improve this?
For one, the “preview” aspect of these boxes need to be drastically amplified. So let’s rearrange it, make it more engaging, and tighten up the visual awkwardness:
See! More organized, more communicative, and more exciting!
Below is a semi-holistic view of the Spotify architecture. I marked awkwardly located elements with red dots, and hidden/hard-to-access elements with blue dots.
Not included: podcast and audiobook pages. Spotify pretty much nailed it with those, so there’s not much worth in discussing them.
It may be difficult to process the issues when just listed out, so let’s take a closer look at some examples:
Explore clips in the Search page.
Currently, Spotify offers three seemingly randomized TikTok-style music clips for users to discover music in genres of music. However, why are there only three accessible? And why are they on a “Search” page in the first place?
Where are the live events?
Spotify has a very interesting page for users to see all live events, but it’s tucked into a corner of the Your Library page. Almost no user knew how to access this page during interviews.
An unhelpful sidebar menu.
It doesn’t make sense why a general sidebar menu has very specific options like “What’s New” and “Listening History.” It's a missed opportunity for the app to capitalize on some valuable real estate.
Spotify has always organized its content into three main pages, accessible from the footer menu: Home, Search, and Your Library. But as we’ve established above, many of these features don’t synergize well with the rest of the page (i.e. the explore clips in the search page).
I know that it’s very stereotypical for unsolicited designs to attempt to “fix” a problem by simply adding another page to an app, but I would argue that Spotify is bursting at the seams, and needs more pages to organize its content. Inspired in part by @Juxtopposed, let’s add two pages to the footer menu: Discover and Following.
The power of peer pressure.
Spotify continues to underestimate the importance of music sharing for younger users. People love to share their music taste with friends, and we can see this from the massive success of easily accessible social features such as Spotify Wrapped, Blend, daylists, etc. However, many of Spotify’s other social features are difficult to access on the mobile app.
Let's give these features a proper home:
“It sucks that I can’t make playlists with my friends on Apple Music. Every single time I send them a song, I always think about switching to Spotify... so we're all on the same platform. To be together.”
Branching out to Hoarders and podcast/audiobook listeners.
Users across the board loved to listen to recommendations from their friends. Giving Spotify a social edge over its competitors and would entice many users to switch to Spotify. This is especially important for appealing to users that don't fit Spotify's core group. Remember our graph?
Fostering artist-fan connection.
Spotify has really been trying to build connections between artists and fan through the introduction of merch, clips, and other content. This is the perfect place to centralize that goal.
What’s hot with your friends?
Check out some of the podcasts, songs, and audiobooks that are popular amongst your following.
See when your favorite artists are performing.
Before, live events were hidden in the back corner of the “Your Library” page. Now, they’re in a more public place: a win for both users and artists alike.
While you’re at it, buy some merch!
Spotify has merch options for artists currently hidden in a side menu; why not promote this option to support the artists on their platform?
Check out some of your friends’ public playlists.
No more wasting time stalking profiles for the perfect playlist. Now, you can an assortment of your friends’ public playlists, giving people more opportunity to connect over the app.
Artist-made content, for you.
Let’s promote Artist picks and Artist clips in one single place to promote connection between artists and their fans.
Follow your friends’ friends.
Considering it’s already possible (and relatively common) to follow people on Spotify, why not just make that more accessible for friends to find each other through mutual followers?
Self-conscious? Opt out!
A controls button at the top of the page will allow users to opt out of sharing anything they feel uncomfortable about making public.
Everything is passively shared.
The beauty of this page is that no user is going out of their way to share their taste with others. There are no posts, no likes, no comments, no nothing.
Redefining Spotify’s linear discovery feature.
Spotify has been experimenting with TikTok-style explore clips for a while, both in the form of explore clips and the aforementioned preview boxes. However, as interesting as they are in concept, these elements have been awkwardly tacked onto the app, setting them up for failure.
The Discover page will be a dedicated place for exploring music through previews:
While I was at it, I tweaked the anatomy of the explore clips to be more engaging from a user standpoint.
Filter to explore your favorite genre.
Want to discover trip hop music? Maybe you’re really into true crime novels? Filter to your heart’s desire with the menu header at the top.
Remember our north star?
This offers a different avenue of audio exploration to Spotify’s users: low-commitment previews that may appeal to hoarders and entice users to explore Spotify's podcast/audiobook selection.
Considering that this menu is available everywhere on the app, I reconfigured it to contain some elements that would be useful to access anywhere: Liked Songs and Your Episodes, pinned content in a user’s library, and in-progress episodes and audiobooks.
Subtly boosting podcast and audiobook content on Spotify.
Surprisingly, Spotify currently doesn’t have an extremely accessible way for users to resume an in-progress podcast episode or audiobook (they have it in the homepage, but it's not always there and you have to scroll down a lot). With proposed design, users can quickly jump back into paused content just by using the sidebar.
Below is the new architecture. Notice how much more streamlined it is?
Artist pages and the profile page don’t change, they simply have elements become more accessible on the Following page; thus, I decided to not include them.
Spotify has allowed users to see friend activity on the desktop version of the app for a long time. But strangely, this feature was never a feature on the mobile app. It’s important for there to be parity concerning features like these, especially considering that many third-party apps have been built just to allow friends to see each other’s listening activity.
Airbuds, an app that allows users to track their friends’ listening activity, has grown to be the #8 Music app on the App Store.
Friend activity menu on the Spotify desktop app.
It’s clear that users love this feature. But it’s likely that this never was added to mobile because there never used to be a proper home for it, or a simple way to display the information.
However, thanks to our redesign of the Spotify preview boxes and our restructuring of the Spotify architecture, we now have room for it in the Following page:
The friend activity menu, finally on mobile. Preview boxes are great for this, since they users to quickly get a taste of what their friends are listening to!
The scroll locks when you start previewing audio, which allows for a more seamless previewing experience if you want a taste of what your friends are listening!
Right now, the homepage appears cluttered due to a lack of consistency.
To be honest, it doesn’t need a lot to make it work. But there are some small tweaks that we can make to improve the visual hierarchy.
Add a mini welcome message to the header.
Remember how we removed “What’s New” and “Listening History” from the sidebar? Let’s bring them back to the homepage (where they used to be two years ago), and add a small message, so it matches the layout of the other two pages. Again, it’s all about consistency here.
Set preview boxes to be after every 3-4 elements, instead of peppered across the homescreen.
Right now, these preview boxes are placed seemingly placed at random, which disrupts the visual hierarchy of the homepage. Instead, let’s place them more strategically, so they serve as a visual break from the other elements on the screen.
Add a second row to recent listening.
Many users (and especially hoarders) sometimes just want to play their recent history. Right now, it’s hard for users to scroll through a thin horizontal scroll of 32 mini thumbnails. Why not add a second row, so that users can see more of their history at once?
Again, these are very subtle. And they should be, for something as commonly used as the Spotify home screen. Here's what it looks like with the changes:
Let’s just quickly recap some of the big-picture changes we made to the interface.
Spotify has always had success when promoting its social features. Why not we take some of the more “hidden” social features and make them more accessible? This way, users can easily keep up with their top artists and their favorite friends!
Spotify has been experimenting with TikTok-style linear scrolls for a while, but they used to feel out-of-place on the old interface. Now these features have a proper and deserving home.
Spotify’s AI DJ has been an exciting new feature, but many users are frustrated by the lack of choice they have in picking the vibe. Why not allow them to choose the vibe?
Spotify’s sidebar used to contain options that seemed very niche and unhelpful for such an accessible menu. Let’s add some features that would be much more useful to have easily accessible.
Spotify's preview boxes and Add to Library button are unintuitive and highly controversial amongst users. Let's just make a couple of changes to improve the user experience and dissipate the confusion.
Spotify’s homepage needed a couple of tweaks just to fix the visual hierarchy of its elements. It’s not anything drastic, but it’s a noticeable improvement.
I’ve always admired Spotify’s design, and I learned a lot diving deep into their app design and trying to improve it on my own. I hope that you gained something useful from reading this, and that you came up with some ideas of your own!
Next steps:
- Explore alternate solutions to Spotify’s problems could help create an even more efficient interface.
- Conducting additional user interviews and testing to identify additional pain points in the interface.
I always try to find personal elements in all of the projects I work on, but as a music-lover myself, this project was something that mattered very deeply to me. I always strive to design things that center themselves around humanity: to make things with empathy, personality, and love.