Wireframing Spotify

Rebuilding a user flow as a challenge in the prework UX/UI course of ironhack

To understand the underlying functionality beneath its shiny surface better, I analyzed and rebuilt a user flow of a popular app. I chose Spotify, as I use it on a daily basis and wanted to dissect a seemingly easy interaction like adding a song to a playlist.

This is the user flow in the app:

Adding a song to a playlist in Spotify

This is the same user flow in the wireframes I built:

Wireframes of adding a song to a playlist in Spotify

I added some interactions to the screens and built an interactive prototype using Figma. You can have a look at it here.

What I learned

I really like the feeling of interacting with Spotify. When I built the prototype, I noticed that the flow is supported by animations that feel natural and give orientation about what’s happening and where you are. In terms of the whole app, the order of the steps seems logical. I analyzed and rebuilt only a small interaction and already noticed its complexity. I think that Spotify did a great job not letting the user feel this complexity beneath the shiny interface.