The goal of this exercise is not to only create a user interface that puts simplicity, usability, and design consistency as top priorities but a product that would be meaningful to users and Facebook as a whole.
Music plays an integral part in our culture, whenever humans come together for any reason, music is there. It brings people together, creates relationships, and hardens bonds—what could be more meaningful than that?
Music sharing. Remember those 'music DJ rooms' that popped up five years ago? — plug.dj and Turntable.fm — where you stream music together live with friends. They were great ideas on paper, but what they were lacking, was the social integration; people didn't continue using it, it was just a fad.
One thing that is now become apparent: the advantage of integration with an already strong base. As we're on the topic of Facebook, look to the introduction of 'Stories' in Instagram, the FB App, and Messenger. Facebook has whats needed for most of the 'chicken and the egg' ideas to succeed. It has not just one of, but THE most concrete social media base there is. I believe that the concept of music sharing could be making a huge comeback— seeing the success of Facebook's Live platform—and the fact that some are creating 'music streams' with it. You should look to how your users are using and creating with your product to be able to plan your next step.
But first, the basic music streaming service.
I always begin initial designs in greyscale. This allows me to effectively create harmony between the shapes, positioning, and proportions themselves. Color should complement the experience not be it.
With the original ideation on the left, the first refinement in the center, and the final refined interface on the right. The final version is refined with design consistency, spacing, and icons in mind. The former uses a heart as the like button instead of the traditional like, later changed for consistency with the rest of the messenger app.
A distinctive feature is the 'friend bubble' is a social element where you can see which friend likes/recommends this song. The original showed 3 friends' profile pictures, which ended up taking too much real estate and looked too repetitive, so it was moved to the right with the number of likes displayed instead, with the ability for you to tap to expand to see the 'liked by' list.
The final version has even more refinements to placement, icons etc. The repeat, shuffle, and share buttons were moved to a single menu as they were cluttering the screen.
With the final touch of color and visual sugar, the final product has it all there: visual appeal, usability, and altogether harmony.
Overall, most of the interface should be self-explanatory as it was designed to have no learning curve, everything is where you'd expect it to be.
Motion is there to create emotion. The movement of the waves adds a unique and meaningful feel to the music listening experience. It's not just there to look pretty. The timing of the waves is to match the bpm of most of today's music, meaning it should be able to add feel and emotion to 90% of the music you play.
Again, as everything is where you'd expect it to be, no learning curve or explanations needed.
Now onto Live Radio.
Live radio works on the principle that anyone can be a DJ. In your live radio feed, you have a mixture of friends' currently live streams and sponsored streams. You have the ability to comment live, exactly like a standard FB Live.
The addition of sponsored radio stations will allow for revenue from the service, artists can also sponsor their albums/tracks to be placed on the front of the browse page or recommended to users.
With its direct integration in Messenger, it's one less app to use, and music listeners will end up using Messenger more often, not to mention sending music to friends, etc. Especially encouraging teens to use Messenger more.
Then there are DJ rooms, which allows everyone in a messenger group to add to a live playlist and listen together. And the interface for the DJ hosting the live stream. I will be continuously adding to this project.
Designed in Sketch. Prototyped in Origami.
