Designing Spotify's Friend Activity on mobile.
On Spotify's Desktop app, users can navigate a sidebar that shows their Friends' listening activity. The sidebar looks like this:
This is an awesome feature that distinguishes Spotify from its streaming competitors. I am an avid user of the Spotify desktop app and the Friend activity feature.
The Friend activity feature is not available on its mobile applications. Spotify users would like this feature to be available on mobile. Below is a screenshot from Spotify's Live Ideas forum, where people can suggest improvements to Spotify. This idea has received 734 votes since it was suggested in mid-2015.
And here is Spotify's response from February of 2017:
Evidently, Spotify has considered the idea and decided not to implement it. They must have their own business reasons. Perhaps this feature is not a high priority for the organization, or they are intentionally leaving it out of mobile to attract more Desktop app downloads. Regardless of their reasoning, I believe that desktop and mobile experiences should aim to be as similar as possible. I also couldn't pass up the opportunity to explore what the Friends Activity feature could look like on mobile.
Translating Desktop friend activity onto iOS
The activity cell has 5 key pieces of information:
Context (i.e. whether the song is being played from an album or playlist)
Time since listening (replaced by a speaker icon if the friend is currently listening)
Save for the time information, each piece is interactive and navigates you to the relevant screen (i.e. tapping on Tame ImpaIa takes you to their Artist profile). I felt that these 5 pieces of information on a cell in Spotify's mobile app would be too much. I began to prioritize by only including the Friend name and the song title.
I asked some Spotify users what they thought about only being able to see the song. Most of them wanted to know the artist, as well. After all, some song names are very common (ex: "Intro"). I added the artist.
The activity cell was starting to shape up well. I put several cells in a row, and placed the row component at the top of the Home screen.
Two problems emerged out of this design:
The row occupied a serious amount of real estate, displacing the Made For You section almost halfway down the screen.
Even with only 3/5 pieces of information on the activity cell, the touch points for each actionable piece of information were very small. This could lead to some confusing interaction design.
It became clear that my initial assumptions of limiting the Friend Activity information had created a problem where it was very difficult to prioritize what to show and what to omit.
I saw an opportunity in using a modal popup, similar to the one used for showing more information about a song. I could save space by limiting the details shown on the Home screen activity cells. Then, I could design a similar popup for showing the 5 pieces of activity information.
Current song detail popup on Spotify for iOS
For this design pattern to work, I set out for a more lightweight activity cell. In this next iteration, only the name of the friend is present, with the familiar ellipsis suggesting that there is more information to be shown.
From a utility perspective, this activity cell design seemed to do the trick. However, it was not a good use of space and composition. I went back to the drawing board, remembering to consider what the end user would like to see. It was clear that the activity cell would have to be minimally designed, so I asked my friends what they liked most (or least) about the Friend Activity feed on desktop. Their responses included:
The theme of activity/inactivity kept emerging. The Friend Activity feed on desktop makes a clear distinction between who is active and who is not, so I sought to emulate that distinction.
In this activity cell, the green outline around the friend's picture indicates their activity, the grey indicates inactivity. Both cells are still interactive to view more information about the activity. This activity cell design also translated well onto a row component.
A quick glance at the row shows who's active and who's not. This design also solved the problem of the row taking up considerable space in the Home screen.
Designing the detail screen
Now that I had settled on a design for the activity cells on the Home screen, I began to design the detail screen. On-tap of each activity cell, this screen would be shown as a modal popup. I drew inspiration from the song detail screen on the Spotify iOS app. This detail screen shows all of the necessary information about the song. It also facilitates some very common use cases of looking at a song, including "Add to Queue", "Add to Playlist", and "Share".
Current song detail screen
I decided to duplicate the design of the song detail screen. By doing so, the user is exposed to a mostly-familiar screen, and intuitively knows its affordances. I added the friend name and picture, as well as the "time ago" information.
Detail Screen v1
I was content with this screen, so I showed it to several of my friends who use Spotify regularly. From their feedback, I found that they would like to see a history of that friend's activity, rather than go in-depth with all of those options about just one song. So, I iterated on the design.
Detail Screen v2
This detail screen shows a list view of songs the user has listened to recently. If they are currently playing a song, this is emphasized with its own list heading ("Currently playing"). From this list view, any of the songs can be tapped to play, or the familiar three-dot icon can be tapped to reveal the song detail modal view.
Designing for Implications
I just finished up a Systems Thinking course here at the University of Maryland, where we heavily discussed the consideration of implications in the design of complex systems (shoutout to Dr. Suarez). I decided to apply this mentality to this design exercise. It allowed me to realize a few things:
Consider empty states.
What if a new user just downloaded the Spotify app and hasn't added any friends yet? I emulated the empty state found on the desktop app and included a call-to-action that replaces the normal content on the Friend Activity feed.
Adding this row component to the home screen could affect engineering performance.
Without Stories, the home screen only has to fetch data once, but this new feed showing friend activity would require constant updating. I emulated the interaction design of other social media apps by including a pull-to-refresh interaction that only updates the Stories when needed.
This design creates a hyper-awareness of activity on the mobile platform.
Yes, the Friend Activity feature is available on Desktop, but adding this to the iOS mobile app could potentially introduce this new dynamic to millions more people. It makes sense that some users may not want their listening activity to be seen by their followers. I added a highly-discoverable toggle in the Profile screen of the app.
Don't design things in isolation. Always place components in the context of the screen to reveal more information about how they interact within the product.
Consider implications. It might take some more time to speculate on these implications, but doing so can indicate when more work needs to be done.
Peers are important. I wouldn't have been able to iterate so many times on this design without my friends telling me it could be better.