Enhanced Music Stalking
Adapting Spotify’s social features for mobile
I’m a huge music nerd, and one of my favorite pastimes is finding new music to listen to. One of my preferred ways of doing this is by stalking my friends’ listening habits on Spotify’s “Friend Activity” sidebar. This sidebar tells you the last song each of your friends listened to, or, if they’re jamming at the same time as you, what they’re currently listening to.
Unfortunately, this feature is only available on the desktop app. As someone who doesn’t use the desktop app very often, I wanted to try to adapt this feature for mobile.
Objectives
In adapting this feature to mobile, I had a bit of a challenge. Where would I put it? On the desktop app, it sits unobtrusively off to the side of the screen. On mobile, however, there’s obviously not enough real estate for a sidebar, so I’d need to figure out somewhere intuitive to put it so that it’s out of the way, but not so out of the way that you can’t find it. I also wanted to expand the scope of the feature and turn it into a bit of a news feed by including notifications about updates to playlists you follow and new playlists created by your friends.
Preliminary Research
Before anything else, I needed to figure out whether this was a feature that anyone besides me would even use. I searched Reddit and the Spotify Community forums and found a good number of posts (some with thousands of likes/upvotes) requesting the feature.
This was enough confirmation for me, so I began working on answering my main question: where do I put it?
Phase 1 — Where should it go?
Over the past few years, Spotify has been simplifying their UI, and as part of this simplification, they’ve reduced the number of items in their navigation bar from 5 to 3. I wasn’t sure this feature warranted undoing their simplification and adding another item back to the nav bar, so that wasn’t an option.
Aside from the nav bar, the place that seemed the most intuitive to me was somewhere on the ‘home’ screen. After experimenting with a few different locations, I decided that it made the most sense to put it at the top of the page next to the settings icon.
I made a quick prototype and took it to the hallways at school for my first round of user testing. My objective with this first test was simple: see if people would easily be able to locate and identify the icon for the Friend Activity page. At this stage, I only wanted to test with people who were already Spotify users, so after first briefly explaining the project, I asked the would-be participants whether or not they used Spotify and turned loose the ones that didn’t. I ended up testing 20 Spotify users in total. For the test, I handed them my phone with the prototype, asked them to tap where they thought the feature would be, and then observed. With only one exception, everyone was quickly and easily able to find it. Success!
Phase 2 — How should it look & work?
Now that I had the location ironed out, it was time to move to the layout of the page itself. For the most part, I wanted to keep the look consistent with the desktop version. As for the playlist updates, I decided to mix them in with the friend activity items news feed style. I also had the idea to create a section similar to the existing “Heavy Rotation” feature called “Your Friends’ Heavy Rotation”, which would show you songs, albums, and playlists your friends are listening to a lot.
I added this page onto my prototype and was ready for user testing round 2 when COVID-19 hit. Hallway testing was no longer possible because classes were moved entirely online. Since I was now trapped at home, I decided to test it with the 3 family members trapped in the house with me. For the test, I handed them my phone with the prototype and quizzed them on different elements of the Friend Feed to see if it was easy enough to parse. I asked them things like “What is Lily-Grace listening to right now?” and “What playlist did Spotify add songs to?”. They didn’t have any difficulty. Considering their level of tech-savviness (not high), I concluded that I had accomplished my goal of laying everything out in a way that makes sense.
Phase 3 — Can it be better?
At this point, I felt like I had a pretty solid design that checked all of my objective boxes. I still wondered, though, if there was anything I could do to further improve it. I decided to experiment with separating the listening-activity items from the playlist items instead of having them mixed. I was curious if this would simplify things and increase usability.
This time I took both designs to my captive audience for user testing. In a sort of A/B test, I asked them which of the 2 designs they preferred. All 3 said they preferred the first one with all of the elements mixed on one page over the second separated one. Their reasoning was that they liked having everything on one page instead of having to tap an extra time to see everything. The original design prevailed!
Conclusion
Overall, I feel that I was able to solve the problem I set out to, or at least get pretty close. Obviously, the world health situation put a damper on my ability to do proper user testing, and I’d love to be able to test both designs on a broader group of people. However, I did learn some valuable lessons about adapting to unforeseen circumstances and, though my testing was somewhat limited, I also gained some important insights into the power of iteration and user testing.
