Critique Spotify

Prompt

Interviewer:

"I'd like for us to walk through Spotify and to get your thoughts on the visual design, interaction design, what could be improved, etc. Let's reverse-engineer the app and try to figure out why they made the decisions they made."

Step 1: Set Context

The interviewer might ask

"Before we open up Spotify, let's think about what the world was like before this app or company existed. What was the human problem, and how did this app solve it?"

How you might respond

Thinking back to before music went digital, if your favorite artist came out with a new song you loved you either had to buy the entire CD or wait for that song to come on the radio. Apple saw an opportunity after it came out with the iPod to sell albums, and even individual songs digitally so they could be easily listened to on your computer or iPod. And then for a long time there was no innovation in the digital music industry. Spotify saw an opportunity to rent, not own the music. For a small monthly fee you could have access to all of the albums and songs. It created a whole new way of listening to music. Since you didn't have to pay to listen to an individual song, it allowed for browsing and learning about new songs and genres. It also learns what you like over time and plays new songs you might also enjoy. Finally, curation is a major part of what sets Spotify apart. They curate songs not just by genre but by mood. If you're feeling happy and upbeat, or chill and mellow, there's a playlist or your mood.

To summarize, the core problems that Spotify solved were:

1. As a music-lover I don't want to have to buy a song in order to listen to it. I want access to all music.
2. As a music-lover I want to learn about new songs and artists based on what I already like.
3. As a music-lover I want to listen to music that matches my mood.

The interviewer might ask

"What are some use cases for using Spotify?"

How you might respond

For most, Spotify is probably a daily-use application, either at a coffee shop, at the gym, or while working. A few ways that I use it include:

1. When I want to listen top something specific. If I'm in the mood for a certain genre, artist, podcast or I just want to listen to my favorite songs, I'll open Spotify and go directly to that thing.
2. When I want to browse and listen to new music. If I'm feeling in an adventurous mood, I'll open Spotify to hear something new or find a new favorite artist.

And of course Spotify is a platform and a two-sided network. The other side of the network being the artists. The use case for artists is much more commercial. They further their business by putting their music on the platform and taking a cut of the monthly fees. But they can also promote themselves, their merchandise and their concerts to their fans on the platform as well.

Because it's core strength is curation and recommendation, we should walk through the use case of browsing to find new music.

Step 2: Walk Through a Flow

First of all, here are some immediate impressions of the home page.

It has a permanent "dark mode" meaning the background of the app is dark with the foreground (text, etc.) being lighter. This is fairly common for media consumption apps like Netflix and Prime Video. It makes the content the focal point while the rest of the app fades away. Music has always been very visual with album covers being part of art and pop culture. Spotify has leaned into that by focusing on the album artwork with a dark background.

The navigation is minimal and straight forward. It seems clear that I can go to "Search" for find a song or artist, and "Your Library" for favorites or recently listened song.

Spotify is using subtle visual cues to distinguish between different "objects". For example, artists are represented as a circle, albums and playlists are represented as squares and podcasts are represented as rounded squares. This seems too subtle for most users to understand, but maybe they do on a subconscious level. I'd be interested in knowing why Spotify does this. Perhaps there was confusion from usability testing about where you would land by tapping each of these (an artist page vs. an album vs. a podcast). I'd guess that through usability testing or data they have shown that these subtle shape differences make the experience more understandable.

If I were the designer I'd consider adding a line of metadata below the album or artist to make it more clear.

Since I'm here to browse and find new music, I scroll down the home screen. Doing a quick audit of the sections it's clear that the focus is on the first use case of listening to music you already know and love.

The section titles in order are:

• Good afternoon (Use Case 1)
• Recently played (Use Case 1)
• Your top podcasts (Use Case 1)
• Jump back In (Use Case 1)
• Feel good music! (Use Case 2)
• Top of the Charts (Use Case 2)
• Made for Garron (Use Case 1)
• etc.

What’s interesting is that seven of the twenty sections support the first use case and 13, nearly double, support the second. If all you look at is the count you might think the second use case is dominant. However, the first 4 sections support the use case of continuing to listen to your favorite music of what you listened to recently.

A hypothesis is that Spotify has identified that when most people open the app they want to continue listening to something. So they designed the home screen to primarily support that use case.

The interviewer might ask:

“I’m noticing that other than the very top section, the entire home screen is a list of horizontal scrolling units. Why do you think they designed it this way? How might you design this differently?”

How you might respond:

Firstly let’s talk about the benefits of this design pattern. It used to be the case that people were weary of vertical scrolling. There were always heated debates about what should go “above the fold” for fear that anything below wouldn’t be seen. It’s still true that the further down something is the less impressions it will receive, but I think social media apps and other feed-based products have dispelled the fear over vertical scrolling.

The same debate could be had for horizontal scrolling sections. The further right something is in that section the less likely it is to be seen. But this interaction pattern is quite common these days and the last card overflowing off the screen creates the affordance that you can scroll right to see more. The last thing I’ll say about horizontal scrolling sections is that you can show two and a fraction items using relatively little vertical space.

