vpfbvb7dpzi-dawid-liberadzki.jpg

Groov

STARTUP PROJECT

JUN 2015 - MAR 2016

ROLE

Lead Designer  (End-to-End Experience)

 

skills

UX & UI | Visual Design | Concept Development | Design Strategy | Branding

 

OVERVIEW

Groov is a collaborative music sharing platform that augments the experience of sharing sentiments via music. In Groov, music is synced with all sharers and everyone gets to listen to the same part of music. This allows the users to feel as though they are listening to music with others physically together. 

Groov launched its beta service since November 2015 and ever since, it's been accumulating a large number of users.

Groov.fm

 

 

 

 

 

untitled1gif.gif
 
 

"I always have Groov on one of my monitors. The music video background creates nice ambience."      

"After I started using Groov, I can't use any other music streaming service anymore. Adding music in Groov is extremely simple."

"The design does it all."

-Excerpts from user feedbacks in Dec 2015

 


Problem Space

In current music streaming services, the interactions between the playlist creators and the listeners are rather limited.
The users simply distribute their playlist to other users who can only passively listen to the playlist.

What experience would make users feel like they are genuinely sharing emotions through music, not just receiving a huge list of recommended songs?




 

Design Solution

Groov, a web-based collaborative music sharing platform allows all the sharers to contribute to the playlist, transforming the unilateral way of music sharing to multilateral.

 

DESIGN CONCEPTS AND FEATURES

We're listening to this together!

Groov is synchronized among all sharers so that everyone is always listening to the same part of the song at the same time, as if they are physically together. This blurs the line between physical and digital world. The feeling of sharing the same moment is very powerful and can generate unique user experience. 

feature2.jpg

Chat + Playlist

Groov provides a chatting feature along with a music player.  While listening to music, users can share thoughts via text format. Groov chatting prevents users from going back and forth from another messenger service to communicate with other users.

feature3.jpg

Expandability of Youtube Contents

All contents in Groov are pulled from Youtube. Youtube expands the service domain of Groov from music to any video contents. Users can even share makeup tutorials, live concert clips, or exercise videos on Youtube through Groov.

 

 
 

Branding

 

PRODUCT KEYWORDS

:concept-01-01.jpg

MOODBOARD

 
 

PROTOTYPES






EARLY SKETCHES



Low Fidelity Prototypes

The main page features a list of channels that can be sorted out by the recent channels visited, channels the user created, user's favorite channels, and popular channels. The list shows each channel's name, the number of users, and the current song playing. If the channel is created by the user, the user can also access the setting menu.

On the right, the feeds show what activities are happening in Groov, in order to inform the user of how active Groov is.



Channel / user search feature allows the user to search for a specific user or public channels by typing in the name.



Channel page is divided into two sections: one for chatting and another for music player. Dividing the screen into two equal parts convey how Groov weighs the importance of music and communication equal.

The music player only features play/stop button to only allow limited controls.





High Fidelity Prototypes

Channel page with transparent look and feel of UI elements that could blend in, yet clearly visible on any live Youtube videos as background.



A search drawer UI that reduces search & selecting music process into two simple steps. By clicking on the videos that appear on the search drawer, the video gets added to the player and appear in the playlist.





 

A/B TESTING  

Due to the fast-paced startup atmosphere, I did not have time or resources to conduct extensive user research. Instead, we adopted 'build fast and fail fast' mantra and utilized A/B testing.   

 

BACKGROUND VIDEO

There were divided opinions among the team whether to have a Youtube video or a blurred thumbnail image as the channel background. There was a concern that the background video may be distracting and therefore, weaken the Groov's biggest concept of sharing and feeling empathy.    

 Background with Youtube video playing

Background with Youtube video playing

 Background with blurred thumbnail image

Background with blurred thumbnail image

 

Through A/B testing, users expressed that the videos playing in the background gives more dynamic feeling than the blurred image. Also, videos could open up the space of contents sharing  from music to all kinds of Youtube videos. Therefore, we decided to play videos in the background.

 

FULL SCREEN VIDEO FEATURE

 Background video in full screen

Background video in full screen

Some users wanted to have full screen video according to user feedback. I designed the full screen UI and tested out. But we soon learned that full screen video reduces the product value of being able to communicate with others while listening to music.

We decided not to implement this feature.  

 

Final Design

 

WEB INTERFACE

Landing Page

The background shows four different screenshots of top four popular public channels at the moment.  

Main Page

The main page features six most popular channels that are active right now. This gives the user an idea of how active Groov is right now and works as channel recommendation. The menu on the left shows the user's own and recently visited channels.

Channel Page

The left half of the screen has a chatting feature and the right half has a music player.

Search Drawer

Search drawer shows recommended music videos for the user. The user can search music by typing keywords and add the music to the playlist. 

Channel Drawer

From channel drawer, the user can access his or her profile, create a new channel, and view my and recently visited channels.

channel copy 3.png

Modal Design

 

 

MOBILE WEB INTERFACE