Web App based on Spotify API
launched @ www.mycircle.media
Figma, Adobe XD, After Effects, React
Aug - Oct 2020
The My Circle team consists of 2 full-stack developers, 1 product manager and I as the product designer.
40,000 tracks are added to Spotify every single day.
Naturally, I was getting fed up with sifting and sorting through the countless playlists and sections of the streaming platform to find good music. If music can be equated to food, I'm a picky eater. I don't want to "taste-test" every single playlist an algorithm has curated for me.
There must be a better way to discover new music..
After speaking to several of my close friends about this problem and asking about their "do-nothing-about-it" approaches to music discovery, we agreed that it was becoming difficult to keep up with the amount of music being released these days, let alone the good music!
I saw an opportunity for design here.
My design method is a 5-step iterative cycle towards building a better product with increasing functionality.
1. User Research
I conducted several interviews to better understand how people currently discover new music by following these criteria:
- Analyze what action a user does, how they do it and why they do it that way.
- Try to gather pictures or concrete examples of user activities.
- Be neutral about the topic and don't jump to suggestions or conclusions.
- Ask open-ended questions.
- Look for inconsistencies between what people say and what they do.
- Take a vocal recording with permission.
I had participants walk me through each of the ways they use current streaming platforms and the internet to listen to new music. With the above criteria in mind, participants were quick to share what they didn't like about the current streaming experience indirectly through our conversations. Top rated and algorithm-generated playlists become predictable and banal for users.
Through interviews, I deduced that one of the most effective ways to learn of new, good music is through word-of-mouth. One participant, for example, was interested to realize that her love for heavy-metal music today originated from the influence of her close group of friends in high-school.
Perhaps it would be worthwhile to facilitate the social experience of a close friend circle online by the premise of discovering new music by word-of-mouth. Not yet implemented by streaming platforms like Spotify, I saw potential here for a novel solution.
2. Define Problem and Hypothesis
Today's music consumption is dominated by streaming platforms and with the ever-growing amount of content, it is becoming increasingly difficult for users to discover new favourites through the current algorithms and online forums. Recommendations on streaming platforms are currently based on your own listening patterns or the top listening charts. This becomes a problem when you want to listen to all-new music that you are not aware of or that does not get detected by algorithms.
My design hypothesis is that users will appreciate the experience of discovering new music virtually through their friend circle; an experience that is familiar and trusted but not already facilitated through apps.
Also, finding music through friends has sentimental value and facilitates relationship building, something we may lack in a healthy way with other social networking apps today and with restrictions on gatherings post-COVID.
Before jumping into ideation, I had to research what was technically feasible for a solution to my problem. I knew My Circle would require a user's personal contacts list and linkage to Spotify's API. In fact, one of the reason's I embarked on this design journey was because of how open Spotify is about sharing their API with the developer community.
There were certain caveats to account for during this redesign:
- Neither Google or Facebook offers an API allowing for sharing of a user's friend list/information so My Circle requires its own database to be developed where friends are to be added manually by users (causing friction for new users to add friends, challenging for good UX)
- Spotify's API does not allow direct playback of songs viewing a web app on mobile device (so a UI for both web app and iOS device is to be designed)
I juggled between several ideas for the home screen interface. One was a simple playlist interface which simply creates a list of all your friends top songs for a user to play or shuffle through, much like a traditional MP3 Player. I also thought of a Tinder-style interface which allows users to flip through friend "cards" and play through each song. This is very effective in my opinion for matchmaking and social networking at larger scales.
I was initially set on an interface which directly displays your friend circle on the screen which has a minimalistic feel. Unfortunately, this limited the potential for more design possibilities later on once the app was developed and capped the list of songs to listen to at 5-6 tracks. Also, A/B testing showed users found it confusing to switch friends in the circle using touch.
I attempted using the Tinder-style interface and was pleased with its results.
4. Revised Prototype
Log In & Home Screen
Play your friends' most played songs to date.
Keep your favourites by adding songs to the Liked playlist.
Something to note here from the above prototype is that every person has a different music-listening habit. Therefore, the rate at which a friend's list of most played songs changes will be unique to each friend in the circle. It may be logical in future iterations to recommend or "push" the active friends in your circle whose list of top songs has changed recently so you discover new songs more effectively.
Typography and stylings
Because of the focus this app has on close friend groups and bonding through music, the colour scheme is inspired by a campfire (orange glows and ashy grey).
Based on inertia of swiping through your friends' circle, I implemented a scroll wheel at the bottom of the UI for easy searching by alphabetical order as one's circle grows.
5. Test and Reflection
With usertesting.com, I was able to iterate on my apps functionality through A/B testing. I was pleased to see participants in the test were excited about the idea and found the interface easy to use from the beginning.
Ideally, I do see My Circle as an add-on to currently existing music-streaming platforms, however I wanted to prototype a stand-alone user experience to experiment with my own branding, fonts and particular UX design. I also maintained the dark mode colour scheme to be consistent with Spotify, also because it is more pleasing to the eyes in both night and day and accommodates colourful cover art and icons.
Since the conception of the idea, I am now managing the development of mycircle.media which is a web app built on Spotify and Google API's. This is the MVP app being tracked for actual quantitative metrics such as average session length per user and daily/monthly traffic.
So far we have grown a small community of users since launch that are interested in sharing their music with friends. The aim is to also have this app featured on Spotify's developer showcase for further promotion as well as enhance the UI on web.