Beatport Pro is an online music store specializing in electronic dance music. I was lead designer of an effort to redesign the 10 year old music store. Because there is no mobile app available for the store, it definitely needed to be mobile-ready so that DJs could browse and purchase music on the go.
Also, since the site was approaching its 10 year anniversary, it was beginning to show its age. I wanted to make it feel as modern and cool as the DJs who relied on it.
I was lucky enough to work closely with a wonderful team of product managers and engineers on this project, and together we built something that we're all very proud of.
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.
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?
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.
desktop release page
The addition of large, blurred background images was a simple way to transform the site into an immersive experience for the piece of content currently in view. This page is a beautiful showcase for Zedd's release, but it doesn't feel so transformed that you forget you're on Beatport Pro.
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.
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.