How to add a feature to Spotify keeping its minimalistic design untouched?
We started our 3rd week UX/UI Designing Bootcamp with Ironhack. Unfortunately, the German government decided about another lockdown and we moved to remote classes. This week we worked alone and our task was to add a feature to an existing app. I got Spotify and my feature was implementing Shazam into it. Let’s see how it turned out.
Why this feature?
Every day we are exposed to music, no matter if we are in a coffee shop, we are traveling, or even watching a movie. Sometimes we find a song fascinating, and we’d like to know what song is that. That was the reason why apps like Shazam has been created. On the other hand, how often are we in this situation? Twice a week or twice a month. There are some apps on our phones that we use extremely rarely and we never know where we can find them. That’s precisely how one of my classmates, Nils came up with the idea of implementing Shazam to Spotify. He said he listened to Spotify all the time but whenever he heard some interesting song he didn’t know where to find Shazam. When he finally did, the song was over. Personally, I don’t use Shazam because I never felt a need to have it. However, maybe if Spotify had a similar feature I would use it.
I did a little guerrilla research among my classmates and friends. All of them when they heard the idea of having the Shazam feature in Spotify found it as an excellent solution. After that, I needed to learn how Shazam actually works. According to Wikipedia:
Shazam identifies songs based on an audio fingerprint based on a time-frequency graph called a spectrogram. It uses a smartphone or computer’s built-in microphone to gather a brief sample of audio being played. Shazam stores a catalog of audio fingerprints in a database. The user tags a song for 10 seconds and the application creates an audio fingerprint. Shazam works by analyzing the captured sound and seeking a match based on an acoustic fingerprint in a database of millions of songs.
In the Shazam app, you can connect it with Apple Music and Spotify. Still, you need to use Shazam first and then another music app. The reasoning behind implementing this feature in Spotify was to use only ONE app at a time.
From the very beginning, I knew I wanted to keep Spotify’s very minimalistic design. I was also pretty sure where I’d like to insert Shazam’s logo. When I started designing a mid-fi prototype with a logo in the left upper corner I considered a second option that I also wanted to test. I designed two mid-fi prototypes. The first version had a logo in the upper left corner, where the second one had it implemented in Spotify’s navbar at the bottom of the screen. I moved on to test my prototypes.
The first idea of placing the Shazam icon in the left top corner seemed ideal since that’s the place that is empty on Spotify’s screen. Secondly, it’s opposite to the settings icon. It wouldn’t cause unnecessary mistakes like tapping accidentally on the wrong icon. However, in my test, I noticed people have problems with seeing the icon. It was a bit too small.
This seemed to be a bit better idea because it was more visible. Everyone who uses Spotify knows how the navbar looks like. It was clear there was something extra added. From my test, it came out as a better solution if we considered only the visual part. However, one of our tasks was to implement the feature as smoothly as possible. After talking with my testers, they mentioned one disadvantage of this option- I’d interfere too much into Spotify’s well-known design. That was also my concern.
After taking into consideration all of the pros and cons and my test results, I decided to follow the first solution I came up with. It was visible only on the Spotify homepage and was easily accessible for the users but still didn’t distract anyone. I designed a hi-fi prototype, Shazam screen was very minimalistic, I kept the Shazam logo, adjusted the font so it was cohesive with Spotify’s design. In animation, colors are changing from Shazam’s blue into Spotify’s green.
After 4 days of work, on Friday we had our presentations. Since 4 days is really not a lot, I felt my design and idea was good, but something was still missing. I listened to all of the comments and one thing came back more than once. In my design, you could access the Shazam icon only from the home screen. I did it on purpose because this feature is not something the user would use all the time. Since it was pretty important for people who watched my presentation and I still wanted to keep the logo visible only on one page, I decided to find another solution. One of my classmates presented WhatsApp and after his presentation, I came up with a solution.
I decided to hide the Shazam logo on other pages but it still would be possible to use it after dragging down the screen. The same as checking archived messages in WhatsApp. Below you can find the final version of my prototype.
Learnings from this week
After week 3 I’m getting more familiar with Figma. Being a perfectionist since a very young age, helped me with this project a lot. On the other hand, it was also very hard because I wanted to design everything perfectly. I managed my time very well, and I was ready with my solution almost a day before the presentation which I was very pleased about.