I'm sure they have run experiments to trying different layouts and have shown that consistent horizontal scroll sections perform best.

With that said, some alternative section layouts to test might include:

1. A vertical list section, but this would increase the height of the screen significantly
2. A vertical list section of three with a "See All" button
3. A single-card section putting emphasis on a single album, playlist, etc.
4. A two-column grid layout, similar to the section at the top

Perhaps a combination of these section layouts would create visual variety and more ways to interact with the home screen.

Back to the use case of discovering new music, let's say the "Indie" section piques my interest and I want to listen to "Feel Good Indie Rock".

A main critique I have for the application, which is evident on this screen, is that there isn't a clear mental model of the "entities" or organizing structure. For example, on this screen am I looking at a "playlist" or a "radio station" or an "album"? Perhaps the Spotify branding on the artwork and below the description is enough to indicate that this is a playlist curated by Spotify. To create more clarity they could add the title above the description and append the entity type. For example this title could be "Feel Good Indie Rock Playlist".

From a visual standpoint, they maintain the dark mode but add a gradient by color-sampling the artwork. It makes each playlist feel branded and individualized.

As for the actions on the screen, the main call-to-action is reminiscent of a Floating Action Button (FAB) from Material Design, although the rest of the app doesn't have many characteristics of the Material style. The problem is it's not clear what tapping it will do. The immediate impression is that it plays the playlist from beginning to end. On second glance, the icon in the smaller circle looks like it might randomize the playlist. But is that a separate button? Regardless of what it actually does, it's unclear which causes confusion and possibly inaction.

The secondary actions use a consistent icon style and are straightforward in their meaning. The favorite icon even has a nice micro-interaction when tapped.

As you scroll down the page there are some nice animations. The hero image scales and fades, a persistent header appears and the play button attaches to the header. It allows you to focus on the list of songs while maintaining access the main call-to-action. A potential improvement might be to treat it more like a standard Material Design FAB and fix it to the bottom right. From a usability standpoint the bottom right portion of the screen is easier to access with your thumb than the top right.

One last element to point out is the panel at the bottom of the screen which shows what song is currently playing. It is persistent, meaning whatever screen you’re on, you can always play and pause the music. It also has a collapsed and expanded state. By default it stay collapsed, even when playing new songs from the playlist screen. This implies that Spotify want to keep focus on the playlist screen in order to discover new music rather than to focus on the current song that’s playing. It also includes a swiping interaction for power users to quickly move to the next song. It’s a power user function because it allows quick access for those who know about it, but doesn’t create a broken experience for those who don’t.

Tapping on this bottom panel opens the audio player to the song currently playing.

The interviewer might ask

“This screen is visually quite different than the rest of the app. Why might that be?

How you might respond

You’re right, it’s like you’ve entered a new mode just for listening. One hypothesis is that this view is helpful in different contexts, like while driving or while on a run. In those situations you need to digest content and take actions with just a glance. Therefore the music artwork is bigger, the text is bigger and bolder, and the main actions of back, forward, and play are very large and tappable. Again they’re using the color sampling gradient but using a lot more of the color, likely to visually signify that you are in listening mode.

Step 3: Evaluate The Flow

The interviewer might ask

"You walked through the use case of discovering new music. How well does this flow solve for that use case?"

How you might respond

Spotify is popular for a reason. It does a great job of curating and recommending music you might like. It also has room for improvement.

• Overall it's a well-designed app. It uses dark mode to emphasize the content, it has consistent font and icon styles, thoughtful use of gradients and color-sampling, and even micro-interactions that make it fun to use.
• However, there is a lack of clarity about content types. You never know if you're looking at an artist's album or a curated playlist, or a radio station. Adding labels or icons could bring clarity.
• There's an opportunity to try different content layouts on the home screen. The monotonous use of horizontal scrolling sections could be broken up with different layouts to make the home screen more visually interesting and interactive.
• There's also a bit of confusion about the primary "play" call-to-action. The FAB with the smaller icon attached makes it unclear what will happen if you tap it.

Step 4: Evaluate the Business

The interviewer might ask

"How does Spotify make money? What's the business model? What metrics do you think they care about?"

How you might respond

A few potential business models might include:

• Ads: Spotify offers the app for free, with the caveat that your music will at times be interrupted by ads. This is a common monetization strategy. Spotify infers behavioral and demographic data based on what you listen to and then offers targeting to advertisers, similar to platforms like Facebook.
• Subscriptions: For those who have the money and don't want to be interrupted with ads, there is a monthly subscription plan.
• Licensing: Perhaps they have a licensing revenue stream. For example, apps like Uber and Facebook have or could integrated with Spotify to offer music to their users and pay Spotify for the service.

In terms of business metrics that Spotify might be tracking or goal themselves on, a few might be:

• Active Users: Whether it's daily, weekly, or monthly, active users is always a good metric to track the health of a product. It is often a prerequisite to other metrics, because sufficient traffic is needed to gain statistical significance on other metrics.
• Listening Time: For any media or entertainment app, the amount of time users spend consuming the media is an important metric. They improve this metric by making it easy to continue listening to your favorite artists as well as offer new music to keep you coming back.