Founded on 2006, Spotify is now one of the music largest streaming services with over 615 million active users and more than 100 million songs as of March 2024. This UX case study reveals Spotify's pain points that users encounter with the navigation ability and their experience.
Project Overview
Spotify still holds one of the top streaming platforms but competitors such as Apple Music, Deezer, YT Music, etc. are gaining just as much popularity. In a couple of weeks, I went and researched how I can make Spotify better for users to enjoy and what I can do to better enhance the experience with the popular streaming app.
Spotify Redesign Prototypes made by Figma (2024)
Research
To understand why users make a switch from Spotify, I will be uncovering the pain points behind the streaming app. This includes a review of the Spotify itself, sending surveys, and comparing the competitors performances. These methods will help set a foundation to guide our solutions.
Brand Identity: Spotify has a strong brand identity, learning more about their brand will help uncover more ways to improve the user experience in the redesign.
Appearance: The layout of Spotify and its different elements is a major part of why people use the app.
Audience: To know the audience, is to know the main character. The brand identity must be clear and concise within the app so that our audience can enjoy the app thoroughly.
Functionality: How the app works and the ease of navigation is important for our audience and appearance.
Information Architecture
The information architecture helps us understand the structure behind the redesign project. It serves as a guide to the design process.
Information Architecture made by Figma (2024)
Sketches
Possible solutions are sketched for the redesign. A variety of different layouts are to be looked at and compared to see which design would work with the overall project.
By drawing an outline of the eye-flow, we can see how our audience would navigate the screen and work around the ease of navigation.
Many of the sketches are focused on the placement of the music bar as well as the home page navigation. Other sketches are possible solutions for the Library and Search page.
These help build the ideas for the prototypes.
Sketches/Lo-fi Prototypes drawn in Procreate (Mar 2024)
Loading and Login Page
The loading and login page is one of the most crucial parts of the app, it's the first look the audience sees when they open the app.
Loading Page made in Figma (2024)
Sign in Page made in Figma (2024)
Challenge:
The old design's center of attention is focused on the bottom. It needs to be the center of concentration.
Change the pitch black color due to its heaviness.
Solution:
Pages are focused on the center and effectively uses the empty white spaces.
The black color is replaces with a dark gray color which complements their green theme and a green gradient is added for a sleek aesthetic.
The login page is more personalized to the user which makes the user more likely to interact with the page and have a better experience.
Home Page
The home page is the main part of the app, users will be mainly using this page to navigate to where they want to go.
Home Page made in Figma (2024)
Challenge:
The original home page is cluttered with any things, making any users feel overwhelmed.
The blocks of color throws off the aesthetics of the home page.
The icons that are located on the top are easily missed and not effectively used.
Solution:
Home page is more personalized to make it less overwhelming and more towards user experiences. User is able to find their top artist of the week and go from there.
Top icons are removed since its accessible in the menu bar. This removes the clutter and allows for easy navigation with the cleanliness of the design.
Music Player Page
The music player page holds the most aesthetics for users. It plays the song that they want and most controls for the song are in this page.
Music Player made in Figma (2024)
Challenge:
Remove Spotify's current music video function. It takes more space to load up and it's not needed for a music streaming service.
The old design makes it difficult to navigate to add songs through multiple clicks, a design must be added to make main shortcuts.
Solution:
The cover photo is shown and does not fill the screen.
There is easier navigation to make the shortcuts easier to access whenever needed.
The lyric bar is fitted so its less contrast, matching the aesthetics.
Artist Page
The artist page is a crucial part of a music app because a user would want to check out who they're listening to.
Artist Page made in Figma (2024)
Challenge:
Make the artist page more interactive
CTA buttons should be more noticeable
Made the banner more engaging so it's not just a picture but more of a featured cover
Solution:
Artist cover banner is filled with information about the artist, which gives more space for newer categories.
Latest album release is shown first to promote artist's new album in which fans can easily navigate through.
Library Page
The library page includes your personalization of what you have added into your library.
Library Page made in Figma (2024)
Challenge:
Old layout does not have playlist description as it prioritizes more of the space on the playlist cover. Design should add a description so users are more likely to use this function and make it immersive since sometimes users make these playlists public.
Make it more friendly for users to go through their library.
Solution:
Easier navigation as the design is broken into many visuals, users would know where to look at.
More options are added such as recently added for efficiency.
Playlist description makes it more personalized and allows users to be more creative.
Search Page
The page allows users to browse the library.
Search Page made in Figma (2024)
Challenge:
The old design has categories that are randomly grouped which users do not really try to engage with.
The colors are not coordinated and it seems to also be random.
Solution:
Search will bring up your recently searched first for your convenience.
Category pictures are based on what you listen to for more interactive functions.
Colors are picked form the main color of the cover art so it's not random.
Menu Page
The menu page has a huge importance when it comes to accessibility. It's where people go to whenever they need more access to the app's feature.
Menu Page made in Figma (2024)
Challenge:
Many items are not used by users, these can be grouped together for space efficiency,
How would you make it so users would look thoroughly at the menu page?
How would you meet the needs of accessibility?
Solution:
Accessibility is easy to find once you go to the menu page.
Easy navigation by grouping together menu items and making sections.
Removed extra menu items that are not used.
Add in symbols for those who are more into visuals.
Conclusion
This turned out to be a personal and passion project to hone on my UX designs. It was a fun time creating designs from scratch and hearing feedback from many peers and friends. I tried to look into the redesign in a blank slate and see how users would use this app more interactively.
.png)
.png)
