Lead Designer | Design Strategy | UX/UI | Brand Identity
Groov is a web-based music sharing platform that allows users to create a collaborative playlist. It augments the experience of sharing sentiments through music. In Groov, music is synced with all sharers and everyone gets to listen to the same part of music and feel as though they are listening to music with others physically together. With a chatting section next to the playlist, users can also share their emotions in text format. Groov launched its beta service since November, 2015. Ever since, it has been accumulating a large number of users on a daily basis. Also, there are a number of heavy Groovers who own several active channels and turn on Groov whenever they are using computer. I was in charge of the design for Groov as a lead designer. Now, are you ready to Groov?
"I always have Groov on one of my monitors when working. Even when I don't have my headphone on, it's nice to have it there because the music videos create ambience."
"After I started using Groov, I can't use any other music streaming service anymore. The process of adding music is extremely simple and intuitive."
"The design does it all."
-Excerpts from Groovers' feedback in December 2015
Groov Design Process
1. Problem Statement
- Profits in music streaming service is replacing those in music file download service
- Korean digital music streaming market had 19.2% of growth in 2014 (IFPI Report 2015)
- There are 41 million music streaming service subscribers worldwide, which is fivefold of the number from 2010.
But in this swarm of streaming services, are we really consuming the music in a satisfactory way?
Let's take a look at this closely.
There currently are a lot of music streaming services that allow users to share their playlists. However, the listeners of the playlists are only able to use them in a passive or in an unilateral way. The interaction between the playlist creators and the listeners are limited.
Our solution to the problem is a web-based collaborative music streaming service where anyone who is sharing the playlist can add music and contribute to the playlist. In this way, all users are consuming music in multilateral way. With this high-level concept in mind, we started developing detailed design concepts and features.
2. Design Concepts and Features
The design goal of Groov is to augment the experience of sharing music, emotion, and reminiscence with others. Based on the goal, we came up with five design concepts.
(1) We're listening to this together!
Music player in 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 is to blur the line between physical and digital world and to translate the interaction in physical world to the digital. The feeling of sharing the same moment is very powerful and can generate unique user experience.
(2) Channel = Chat + Playlist
A channel consists of a playlist and a chatting feature. In order to provide a medium to facilitate the interactions between channel users, we allocated half of the screen to chatting. While listening to music, users in the channel can share thoughts via text format. Chatting feature prevents users from escaping by allowing them to communicate on Groov itself, instead of through another messenger service.
(3) Private & Public Channels
In private channels, users can share the playlist only with the people who they invite. Groov's private channels can be a place where close ones share intimate feelings. In public channels, anyone can visit and contribute to the playlist. Public channels provide a space where people share their music tastes publicly and create a sense of community.
(4) Just like a radio DJ
Groov empowers the user to be a DJ! User can choose songs that they want to share and queue them up in the playlist. While channel participants can only add music and delete the ones they added, the channel creator has the full control of the playlist. He or she can not only add, but delete any songs on the playlist and change the order of playlist.
(5) Expandability of Youtube Contents Source
All contents in Groov are pulled from Youtube. The video playing in the background adds a unique style to Groov design. Moreover, the use of video contents from Youtube expands the service domain of Groov from music to video streaming. It can even expand further and the users do not necessarily have to limit the categories of shared videos to music. They could be a series of makeup tutorials videos, yoga videos, or your favorite show clips.
4. Information Architecture
*This information architecture was created in February 2016. The current Groov service may have different information architecture.
These are some sample wireframes.
Here are some notable UI design points.
- An equally divided screen into two
We decided to allocate half of the screen to chatting and another half to the music player. Although Groov's main function is to share music, we found an equally important value in the chatting feature because that is where communicating interactions between the users would occur. We wanted the users to immediately know what we expect them to do with Groov. With this equally divided screen, users would know right away that Groov is a music service with chatting feature.
- Transparent UI look and feel
We wanted to have the videos from Youtube to be played as a background. We thought this would engage users deeper and create more lively and dynamic ambience in Groov. Because we do not know what videos the users will put into Groov's playlist, we had to design an interface that could be visible and clear with any backgrounds. At the same time, the videos in the background should not be disturbed by the UI so that the users can watch and enjoy the videos. This is why we wanted a UI that has transparent look and feel.
- Hide unnecessary features and keep it minimal
To not to disturb the users as much as possible, we tried to hide a lot of features and keep it minimal on the screen. For example, we utilized hover effect to hide the song deleting function on the playlist. We also kept other complex features such as searching for a channel, managing channels, and user search all in the main page to make the channel page as simple as possible.
This is the landing page of Groov. The background shows four different screenshots of videos that are currently being played in Groov's top 4 popular public channels at the moment.
This is the main page. The main page features 6 most popular public channels that are active right now. This is to give the user an idea of how much activity is going on in Groov right now and give him or her suggestions and recommendations on which channel to join. The menu on the left shows the user's channels and the recent channels the user visited.
This is the channel page. The left side of the screen has a chatting feature and the right side has music player. The final design has even more transparency than the previous iteration.
The search drawer is opened when the user clicks on the search button. The drawer shows recommended music videos for the user. When the user types in the keyword, can search for music from Youtube. Clicking on the music video will automatically add the video to the playlist.
The channel drawer is opened by clicking on an arrow button on the left. In the channel drawer, the user can access to his or her profile, create a new channel, view and access my channels and recently visited channels.
This is a modal that appears when the user is creating a new channel. The user can choose a channel name, set privacy of the channel, and add channel description tags that will be used when the other users search for the channel.
After we launched Groov on web, we received a lot of request from the users for a mobile version. As we did not have enough resource to build an app, we decided to quickly design a mobile web version of Groov. No all features in Groov could be translated into the mobile version. For instance, we could not implement the synced player in mobile web. Here are some mobile UIs of Groov.
This is the main page on mobile web. The page shows the most popular channels that are active right now. There also are two tabs: My Channel and Recent Channel.
This is a page when the user is inside a channel under "chat" tab.
The screen will scroll up when the user types something. This is how mobile web behaves.
This is a page when the user presses "playlist" tab inside a channel.