Redesigning Spotify!

Maintaining the leader’s position in the market with reimagined features

Petra
Bootcamp

--

Welcome to the upgraded version of Spotify! Buckle up for a rollercoaster of frustrations, emotions, and problems. But don’t worry, instead of crashing down to the ground, with all the possibilities disappearing in the air and giving up, I’ve embraced the challenge and delivered ideas, solutions, and upgrades. So, fasten your seatbelts, it’s time to take off!

Idea

I was excited to meet my friends downtown and left the house in a good mood. I put on my earphones and opened Spotify to listen to some upbeat music and avoid the noise of the bus and the city. However, the old mini-player was still on, playing slow songs that I had started a few days ago. I skipped a few tracks hoping for something more upbeat, but every song that came up was slow. I wanted to change the whole playlist, but I was on the street and didn’t want to put too much effort into it. I scrolled through my home screen but couldn’t find any appropriate suggestions for my current “happy mood”. My frustration grew, and my energy level started to decrease. Finally, I arrived at the bus station feeling low on energy. I decided to play any upbeat song that came up, but then some random house music started playing, which annoyed me. I searched through the categories to find the right genre, all while the house beats kept annoying me. I finally found the section “happy music”, turned up the volume, and the bus stopped at my destination. I got out of the bus, vividly frustrated with the thought: “Where did my happy mood go?”.

Research

Scrolling through the app I noticed I would like it to have lots of new things and different features, but I realized that relying on my own thoughts and experiences would not be enough to redesign the Spotify app and improve its features. Although I’m familiar with the app, I thought it was important to conduct an app audit. This helped me gain a clear grasp of the app’s architecture, hierarchy, and content, which I felt was important to establish before considering how a new feature might integrate within the design.

Analyzing Spotify

