Spotify: from Search to Discover
UX & UI Design

Spotify: from Search to Discover

UX & UI Design • 2020

Spotify doesn't need an introduction.

It is amongst the biggest and most successful music streaming services, providing a great listening experience to millions of customers worldwide, either via the web player, the desktop client or the mobile app that all offer a great user experience.

Spotify's desktop client on Mac

The Idea

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.

However, one of my frustrations with the current Search page is that it's hard to discover new content. This frustration sparked the idea to transform the current Search page into a new Discover page.

Also, I'm trying out a few new things with this project:

  • Executing and documenting a project entirely in English
  • Designing and creating a high-fidelity prototype in Framer X
  • Improving a feature of a product that I already enjoy using daily for over a year




The Goal

Design a page for the mobile app of Spotify that puts the discovery of new, uprising and popular content upfront without losing the helpful functionality that the current Search page offers. Document the entire process in English.

Current Search page




Research & Thoughts

Usually, I start these projects by researching which challenges users have with a product, to make sure I'm designing a solution that solves the issues the users have. For this, I usually interpret analytics data, browse app reviews, read blog articles about solutions to similar problems or, if possible, ask the users directly.

For this project, I wanted to take a different approach. Since my idea is more like an improvement to the already great user experience and less of a reaction to a sever user-problem within the Spotify app, I thought about & observed where I usually try to find new music or podcasts on Spotify.

While observing this for over a week, I found out that I mostly listen to the Spotify-playlists "Release Radar", "Discover Weekly", "Your Daily Podcasts" and "Wrapped 2019".
They are great playlists since they get updated frequently & mostly offer content that I like, but the frustrating thing for me is that they always appear in different places. Sometimes they are right up top on the home screen, but most of the times I have to search for them.
I wanted to fix this by giving them their own, fixed section on the new Discover page.

I also had moments when I didn't want to think about who or what I want to listen to, but I just wanted to listen to something that I know I like.
For this, I built the section "Recommended" right beneath the search bar. A personalised slider that recommends artists, albums, playlists and podcasts based upon the recent listening behaviour, favourite artists and followed podcasts.

Since I like the personalised experience of the "Your top genres"-section, I didn't change much about it. I edited the background colours of the genres to make the text more readable and added a slider beneath that recommends playlists based on the top genres.

After discussing the "Browse all"-section in my first revision with Louis, a friend of mine, I decided to replace it with the categories "Uprising genres" and Browse popular genres", to reduce the visual clutter. Via the link "All genres >", it's still possible to see & browse all genres on Spotify.

Sorting genres into logical groups and adding sliders & links for more content



Execution

While planning and discussing my ideas, I knew I had to design and build a prototype of my vision, to make it visible, tangible and shareable.

I started by researching the fonts & colours that Spotify uses for their app and took screenshots of the UI elements of the current Search page, so that I could rearrange them in Sketch and get a first draft of my vision. Next, I edited the background colours of the genres, added the sections "Recommended", "Discover", "Uprising genres" & "Browse popular genres" and complemented each category with a slider that recommends content from each section.

For prototyping the Design, I tried to build the Prototype with Origami Studio as well as Figma but wasn't able to achieve the fidelity I was looking for with either of these Tools. After these setbacks, I researched which tool Spotify uses for their Prototypes and found out that they rely on Framer X.

So I downloaded the free trial of Framer X, took an online crash-course on how to build a Prototype from a Design made in Sketch and was able to finish my high-fidelity prototype within a few days without having to write any code.

The new Discover page




Feedback

To get some feedback on the Design and my Prototype, I presented it to some friends and family members. Here's what they said about it:

"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.



From Search to Discover: Before & After




Conclusion

During this project, I 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. I learnt once again how seemingly small changes in the design have significant effects on the User Experience.

All of this leads me to the conclusion that Spotify could grow even more by satisfying customers and artists further, since minor tweaks on the Search page could impact the user experience and the amount of streamed content in meaningful ways.

Annotations

Thanks a lot to Philip Heins, Louis Krohn as well as Yannick Krohn who provided me with helpful feedback throughout this project.

This design is a concept. During this project, I never was an employee of Spotify or any of the associated companies.
I designed and built the Prototype because I enjoy using Spotify daily and saw good potential for the improvement of the user experience by transforming the Search page into a Discover page.
And also because I love (re)designing digital products and improving their UI & UX.

Dir gefällt meine Arbeit?

Schreibe mir eine E-Mail, wenn Du mit mir gemeinsam Ideen und Projekte verwirklichen möchtest.

E-Mail verfassen