Redesigning Spotify

For this project, I’m tasked with redesigning four screens from Spotify’s mobile app. Some background about the company: Spotify is a popular music-streaming platform that provides people with music whenever they want, wherever they want. Spotify is a “freemium” service, so people can use it for free (with ads every now and then) or for a subscription fee (to be ad-free). Students can have a discounted subscription fee, but the normal one is usually $10/month. I’ll be designing for premium users, so those without ads and who have the freedom to choose their own music.

Initial Research and Observations

Due to the broad scope of this project, my research was conducted in the simplest way to understand others: through conversations. I discussed with people (male/female college students) when, where, and why they use Spotify, while also doing self-examination into my own experiences with the app. Answers ranged from “all the time” or “I use YouTube instead of Spotify for my music”, but overall there were a lot of insights to be found in the conversations I’ve had. Some observations that really stuck with me involved the discussions we had about artists and their work, and the individual’s experience with a piece of music. It was also interesting to discuss the social capabilities of Spotify, and how each person crafts their own personal experiences with the music they listen to.

Choosing a Concept

From the conversations I’ve had, and observations about how people treat music as a whole, I decided to move forward with the concepts of an artist’s story, an individual’s own experience with their music, and the space where the artist and listener interact. It’s a pretty broad area to work in, but I feel that it creates a variety of both long-term and short-term goals:

Long-term goals: foster a culture where artists and their fans form more personal connections; allow artists to have the freedom of explaining the reasoning behind creative decisions in their music; humanize famous artists and celebrities

Short-term goals: provide artists with a clear way to communicate with fans; allow listeners to document their own experiences with music (thus creating a stronger connection to the songs they listen to)

A map of some potential user flows — I’m choosing to focus on the four screens in the box

Points of Intervention

For my next steps, I looked at possible user flows for Spotify listeners, and determined which screens were the best to redesign for my concept. Since I wanted to focus on an artist’s presence, as well as user’s own unique experiences, the screens I decided to focus on were user-built playlists, the “Currently Playing” screen, an artist’s page, and an album from said artist’s page. I took some quick notes as to how they’re currently structured, and how they could be simplified in some ways. On the mobile app, the bottom nav bar is consistent across all screens, so I’m still up in the air about whether or not to include it within my redesign.

Analysis of the screens I plan to redesign

Initial Redesign Ideas

I listed out some potential solutions that might already exist, asking myself questions such as “What are existing ways for artists to discuss the backstories for their work?” or “How do people document their own experiences with music?”; Spotify already collaborates with Genius, a lyrics site, and some songs have lyrics that are interspersed among interview quotes about the artist. Nevertheless, I feel that there’s a way to bring focus to these stories and backgrounds, and for listeners themselves to have a role in documenting their own experiences with the music. I sketched out some quick ideas for redesigns, pictured below, which I plan to make some mid-fi prototypes before determining how successful I am in communicating my concept.

Some quick redesigns (formatted: original screen, followed by arrows pointing to that screen’s redesign)

Iterating on Visuals (v1)

I worked on creating higher-fidelity mockups in Sketch to have a better idea of which parts aren’t working well with my concept. Trying to follow Spotify’s brand guidelines, I realized that a big part of my concept involves text and quotes, which may be difficult to work with in trying to make the screens visually interesting. Below are the initial Sketch mockups, which need some work in conveying exactly what I’m aiming for. I plan to play more with using color to give the screens more life, perhaps using depth between different elements to bring forth certain elements. Maybe there’s a more interactive, visually interesting way to incorporate the artist’s/creator’s statements?

Re-examining the screens, I also didn’t implement the listener’s own experience, which is an important aspect of my concept; ideally, there’s a way to incorporate that part without having it be just another method of journal entry…

v1 iterations (left to right: Artist’s Page, Album, Playlist, Currently Playing)

In the later iterations of the visuals, I came across a variety of problems including figuring out which elements should stand out visually to the user. I also slightly edited the bottom bars by removing the labels, as they would have titles on them similar to the screens seen below. I wanted to have the screens I redesigned have a new focus on information from the curator (whether it be the artists themselves or the user that generated the playlist). I used greater amounts of color to have the information (quotes and sections) about official artists stand out in a sea of dark grays and whites.

Extremely near-finalized redesigns

Finalized Redesigns

Given the time constraints, I focused on conveying my concept in the most straightforward, yet visually interesting way. Below, I’ll talk about the four different screens in greater detail.

Screens: Artist’s Page (left), Albums (right)

Artists

For this screen, I wanted to allow the user to understand more about the artists and their own inspirations, allowing for a greater understanding of where they come from and who they look up to themselves. I had an interesting thought of utilizing gradients to represent an artist’s genre(s), which could allow users to quickly gauge what type of music the artist creates. I also utilized a big block of color and shadows to bring forth the information about the artist, which I consider to be the most important part of this page. Users can then scroll down to view more of the artist’s work.

Albums

To forge a greater connection between the artist and the listener, I focused on creating a section on this screen that discusses the artist’s concept behind their album. It allows for an understanding of what the artist was trying to achieve, and what inspires them to create their work.

The block of green allows the artist’s quote to stand out, and the user can click it to read more about an interview or story behind the album’s concept. In the long-term, this fosters a culture where albums are seen as collections of songs that have a cohesive theme, rather than just a playlist of arbitrarily-chosen songs.

Screens: Playlists (left), Now Playing (right)

Playlists

Playlists are different from the albums in that the former is most commonly curated by Spotify’s users/listeners rather than the artists. As a result, the “Note” section is given less visual emphasis compared to an artist’s note, but playlist creators can still edit it to have their own description or story of what the playlist entails. Similar to albums, this can allow for playlists to become more meaningful or memorable due to the complex stories behind their creations.

“Now Playing”

For the fourth and final redesign, I wanted to bring an emphasis of story and information about the current song. The artist’s note is similar to the one on the album screen, while a block for lyrics is below it to make it clear to the listener of what the song is saying. Spotify currently does part of this with the implementation of Genius, but the user doesn’t really have control of when or where it shows the lyrics versus interview quotes. Additionally, not every song has Genius support, so artists being able to contribute their own perspectives to each of their songs is an important facet of my concept.


Final Thoughts

This challenge was tricky, especially due to the complex user flows of the Spotify app, and the relative minimalism the app employs. I didn’t want to diverge too far from the brand guidelines in case it became unrecognizable as Spotify, and working with the limited color palette was initially a big obstacle.

Overall, I felt extremely excited about my concept and the potential long-term stakes it has for Spotify users and musicians. Designing an in-app outlet for musicians to discuss their thoughts and their concepts humanizes them, while also communicating to their fans what they believe in. Execution-wise, I think working with a large amount of text on a small screen was a struggle, as well as determining which parts of the current screen weren’t as necessary to my redesign (such as the “Shuffle” button on an artist’s page or the “Devices Available” text on the “Now Playing” bar). I also believe that I should’ve focused more on creating a listener-controlled environment on the “Now Playing” screen, since it doesn’t allow for them to document their own thoughts on individual songs (which had originally been one of my goals).

If I were to redesign it further, I’d look into how to utilize maybe video or links to clean up the blocks of text on the screens, and overall make them look more approachable. I’d also like to explore the idea of utilizing color to represent different types of screens, such as “Albums” versus “Playlists” or, like I had mentioned earlier, vibrant gradients to represent the variety of genres an artist falls under.