Spotify doesn't need an introduction.
Currently, it's the biggest and most successful music streaming service, providing a great listening experience as well as user experience to millions of customers worldwide, either via the web player, the desktop client or the mobile app.
In this project, I redesigned the current Search page of the Spotify app into a feature-rich Discover page to discover new possibilities how Spotify could personalize and improve their Search page.
month(s) from concept
The Search page of Spotify is great.
It allows me to find & experience artists I like, to search for new podcasts or to listen to that banger from the 80s again. If something that I'm looking for isn't available, Spotify tries to offer suitable alternatives. But one of my big frustrations with the current Search page is, that it's hard to discover new content here.
This frustration sparked the idea to transform the current Search page into a new Discover page and inspired me to improve a feature of a product I already enjoy using on a daily basis.
For this, I designed and built a high-fidelity prototype with Framer X, that puts the discovery of new, uprising and popular content upfront – without losing the helpful functionality of the current Search page.
I usually start projects by researching about the users of a product or service and which problems they are experiencing. This first step is crucial for better understanding who I'm designing for and which problems a new design has to solve and which problems might not be fixed by a redesign. For this project however, I took a different approach, since it is a personal passion project & an improvement to the already solid user experience of Spotify.
So I started the process by observing where and how I usually try to find new music or podcasts on Spotify. While observing this for over a week, I noticed that I mostly listen to the Spotify-playlists "Release Radar", "Discover Weekly" and "Your Daily Podcasts". They are great playlists since for finding new songs or artists as they get updated frequently and mostly offer content that I like. The frustrating thing for me however is, that these playsists seem to appear in different places the app everytime I try to find them quickly. Sometimes they are right up top on the home screen, sometimes they are more towards the bottom, and sometime I can only find them by searching for them. So my first priority in the redesign was to eliminate this "hunt" by giving the forementioned playlists their own, fixed section on the new Discover page.
I also noticed that I had a few moments when I didn't want to think about which artist, song or playlist I want to listen to, but instead just wanted to listen to something that I know I like. For this, I designed the "Recommended"-section right beneath the search bar. The idea behind this is, that this personalised slider recommends artists, albums, playlists and podcasts based on the recent listening behaviour, favourite artists and followed podcasts of the user.
Since I like the personalised experience of the "Your top genres"-section, I didn't change much about it's function. But I edited the background colours of the covers to make the white text more readable against the bright coloured background and designed a slider to add beneath the section, to recommend playlists based on the top genres.
After discussing the first draft of my redesign – especially the quite clumsy "Browse all"-section – with Louis Krohn, a friend of mine and a media designer digital & print in education, I decided to split it into more specific categories such as "Uprising genres" and Browse popular genres", to reduce the visual clutter and make it easier to find the category a user might looking for. Via the "All genres >", it's still possible to see & browse all genres on Spotify.
The final result shown here was achieved by using Sketch and Framer X.
I tried building the Prototype with Origami Studio as well as Figma, but wasn't able to achieve the fidelity I was looking for. While researching for more prototyping tools, I found out that the designers at Spotify use Framer X for their prototypes, so I figured it'll be the perfect tool for this design.
And my friends as well as my brother seem to agree, since I asked them for their feedback throughout the whole project. Here's what some of them said:
"The design for the Discover page that Christian created is a great example of how Spotify could make more out of their current Search page. It offers additional value to Spotify's customers since it successfully combines the search-functionality with the ability to discover new content, hence why it makes sense from a UX point of view. The UI design is spot on."
Louis Krohn, friend and media designer digital & print in education.
"Even though the new Discover page contains a diversity of content, everything is still structured and logically laid out. Christian definitely managed to create a high-fidelity prototype, and the transition from personal to general recommendations is a great touch."
Philip Heins, brother and state-certified commercial assistant focused on information management.
This feedback in combination with what I learnt about Spotify during this personal project, I believe that Spotify could grow even more by satisfying customers needs and artists exposure further with a few tweaks to their current Search page.
Besides improving the UI and UX of the Spotify Search page in this project, I also learnt how to execute and document a UX-focused project entirely in Englisch, how to use and build a high-fidelity Prototype with Framer X and how to ask for and talk about UX-related feedback.
Thanks a lot to Louis Krohn, Yannick Krohn as well as Philip Heins, who provided me with helpful feedback throughout the project.
This design is a concept. During the execution of this project, I never was an employee of Spotify or any of the associated companies. I designed and built the Prototype because I saw good potential for the improvement of the user experience of the Search page in the Spotify app. And because I enjoy (re)designing digital products and improving their UX & UI.