Frontend Challenge — Spotify UX Case

Roberto Ribeiro
IT student life
Published in
6 min readSep 12, 2021
Customer Journey Map

Understanding the different challenges faced by a frontend developer is part of the Web Development specialization. Especially if the chosen path is that of a full-stack developer.

This project is split into 3 parts:

  • Research: this one, where you will get familiar with these 3 personas, UX problems, and starting to think about solutions
  • Prototype: put in Figma your thinking prototypes
  • Validate: share your work with other users/students and get feedback on it

The hypothesis is a real case from the company Spotify and I need to analyze it in the following context.

After reviewing the business’ goals at the end of last quarter, the Research team wants to identify if we have an opportunity to make users’ stream more content. They have identified a challenge that they think is worth exploring: “Improve how Spotify users find music to listen to.”

The goal is to understand how designers do a case study and how they solve a UX problem.

So that we all have the same starting picture, this is the prototype for this case.

UX prototype

Part 1: Research

1.0 Empathize & define opportunities for improvement

To achieve this, you have to look at it from the user’s perspective, leaving aside personal assumptions.

Of the three cases to choose from, I chose Michelle, a nurse practitioner who wants to discover a new genre.

Michelle profile
User Journey Map

1.1. Sketch: challenge assumptions and generate ideas

Scrolling through the user’s journey map it is possible to see that they are always in the same cycle of recommendations because the system is designed for users to have a personalized experience.

The Spotify experience is designed for a single user per account. This makes it very difficult to predict or recommend when more than one person uses it.

To help Michelle find new music genres, I have come up with two options.

Firstly, add a button that allows the possibility of easily and quickly experiencing a new experience.

Option 1:
A new button on the navbar.

A new button on the navbar.

Option 2:
A new button in the center of the index after the ads.

A new button in the center of the index after the ads.

The second proposal is to add a search button that predicts options through a drop-down menu.

Option 1:
A search button on the navbar.

A search button on the navbar.

Option 2:
A search button in the center of the index after the ads.

1.2 Decide: choose the idea to elaborate

I choose the first option for being an original idea and for not being implemented in other services.

It is ideal for those moments when we want to know other genres, explore new artists and combine them with our favorite music.

The first option would be a filter by gender.

Filter by gender

Then the possibility to select artists within that genre.

This will generate a new and instant radio or playlist experience, which the user can access at any time.

Part 2: Prototype

Make your solution real enough

To validate my solution, I need to produce a prototype that looks like a real product.

The name chosen is “Instant”. According to the Merriam-webster dictionary, its meaning is “an infinitesimal space of time”. That moment is the one I want to recreate with a new playlist.

Therefore, I made these sketches on the whiteboard imagining the user’s flow

The option is displayed at the end of the navbar.

When selected, a list of genres and moods is displayed.

After choosing the one you want, a selection of artists are displayed, and you can choose as many as you want.

Depending on the genre, and the artists, a new playlist is generated instantly.

You can generate as many “Instant” as you want. And if you like the playlist you can save them.

And finally, the prototype with its high fidelity design in Figma.

https://www.figma.com/file/cpTJd3X4yzbSu3C5cNGNvC/Spotify-Copy?node-id=0%3A1

And the interactive design.

Part 3: Validate

To perform the validation I received the help of my friend Luciana Sarachu.

I gave her the blog and the interactive prototype in Figma so that she could carry out a round of validations at the School among the students of other cohorts.

Peers say:

Luciana — 35 years old. She loves music and has been a Spotify user for several years. She thought the idea was great. She would use it. She recently discovered Instagram was suggesting new artists to her but this is much better because you can choose by genre and also super easy to use. Loved it!

Rodrigo — 30 years old. He doesn’t use Spotify, he prefers apple music. He says it has a similar option. He loved this idea, he found it interesting to save time searching.

Miguel — 19 years. He uses Spotify desktop. When interacting with the prototype he shouted “Cheto!” It’s a juvenile expression to show that you really liked something. He usually always listens to his own playlists, the same music but he would use it, he found it easy to use.

Martin — 24 years. He does not use Spotify, he preferred not to talk about his preferences. However he loved this idea, he was surprised that the option did not exist in the original application.

Carmen — 45 years old. She doesn’t use Spotify. Instead, she uses Youtube. Anyway, she had a lot of fun interacting with the prototype. She found it user-friendly. She would use it.

In conclusion, it is always possible to improve the user experience and add new features. However, even the best ideas must be validated.

I’m looking forward to seeing if we had the same thought process.
Cheers!

--

--