IronHack Prework Challenge 2: Wireframing

App Flow: How to search for and play a song on Spotify

In one of our IronHack prework modules, we learn about wireframes and how they provide a simple visual representation of how the flow of an app or website works.

We’ve been tasked with reverse engineering the Interaction Design and User Flow of a popular app.

The layout of the screens will be the same as the ones shown in the real app. But I will simplify the design to its bare wireframe state, placing boxes and placeholders when needed to signify different UI elements.

The app I am choosing to break down is Spotify. I chose this app because it’s one that I use everyday along with millions of other users. It has revolutionised the way we listen to music and for only €9.99 a month, advertisements are removed and you receive two weekly playlists along with six daily mixes tailored to your music tastes. The algorithm it uses to find music for you is so intelligent and 99.9% of the time I’m happy with whatever music it suggests. You probably think I work for Spotify now but nope, I just love music and when it’s delivered in such a personable and simple way, I can’t help but endorse it.

The specific user flow I have chosen to dissect is ‘How to search for and play a song on Spotify’.

Before I jump into low-fi and mid-fi prototypes of this user flow, I will first define the UI elements that are included in the five screens below. These screens are what you will see in Spotify when you choose to search for and play a song.

In the screenshots above, we can find the following UI elements:

• Icons (Home, Search, Library, Settings, Recently Played, Like, Cancel, Repeat, Play, Backwards, Forwards, Shuffle, Repeat, Back)
• Buttons (Access to Playlists, Genres, Artists, Songs, Albums and Follow)
• Search Field / Search Box
• Modal windows (when you select ellipses icon or the device icon, a window will appear with options to proceed or cancel)

Now let’s break down the task analysis.

1. You have opened Spotify and find yourself on your Homepage.
2. You want to search for a song, maybe you’re not sure of the title but you know the Artist is Billy Idol. So you select the Search Icon at the bottom of the screen.
3. The Search page shows a Search Field Box above and below there are you recent searches. Here you have the option to cancel your search request and the option to cancel specific searches in your history.
4. You select the Search Field box and a keyboard appears. Here you can type the name of a song, artist, album etc. In this case, you will type Billy Idol.
5. The results of your search appear as you type which is really clever. Billy Idol is a well known artist so his Artist Page appears straight away at the top.
6. You select his Artist Page button and it takes you to his page. Here we can see a list of his most popular songs and you remember the one you were thinking of, one of my favourites “Rebel Yell”.
7. You select “Rebel Yell” and it starts playing while you remain on the Artist Page.
8. But now you want to see the album cover up close and so you select the Player Section at the bottom of the page. This takes you to the Player Page where you can see the album cover blown up, the song details and current playback information i.e song length and current position, play/pause button etc.

Now that we have defined the User Flow of how to search for and play a song on Spotify, let’s continue to take a closer look at the User Interface which enables the flow for so many music listeners.

To get a feel for the User Interface (and because I love using markers), I first created low fidelity wireframes:

Then I took to Figma and created medium fidelity wireframes:

Looks pretty cool and simple, right? Well, it actually took some time to create! I can imagine Spotify spent a lot of time refining the flow for each individual action to make such a fantastic and logical app.

This lesson has taught me that in order to make a simple design that is easy and enjoyable for people to use, a lot of thought goes into the process. You have to create a user flow that is smooth, straightforward and fun while using consistent UI elements to facilitate the user’s journey.

If you want to go even deeper into my Spotify example, feel free to check out my Figma prototype which allows you to be the user and follow the journey of searching for and playing a song on Spotify. I’m sure you are familiar with this already, but it’s always fun to check out a prototype and get into the nitty-gritty of an app.

https://www.figma.com/file/to9TmNeZRCip3p4CirAsIT/Spotify-Wireframes-and-Prototype?node-id=0%3A1

Thanks for taking the time to read my article, I hope you enjoyed it as much as I enjoyed creating it. Keep an eye out for more interesting UX/UI articles to come!