LoFi Hip Hop Beats to Study/Relax to: A UX case study

Tim Mcmacken Jr.
7 min readJun 8, 2021

--

Second favorite artist

Recently I’ve been introduced to design thinking and asked to get a handle on design methods and language. This task has required shifting my perspective from the very engineer-oriented ‘get a stable solution quickly and move on to a more end-user-focused outlook. This new framing has included questions like:

  1. Who will be using this product and how?
  2. How will a new user find what they are looking for?
  3. Does this flow in an enjoyable way?

These sorts of questions are actually ones that I wrestled with in a reactive rather than pro-active manner during my years working technical support for various start-ups, but to now bring my engineering skills to bear on these problems makes them feel new. As part of this project I was given an example use-case for Spotify along with a user journey and asked to think up a possible solution to the end-user’s pain points.

Seeking Study Tunes

For my case study, I took a look at the issue an end-user named Alex was having with finding the right music. Alex is a 28yo graduate student that is seeking to use music as a way to block distraction while studying. He has noise-canceling headphones but is struggling to find the right playlist on Spotify to meet his needs. He is mainly seeking:

  • A playlist that is all instrumental or lyric-free
  • Something uptempo and motivating
  • A quick and easy way to find playlists that meet his needs for ‘study music’
A user story for our end-user Alex

As we learn from Alex’s user profile the first major pain points or worries are around the UX of the search feature. There seems to be a disconnect between our users and the categorization of playlists including a lack of descriptions or keywords that can illuminate what a playlist is like. This could require Alex to invest too much time trying playlists out only to find they don’t work for him, or taking a lot of time reading playlist titles that don’t really help in his search. Both of these issue will lead to confusion, frustration, and perhaps the loss of a user to another platform that does this feature better. The best outcome for Alex would be the ability to quickly find playlists that meet his criteria so he can choose the right playlist and get back to work. Let’s take a look at Alex’s user journey as he engages with the platfrom.

The user road-map of Alex’s experience with Spotify and finding good study music

As we see in Alex’s journey the pain points start with finding the right place to search for new play lists. Replacing ‘Browse’ with ‘Search’ is actually one of the improvements that Spotify has already made to alleviate user confusion and it was obviously a good call. Our next issue is encountered in the results section for the search query ‘Electro Focus’. If you look at the example screen shot below you’ll see the modern UI that still has some of the problems that Alex highlighted, including matching songs and albums coming before meaningful playlist results. A nice newer feature is that on a wider screen, you get more that three results at a time, though there is still the issue of a ‘SEE ALL’ in the upper right corner of each section rather than a carosel feature. Another positive to Spotify’s UX/UI team is that we do get an exact match Playlist as the ‘Top result’ which could be an instant solution to the user’s search if it is a quality playlist that meets the user’s taste, but that is a big if.

A screen shot of the current Spotify UI with search for ‘Electro Focus’

As we take a look at the last painpoint, that of actually picking a playlist, we can see from our current screen shot that this problem persists. The point of confusion stems from a lack of clarity about the style, tempo, lyrical content, and mood of a playlist based on just a title and a tangentially aligned image. This is something that I personally have experienced as music taste is something that is very subjective and a title can not possibly convey enough information to make an informed choice. Working through Alex’s user-journey and seeing the UX though his eyes I also encountered this issue and had to try 2–3 playlists each time I tried to settle in for some studying. Over time this issue is reduced as the system learns your tastes and you save playlists which are displayed in the lefthand sidebar. In the following mock up we can see the first suggestions I would make to resolve some of the pain points that Alex and similar users.

Number 1 has been resolved with ‘Browse’ being changed to ‘Search’. Number 2 is also part of the current platform and by saving playlists that a user enjoys they can quickly access them in the future. This second point could perhaps use some user education around leveraging liked playlists and even starting the radio feature based off a playlist. Number 3 would be show recent searches at the top of the search initial screen (The screen you see when you first click on search from the left hand menu) so that a user can quickly track down recently searched playlists. Suggestion number 4 would be to incorporate the ‘Moods’ categories that Spotify uses elsewhere into the initial search screen.

A sketch of UX/UI changes to the Spotify search screen

From these suggestions the new user-journey that I envision for Alex and similar users would be to seek out playlists via the mood ‘Focused’ or the genre ‘Focus’. In the current Spotify meta, I have found many of the playlists that I use during working / studying via the live version of this system the genre ‘Focus’. User education and highlighting could help users find their way here so that appropriate playlists are easily found. The updates that I would institute to this initial screen would be to bring back the old tagging system where playlist tags are publically displayed. By having tags at the top of the sections so a user can additively select them would narrow the options to only playlist containing some or all the selected tags. This option would also include the ability to search tags and add those to you search for playlists that include selected tags.

A mock up of the Focus screen from the moods options.

The final mockup shows that we have 4 tags selected (#1); ‘No Lyrics’, ‘Chill’, ‘Jazz’, ‘Electronic’. With these four tags selected we get an assortment of playlists that feature these tags. Based on the screen size of the spotify player we are presented with three initial options with the ability to view more based on the arrow to the right which will advance the carosel. The playlists with the highest number of selected tags will rise to the top of the list and be displayed first giving the highest chance of meeting the user’s needs. The other changes to this screen I would recommend would be the viability of tags (#2) in addition to the Title of the playlist, and a short description of the playlist (#3). The playlist’s creator would be required to add up to 5 tags and a short description when they create the playlist. This additional information would make selecting a playlist much easier for the end user. A possible additional option would be to allow listeners to vote on if a tag is accurate or not, and to suggest replacement tags if tey feel like a tag is not actually accurate for a playlist.

A mock up of playlist search based on tag selection

These updates would, of course, need to go through thorough A/B testing and user-journey research before being implemented. That being said, I believe that a few small changes including the implementation of user voted top tags for a playlist and a short required description of a user generated playlist could really help in finding new music that works for specific situations like studying or focused work. A user like Alex, and for the mater myself, is interested in finding new music generally but ofter that music is used to block out the world and get work done. To that end finding playlists that fit specific criteria quickly and being able to get back to work is essential. This research is all about making the user experience better and trying to help end user’s journies flow through the platform with minimal pain points.

As an added treat here is one of my favorite coding/working playlists:

Happy listening!

--

--