Spotify reverse engineering — user flow and wireframe
The reverse engineering challenge
This challenge is all about reverse engineering a top app in order to learn how this MAGIC is done. I chose Spotify to work with and the happy path I will follow is all about enjoying Queen’s top hits. I decided to work on this flow because it seems that one of the cores of Spotify existence is to enable its users to listen to what they want whenever they wish to.
Lo-fi user flow
I took 5 screens which are represented in this lo-fi user flow you can see below.
Flow analysis
When entering the app user is presented with the home page with recently played artists and albums and recommendations. In case the user is using the app currently playing song will be displayed at the bottom of the screen. After clicking the search button on the menu below the user is take to search screen, where he/she can find recommendations based on prefered genres. After clicking in the search bar keyboard appear at the bottom and the screen changes to present recent searches. While putting in the text the app suggests best results. My happy path finishes with artist’s screen where user can choose from most popular songs presented on top or keep scrolling to find albums and playlist featuring chosen artist.
Wireframes
Check my wireframes here.
Spotify best practices
To sum up this challenge it’s good to point put some of the Spotify’s best practices. To make it easier to navigate, designers used the same shape code throughout the whole app — all artists are represented with circles, on the other hand, users can find albums and playlists shown with squares. That helps to organize the content from more general (artist) to more specific.
Another very good practice is to keep in the same place the navigation menu (the bottom of the screen) which is easy to access at any point and helps to move few steps back (eg. go to home screen) with just one click.
Key design takeaways
- standardize — keep the same design code through the whole app. If you choose a shape or a colour to represent something, stick to it. Users will appreciate it as it helps to navigate and takes decisions intuitively.
- If your app is about exploring content — make it easy to navigate. Having a navigation bar at the bottom al all times makes it easier for the user to come back to the home screen when he/she will dive into and enjoy exploring in your amazing content.
- keep looking for inspiration and best practices comparing leaders in the segment and getting benchmarks. There is no need to invent the wheel again.
Thank you for reading!
Make sure to go ahead and leave a like, comment and follow my feed. In case you guys didn’t know I have more interesting UX and UI content here.
Happy designing!
