ROLE
Design Lead (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 the 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.
"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, interactions between the playlist creators and the listeners are rather limited.
The creators distribute their playlists 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 sharers to contribute to one 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. The feeling of sharing the same moment is very powerful and can generate unique user experience.
Chat + Playlist
Groov provides a chatting feature along with a music player. While listening to music, users can share thoughts via text format. Groov chat prevents users from going back and forth to another messenger service to communicate with other users.
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
MOODBOARD
WIREFRAMES
EARLY SKETCHES
Low Fidelity Prototypes
The main page features a list of channels that can be sorted out by recently visited channels, channels created by the user, favorited channels, and popular channels. The list shows each channel's name, number of users, and the current song playing. The setting menu is accessible if the channel is created by the user.
On the right, the feed shows current activities happening in Groov, informing the user of how active Groov is.
Channel / user search feature allows searching 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 a music player. Giving an equal screen real estate to both functionalities aligns with Groov's product vision - music and communication together create synergized user experience.
The music player only features play/stop button to allow limited controls.
High Fidelity Prototypes
UI elements on the channel page balances opacity and transparency to blend in the UI components, yet make them clearly visible on any live Youtube video as background.
A search drawer UI reduces search and 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 on the playlist.
A/B TESTING
Startups move fast and we lacked time or resources to conduct extensive user research. As an alternative, we adopted 'build fast and fail fast' mantra and relied on 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 Groov's product vision of sharing and feeling empathy.
Background with Youtube video playing
Background with blurred thumbnail image
Through A/B testing, users expressed that the videos playing in the background gives more dynamic feel than the blurred image. Also, videos could open up the space of content 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
Some users expressed the needs to have a full screen video. 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.
Modal Design
MOBILE WEB INTERFACE
