Wireframing an app: Spotify

Ironhack Prework. Challenge 2.

Beatrice Nuti
2 min readFeb 1, 2020

The second challenge requires to “reverse engineer” one popular app Interaction Design and User Flow.

The task

The task of this challenge is to create a wireframe version of the user flow of a choosen app, based on screenshots or high-fidelity prototype screens.

Wireframe give a simple visual representation of how the flow of the app or website you are creating will be. The goal of the wireframe isn’t to attract attention to a user for his aesthetic quality but to understand, in the best way possible, what will be the user flow of an app (or web site).


For this challenge I choose the Spotify app, because I use it frequently and I find its functionality very useful. It also has a very simple interface and probably it’s makes this app very popular.

Using Adobe XD I created 8 wireframes of the Spotify app. The first image shows a comparison between the app’s real screens and their respective wireframes; in the second image you can see the connection of the various interfaces.

A comparison between real screens and wireframes
User Flow

To transform the wireframes of this User Flow into an interactive prototype I used InVision.

You can see the InVision’s interactive prototype in the link.