Project Overview

My focus was to analyse an existing app of my choice, and incorporate a new feature into this product. Given that my design partner and I have a strong mutual interest in music, we decided to brainstorm ideas for a Spotify feature, before settling on the concept of a “song locator”. From personal experience, we know that finding social settings such as clubs and bars that play your favourite music can be a difficult task. Being stuck at a venue that doesn’t cater to your music taste can often have a negative impact on your mood, and thus we looked to build a feature in which users can locate the tracks they love in such venues. With this concept, we not only aimed to help users find where their favourite music is played, but also enable them to discover new venues that they can browse through, save to their library, and attend in future.

Role Duration Team
UX/UI Designer 1 week Lisa Veenstra (UI/UX)

User Research

Given the restricted timeline for this project, we had to gain user insight as quick as possible. To do this, we opted to conduct guerrilla research. We asked some Spotify users for their general thoughts and input regarding music played in social settings such as clubs, bars and restaurants, and whether this affected their overall experience when socialising - positively or negatively.

Through this research, we discovered that users:

• Strongly value the importance of “good music” in venues.

• Don’t have a way to discover venues that truly match their taste in music.

• Waste unneccessary time searching for a venue that suits them.

This helped validate our assumptions in regards to the importance of music played at venues, but also the time-consuming nature of physically entering different venues to understand their music choices, as oppose to knowing exactly what music is played their on arrival.

Persona

We then developed a user persona based on our findings to represent the needs and characteristics of our primary user. We empathised with Louise’s main concerns and bad experiences regarding unfavourable music in venues, and better understood her needs going forward.

User Journey

We then created a user journey map to illustrate our primary user’s current path. By putting ourselves in Louise’s situation, we were able to identify the parts of her journey that were causing stress and disappointment. This provided us with an understanding as to where in her user experience needed improvement in order to resolve our user’s most glaring, current pains.

User Flow

From our research, we gathered that saving time had to be a primary objective of this feature - users needed the ability to quickly discover venues close to them, that matched their music taste. To accomplish this, I created two user flows that display how users can search for venues playing their favourite songs, and how they can then add these venues to their library, to keep them saved for future purposes.

This flow demonstrates the path in which users first initiate the song locator feature, through to the selection of venue. Users can find the feature within the options section of any chosen song, which they will then be if Spotify can have access to their current location - this is to locate venues nearby to the user, that have played the song.

Once the feature is enabled, users can apply filters to the map in order to narrow down the type of venues they are looking for their song being played in. In this instance, the user selects filters their search to “Clubs”, and selects a club from the map.

Once a user has selected a venue, they can press “See more” to display the venue’s full Spotify profile. This gives users a better understanding of what other music is frequently played at this venue, and ultimately helps them decide whether they would be interested in attending. This flow demonstrates a user viewing a venue profile, adding it to their library, and then viewing it within their library.

If a user is interested in a venue, like in this user flow, they can press the “Heart” icon to add it to their library. If they change their mind, they can simply press this icon again, and it will be immediately removed. Once in their library, users can apply filters such as “Recently added” to easily find particular venues they have saved. Users can also view their venues in list format, or on their map, as displayed by the alternative endings shown in this flow.

Style Guide

Before commencing our prototype design, we first compiled a style guide encompassing the primary aspects of Spotify’s design system. This heavily benefited us in achieving an accurate replica of their user interface, and generated a much faster workflow going forward.

Testing & Iterations

After first sketching lo-fi frames, to then creating a mid-fi prototype, we conducted usability using this mid-fidelity prototype to observe how users would interact with the new feature, and gather constructive criticism on areas in which users felt dissatisfied with the product. Upon testing 5 Spotify users, we received valuable feedback which we used to make necessary adjustments when creating our high-fidelity prototype.

Firstly, all 5 users stressed their discontent regarding the filters feature, which was described as “impractical” and “time-consuming”. The cause of their concern was due to the filters disappearing when they scrolled down through their venues, meaning they kept having to scroll to the top of the page to access these filters.

To iterate upon this, we fixed the position of the filters, including the search button, allowing users access to them at all times. This saved users time and stress when adjusting filter settings, and kept users more engaged when exploring the feature as a whole. Upon conducting usability testing with the improved, high-fidelity prototype, this was no longer an issue among users.

Throughout usability testing of our mid-fidelity prototype, what caused the most confusion was the “Added to Your Library” pop-up. When instructing users to navigate to their library, they were confused as to why, as they had not registered that a pop-up had appeared on their screen, nor had sufficient time to read it.

Going into our high-fidelity prototyping, we decided to double the duration time of the pop-up, as we felt as though this would give users enough time to notice and read the pop-up. It was also important not to increase the pop-up duration to the point where it remained on-screen for too long, in instances where a user may not be interested in pressing it. We took this into account when deciding the new pop-up duration. Upon further usability testing of our new prototype, all 5 users tested had acknowledged and understood the pop-up, and had no trouble or queries when navigating to their library.