I also had to dig a little deeper than that. and collect data about the company’s statistics, demographics, growth rate, and revenue to better understand its success. I came across a very detailed TechReport article (https://techreport.com/statistics/spotify/) with valuable information. I discovered that Spotify has been growing consistently for the past 17 years and shows no signs of slowing down. Additionally, there is a growing trend of podcast popularity, and users are not only listening on their mobile phones but also on Bluetooth speakers. In fact, 86% of smart speaker owners in the UK use them to listen to Spotify. One of the top features of Spotify is its ability to track Top Artists and Songs, which shows its widespread usage. For instance, Ed Sheeran, Ariana Grande, and Billie Eilish are currently the top artists in 2022 based on the number of followers. Further research on Comscore (https://www.comscore.com/Insights/Blog/Who-is-today-s-Spotify-Consumer#:~:text=The%20Spotify%20audience%20is%20largely,visit%20Spotify%20in%20January%202023) provided me with additional information on demographics, users, and their listening habits. Consumers are mostly young adults between 18–24 years old, living with families, and showing peak interest in listening and sharing music in December. By gathering and analyzing this data, I was able to expand my knowledge which will later lead to creating an ideal user - user persona.

Problems and Solutions

To navigate through the pile of data and ideas, I had to summarize everything, clearly define problems, and focus my attention on tackling one problem at a time.

Problem 1: Inefficient navigation bar

The initial challenge I tackled during the redesign process was related to the navigation bar. The bar was not efficient as crucial features such as ‘Music’ and ‘Podcasts’ were not given much importance in their current placement, leading to low visibility and engagement among users.
On the other hand, the presence of the ‘Premium’ feature in the navigation bar was confusing, as users could not interact with it as Spotify does not offer in-app subscription purchases.

Solution

To address issues with the navigation bar, I made some changes.
Firstly, I relocated the ‘Music’ and ‘Podcasts’ chips to the navigation bar to increase their visibility and encourage users to engage more readily with these important features.
Secondly, I moved the ‘Search’ feature to the top of the screen to streamline the user experience and introduced a user-friendly icon representing ‘Categories’, enabling users to explore content by category in a separate screen.
Lastly, I replaced the ‘Premium’ feature in the navigation bar with ‘Profile’. This change directed users to a section where they could access their account information, subscription plans, and settings, creating a more meaningful interaction point.

Problem 2 — Lack of personalization on the home screen

One issue with Spotify’s home screen is that it offers too many categories and options in one place, making it difficult for users to find content quickly. The overwhelming number of choices and offers can lead to frustration and endless scrolling through music, podcasts, playlists, new songs, all-time favorites, singers, bands, and many more.

Solution- allow users to customize their home screen categories and content. Instead of relying solely on algorithms to determine what users see, giving users control over their preferences, what they see, and in what order, can enhance their overall experience.

Problem 3 — Over-exploration
Solution- Explore Feature within the library

As an effort to prevent overcrowding of the home screen with too many options, features, and categories ever again, I have added an Explore feature to the library. This feature allows users to not only use the library for their preferred music but also to discover new music, artists, podcasts, and more. All the categories related to exploring new music are now accessible within the Explore feature, such as “New Releases,” “Recommended for You,” “Made for You,” and more.

User Persona

In order to create a user persona and identify who would benefit from new features, I spent several hours researching online resources, articles, and publications related to Spotify’s user base and the music streaming industry. I found two invaluable resources that provided insights and inspiration: Kevin Santos’ article (https://www.kevindsantos.com/spotify) and Spotify Design’s “Story of Spotify’s Personas” (https://spotify.design/article/the-story-of-spotify-personas). Based on the information that I gathered, along with my own innovative ideas, I created a persona named Mike Thompson. Have a look at his preferences, characteristics, and behaviors below.

User Persona- Mike Thompson

Ux Map

Using FigJam to create a UX Map was like drawing a map to understand Mike’s journey in the app. It helped me organize and see each part of his experience clearly. This visual map made it easier to look at every screen and feature closely. It was like having a guide to make sure everything worked well and was easy for Mike to use.

UX Map

Sketches

I never start any process without a pen and a paper beside me. That’s how my sketches are created. They allow me to explore, refine, and summarize my ideas until the design aligns perfectly with the user’s needs. These humble and not-so-pretty sketches are the foundation of my design and I never consider the design complete without double-checking the process with the sketches.

Sketches

Wireframing

After having the foundation (my sketches), I started building the structure. Just like with a real house. Without wireframing things would get messy and shaky. It allowed me to fix problems early and guided me to create a clear layout with all the elements in the right places.

Wireframes

Moodboard

In this project, creating moodboard had two purposes. Firstly, it involved a competitive analysis, meaning that I had to inspect and evaluate other music apps to gain insights and inspiration. Secondly, it provided a space to collect ideas and concepts that could be integrated into the redesign of Spotify. This process allowed me to explore approaches used by other companies and also gather inspiration that ultimately contributed to the development of new and innovative features for the app.

Moodboard

Style guide

Because Spotify has a well-established brand, this step served as an exercise to check if all of my elements aligned with Spotify’s. I created a style guide using their existing color palette, typefaces, and imagery, and I added some new icons specific to the new features.

Style guide- Color palette, typography, and UI elements

Final Design

Thank you for staying with me until the end. This section allows you to closely examine the new features. Enjoy!

Homescreen

Spotify’s homescreen has undergone several changes to enhance user experience. The navigation bar has been given a new look, and the music and podcast sections have been relocated. The search option is now easily accessible at the top of the screen. Furthermore, users can now customize their homescreen and enjoy a dedicated profile section. Based on research and analysis, we have introduced the Top Charts category at the top of the screen. Additionally, the mini-player has been fine-tuned to give users better control over playback and song selection. All these changes have been made to provide users with a smoother and more enjoyable music journey.

Homescreen redesign

Search and categories

Finding what you’re looking for is easy with the search function located at the top of the page. You can either tap to search, use voice search, or click on the “categories” icon to explore different options. Once you’ve reached the categories screen, you’ll find easy-to-use chips that will help you quickly locate subcategories without having to navigate through multiple screens.
I also reorganized categories to avoid cluttering. All the genres are now in one category, reducing the amount of information and choices available. Additionally, I minimized the use of different colors to prevent confusion and make information easier to process. Instead, I used black for the cards and added color only on the sides to indicate the beginning of a new category. I also added a glass effect to special categories such as “podcasts” and “live events” to make them stand out.

Search and categories redesigned

Explore Feature

During the analysis of the app, it was evident that the categories and content were designed to assist users in discovering new music and artists. In order to improve this experience, I have introduced a new feature called Explore. This feature enables users to discover the latest trends in music, as well as popular artists, recommendations, and much more.

Library and its new Explore feature

Profile

The premium feature has been redesigned to be integrated into the profile section. Now, users can access all their information, settings, subscription options, and plans in one place. To make the subscription process more convenient, I have added a button that takes users to an external link where they can make their purchase (since it is not enabled from within the app). The subscription plans were changed from a horizontal to a vertical view. Although I knew that it would be easier for users to compare plans in a vertical view, I opted to keep the horizontal scroll and display the plan information vertically. This allows users to quickly browse and select a plan, and then go to an external link to make a final decision.

Profile screen
Final design screens

Conclusion

I have reimagined some of Spotify’s features and created new ways for users to interact with the app. As the leader in streaming music providers, Spotify aims to maintain its position in the market. My goal was to explore new possibilities and provide Spotify with innovative features that can potentially shape the future of the app and create a new reality for users.

Until next time… :)

Contact

Feel free to share your thoughts on any of these:

Email: uiuxpetra@gmail.com

Linkedin: https://www.linkedin.com/in/uiuxpetra/

Instagram: https://www.instagram.com/uiuxpetra/

--

--

Petra
Bootcamp

Creative mind driven by a passion for design and problem-solving.