Deconstructing Spotify
Interaction Design and User Flow of an app by reverse engineering it
As one of the world’s most popular audio streaming services, Spotify takes special attention to the user experience. With big competitors, such as Apple Music, that provides a similar service, it is fundamental to create an attractive and User-preffriendly interface that wins the race for convincing the user to favour it over the others.
User Interface
In order to recognize the elements used in the UI, such as its patterns, colour, typography and spacing, nothing better than Learning by Doing. Therefore I recorded screenshots of a simple flow of navigation through the app. Starting with the Home screen, then searching for an artist, checking the podcasts library and finally playing a song. The next step was to mimic the UI using a vector graphics editor and prototyping tool called Figma, as it is shown below.
Subconscious actions
Spotify develops a consistent design language that makes users actions sometimes being subconscious. This is the case, for example, that artists images are shown within a circular frame, while albums and playlists are inside square frames. We intuitively know when we click to see a list of songs or when we dive inside the artists’ main page.
The app uses a dark User Interface, which enhances content such as colourful album covers and buttons, making it easier to perform user flows. Additionally, it causes less discomfort for the eyes, incentivizing continued browsing on the app.
Wireframing
To give a simple visual representation of how the flow of the app will be, I used wireframes. They are usually done in black and white (or greyscale) and represent the skeleton of the interface.
Using Figma to create interactions with the different elements of the screen the wireframes turned into an interactive prototype.
Conclusion
The process of wireframing helped me to perceive the design decisions behind one of the most used apps. The choice for the dark UI, a more eye-friendly approach, seems assertive, in a world where we depend highly on screens. The structure and shape of the elements associated with certain actions result in an intuitive flow through the app, allowing a desired task to be accomplished without much effort.
