homepage sketches

The first thing I tackled was figuring out a layout for the homepage. The old homepage had so much information crammed into it. I wanted to give the content more room to breathe so it would be easier on the eyes.

That being said, I also wanted the DJs visiting the site to be able to easily find what they were looking for. One thing I had to pay careful attention to was the "Beatport Top Ten" which is super important to DJs. I had to ensure the first few tracks were always visible immediately upon entering the site.

desktop homepage

My team and I decided that a dark color scheme was best for the site because it echoed the feeling of being in a night club. Black also feels more "pro", which we liked since the store was aimed at professional DJs.

The color scheme I chose was neon green, blue and pink. Neon because, again, I wanted to replicate the mood of being in a DJ set, which always utilize bright, colored lights. Green because it was Beatport's existing brand color, blue was also borrowing from Beatport's existing color scheme, and pink because I wanted to give the site some edge.

I had to defend my choice of pink because some of my coworkers were afraid it was too feminine. But my argument for using pink went two ways. First off, there are some amazing female DJs out there, so why are we focusing on make the males feel comfortable? And second, I find pink to be an exciting, energetic color. Brands like T-Mobile and Dribbble use it well without feeling "feminine", so why couldn't we?

desktop player

We decided to move the player from the top to the bottom of the screen. Putting the player on the bottom felt more in line with what users are used to, such as with Spotify or Rdio (RIP). We also wanted to make the player feel less crammed with information, so we added an "info" pop up which holds extra meta information.

mobile player closed

mobile player opened

Fitting everything into a mobile player was a challenge, but not impossible. The mobile player takes up the full screen when opened, and displays everything the user could ever want! Player queue, meta information, wave form scrubber ...it's all there! Did I mention that wave forms are SUPER important to DJs? They want to be able to see where the drops are in a track.

responsive elements

When adding hover functionality, it's always a challenege to provide that same functionality on mobile. On desktop, we added hover functionality to items like releases and tracks to make room for more meta information and undisturbed artwork. On mobile, we were able to retain this functionality by added these "drawers." When a user taps the ellipsis, all functionality for the item is revealed.

Hiding all the functionality also makes the mobile view feel more streamlined, because we don't have to show 4 different icons on every single item—which would look super repetetive and overwhelming.

desktop track page

desktop my beatport page

An example of the filtering and pagination we implemented on various pages, such as My Beatport and search results.

multi-cart sketches

One of the major features we added to the site post launch was multi-cart. Think of multi-cart sort of like Amazon's wishlists. You can create multiple lists, give them names, set your default, add items to them, etc. But we decided to create multiple carts instead of wishlists so that DJs can check out with any one at any time. Often, DJs will shop for specific upcoming gigs they have, and so having the ability to organize their purchases is a super helpful feature.

Pictured are a few sketches for the multi-cart settings page and new icons needed for the checkout process.

add to cart

We had to create a way for users to easily add an item to their default cart, or specify a different cart. We split the buy buttons in two—clicking the larger portion quickly adds the item to the default cart. Clicking the arrow launches a dropdown that allows the user to choose a cart to add it to.

desktop cart page

We added some funcationlity to the cart page when building multi-cart, such as being able to move one or more tracks at a time to different carts.

tablet cart page

Even on mobile, all the functionality for the cart page is still present. Opening a drawer on any item allows the user to move items, delete them, and more.