Spotify app redesign.

Project Brief:

As a long-time user of Spotify, I noticed that there is a feature available on desktop that isn’t available on the mobile app — the ability to view what your friends are listening to in real-time, also called “Friend Activity.” It offers users a new way to discover new songs and artists while also fulfilling Spotify’s business objective of satisfying current customers and gaining potential users. The impact of my role in this design is that users found it intuitive to use and expressed interest in having this feature in the real Spotify app.

(This project was done as a case study.)

Role: UX Designer

Duration: 1 week

Programs Used: Figma.

Goals:

  • Integrate a new feature into an existing app.

  • Determine other possible areas of improvement.

  • Practice using established brand design guidelines.

Responsibilities: User research, wireframing, prototyping, iterative design, user testing.

 RESEARCH methods

The first step of my design process was familiarizing myself with the Spotify’s target users. I needed to get an understanding of who the main demographic was and figure out what sort of design solutions they might like.

Here is some of the quantitative data I found (link to data):

  • There are 365 million users of the Spotify app; mainly concentrated in Europe & North America

  • 50% of users are under the age of 35; they are mostly Gen-Z

  • 56% female

  • 44% male

Next, I conducted a survey and informal interviews with individuals who regularly used the Spotify app. I went into the interviews hoping to understand the emotions and underlying reasons users gravitated towards the Spotify app over other music streaming platforms, such as Amazon Music, Google Play, and YouTube Music.

Here are some insights that I found:

  • 57% of Spotify users primarily used the app to find new music and artists.

  • Users expressed that they valued the curation and personalization that Spotify offers compared to other competing music streaming platforms.

Why does this research matter?

Figuring out ways to retain customers is the key objective from a business standpoint. The cost of acquiring new customers generally costs more on average than keeping existing customers. One of the best ways Spotify continues to retain their users is their highly personalized content.

Adding in the ability to see what your friends are listening to in real-time offers users a way to find new songs and artists helps Spotify maintain their brand of personalized music while also fulfilling their business objective of retaining and satisfying returning customers. The second benefit is that new features introduced to Spotify — like Spotify Wrapped — are often shared with friends on social media. These friends of friends generate more interactions with the Spotify app and as a result, people are more likely to use Spotify in the future.

 THe “SPotify” brand

I took a look at Spotify’s design guidelines on the design page of their website to get an idea of how I could seamlessly add my new feature into their app while staying consistent with their current visual design. I found information on key design elements, such as colors, fonts, and images.

Consulting the brand guidelines before starting to come up with design solutions was helpful in understanding why Spotify’s UI is so effective and keeping the designs cohesive. I found that Spotify’s brand tends to be so on point because of their expressive colors and their friendly section headers. It makes the app feel warm and inviting, which is the feeling I want to convey in my design.

The Design Process.

I started by first taking a look at the current Spotify interface on desktop, with the existing feature in the right panel. It’s called “Friend Activity,” here so I stuck to the same name for mobile app to provide brand consistency. I also took note of the information provided — profile picture, username, artist name, song title, and album.

Digital Wireframes.

The wireframe below shows the user flow of the new “Friend Activity” feature. I decided to implement the new feature by focusing on the following solutions:

  • See what your friends are listening to on the homepage.

  • Curated playlists based on what your friends are listening to, grouped by genre.

  • Easily add new friends using QR codes. Essentially, you can take pictures of friends’ QR codes using the camera, which is originally found on the search page of the original app.

Initially the QR code idea wasn’t a part of the plan, but I somewhere along the line I started to wonder how users would add new friends to their network. What could be the easiest way to add friends? As a user of Spotify myself, I usually search for my friends by name — but that sometimes pulls up several individuals with the same name and then I have to go down the list until I find the correct person.

Simplifying the process of finding friends by using a QR code minimizes the steps and time taken to complete the task.

Creating Mockups.

My next steps in the design process was adding in colors, images, and interactive components to the wireframes. This is the part where I had a bit of a hiccup — I was having trouble animating the horizontal scrolling feature under the friend activity carousel. I was able to solve my problem by watching tutorials on YouTube and practicing implementing the new skill I’d learned.

Spotify’s design guidelines were valuable in giving me a direction for the visual design because I found it a lot easier than having to come up with your own typography and color guide from scratch. I did have trouble finding icons, since the ones Spotify uses are copyrighted, so I tried my best to find ones that matched the icons in the native app.

The final screens for the user flow are pictured below.

User Testing

I conducted usability testing among potential users in the form of an unmoderated usability test to see if the new feature is usable and easy to understand compared the original app. My main goal was to see if users can navigate through the app on their own.

  • 100% percent of users who tested the prototype completed the task, indicating that it easy to use.

  • 80% percent of users expressed that they would use the “Friend Activity” feature if was on the Spotify app.

I was happy to hear feedback from users that having a feature like this would be handy and convenient!

In Conclusion,

My goal of learning how to use established design systems to seamlessly insert new features into launched apps was successful. I really enjoyed the process of learning about Spotify’s design principles and standards, which I think can help my own design process when it comes to working on future projects that have already launched. I was also able to brush up on my UI skills by learning how to animate animation patterns, like horizontal scrolling, on Figma.