Jukebox
Jukebox is a place to discover great music - from old classics to latest chartbusters. It is the intranet music player of IIT Roorkee. We decided to make it incredibly simple and easy to discover new music, see what is trending or find a track, album or artist.
My Work

Being the only designer in a team of 3, I designed the information architechture, wireframes, interaction design and visual design for web. Starting from the trending songs page, I worked on the artist page, album page, playlists and global search.

Ideation

When we started working on jukebox, we had a pretty good idea what we wanted Jukebox to be. It would be a really simple place to discover and listen to great music. The team got together and we decided to focus on following areas -

1. Homepage that shows the top 50 trending songs
2. A list of artists. When I select a particular artist, it must show me all the the albums of that artist.
3. A lists of all albums
4. Search
5. Play Queue
6. Playlists
7. And of course, a song player with all the basic functionality

Here is an early visual exploration of the trending songs page.

Trending Songs

This screen, also the homepage of Jukebox shows the top 50 trending songs at all times. And since, it shows trending and not all time top songs, the score of each song (number of clicks) is halved every two days. So, in order for a song to trend for a long time, it has to played over and over otherwise it will move down the list.

Artists

The artist view in earlier design was just a list of artists in alphabatical order and when you would select a particular artist you would be taken to that artist's page.

As the design evolved, we clubbed the two views together as it would save the user the trouble of going back and forth between the two views and make it easier to navigate through artists.

Albums

The layout of albums in Albums view was kept asthetically the same as that of albums listed in the artist page but with a larger album art because why change something unnecessarily and it would make a lot of code reusable.

We used the same navigation technique with albums as with artists. The alphabatical list of various albums is present on the left and when an album is selected it open on the right.

Song And Album Interactions

While designing the new interaction pattern, I started with a single track - what all actions could I do on a single track on Jukebox. Once interations for a single track were setup, they could be easily applied to albums and artists.

Losing The Header

We got rid of the conventional header at the top. We were using high resolution cover images for artist pages and huge albums arts. As we already had the player fixed at the bottom, having a header at the top made everything appear dwarfed.

If we had a header, it would primariliy serve as the space for the logo, the searchbar and user options.

Search

So, we made a huge tradeoff by losing a conventional, big, simple looking fixed seachbar at the top when we decided to lose the header. Now, the search bar was nowhere to be seen except for a small search icon on the bottom player.

But once you clicked the search icon you got this entire screen for search on which you had to just start typing and it would look for songs, albums and artists. It had to be fast and the user must get the desired result on the quick results window itself.

As we didn't really have any other input fields on the entire app except for search, we thought,"why not start searching for results whenever the user starts typing"! It would be as simple as thinking. As soon as you think of a song, just start typing it and jukebox will search it for you. No need to reach for search field. And you go back to the previous view by pressing Esc so that you don't have to move from your keyboard.

What Made The Cut

After numerous iterations and taking out as much as we could, this is what made the final cut.

What I Learned
Process is just process

One process doesn't fit every project. The best process is the the one that suits you and your team. The best tools are the ones you are fastest with. The thing that matters is to hold the vision and to know how to build it.

Say no to most things

Yes, one of the most important things I learned. As you start to get something in shape and it starts to come together, it's very easy to get excited and lose your vision and hence the core value of the product. It's very imporant to make sure that whatever it is that you're building is not trying to do too much. When you started building it, you had that one problem in mind that it would solve. Keep that in vision.

Using the product

We wanted to build a product that we ourselves would love to use. And while building a product it's very eary to miss some invisible UX issues. They need to be discovered by using the the product.

Design a lot of stuff and throw a lot of it away

When I started designing jukebox, one day I would throw together something in photoshop and the next day I would think, "This is just stupid! What was I thinking!" and I would throw it way. I would try something else the next day. It's really important to sleep on it. It helps you envision what you want to build and more importantly what you don't want to build.