Wireframing an app: Spotify
Ironhack Prework. Challenge 2.
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).
Wireframe
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.
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.
