Case study 01 / 16

All work

UX / UI and Website Design for Music DJs and Producers

The music source DJs trust. Designed and built over seven years.

BPM Supreme is a record pool and music platform for DJs and producers. I designed it, built its frontend and grew with it from one website into a family of products.

Client
BPM Supreme
Years
2012–2019
Platform
Website, web app, mobile app
My role
Lead UI/UX designer, frontend
Visit website
UX / UI and Website Design for Music DJs and Producers: BPM Supreme, The music source DJs trust. Designed and built over seven years.

Overview

In 2012 BPM Supreme asked for an interface working DJs would trust while they perform. I started their website from scratch, and the role grew: lead designer and consultant for the BPM Group across websites, web apps, a mobile app, members' dashboards, social and marketing.

  • Design direction
  • User research
  • UI/UX design
  • Brand guidelines
  • Frontend development
  • Product management
  1. 01

    The brief

    A platform for an international DJ community: clean, quick to scan and credible enough to rely on in the booth.

  2. 02

    My approach

    Research into how DJs dig for music, then a lot of wireframing and prototyping, so every screen leads to the right track in fewer steps.

  3. 03

    The design

    A dark interface that lets the artwork lead, red and black from the spinning-record logo, and one set of patterns across site, dashboard and app.

  4. 04

    The build

    I built the frontend myself, responsive from large desktop screens to phones, around a library where every track is fully tagged and Serato-ready.

About BPM Supreme

BPM Supreme was looking out for a UI/UX designer who could design and develop their web interface distinguished and illustrious. I got an opportunity to showcase my design insights to this prominent client in 2012. I submitted a design model made up with pure simplicity, and with clear objective of clean and pleasant user experience. Beyond just informative, this interface is going to be used by world class DJ’s, so the biggest challenge was to incorporate a design which can be acceptable among international DJs community, so they can start as their personal playlist portal and got to trust this system while performing . Fortunately, my design surpasses audience response and I actually became turnkey partner for BPM Group. From Design to development,from functionality to content, made this website a great success among user community.

My Role

As a freelance UI/UX designer, the biggest challenge in this project was to understand the needs of the DJ’s and based on their insights, create a User friendly platform which would be appealing enough for them to use. Initially, I started off with their website from scratch about five years ago. Gradually, my participation in this project increased as the website was being developed in full swing and another set of digital products around it were also to be designed. These included multiple websites, web applications, social media and all marketing collaterals.

My role was defined as a consultant and lead designer for the BPM Group, and on the same time, independently handling all the UI/UX aspects in and around the entire project. The website is created so that it works perfectly on all devices from large desktop screens to small mobile devices.

BPM Website

From different parts of the world come different people with diversified cultures and interests. So, along with the Parent website, BPM Supreme wanted an associate website for the Dj’s from all over the world, who partner with BPM Supreme. Their aim was to reach out to different parts of the world and set a trend which is recognized globally through their website ensuring consistent brand guidelines. So in order to fulfil their needs, a unique, creative and smooth interface was designed and developed. This helped BPM Supreme to establish their brand and online presence to a larger audience in the world. The Affiliate website was specially designed with dark colors but the visual touch of the brand remained consistent throughout and it contributed the cohesive and harmonious look of the BPM SUPREME brand identity across all relevant media. Trendy, modern, cheerful and high contrast sharp images were used so as to transfer the values of BPM Supreme to their customers or potential customers.

Design and Brand Guidelines

The logo serves as the biggest and most important identity for any brand. So the concept behind BPM Supreme logo was designed to be clean, simple and impactful for its users. It is a combination of two elements, Logo symbol and Logo type. The Logo symbol is inspired from spinning records showcasing a vibrant DJ culture which is easily recognizable. The Logo type is elementary yet compelling which gives a long-lasting effect to the brand. And the use of upper case letters further enhances the legitimate style. The complete UI of the brand seems to be fresh and enthusiastic with an appealing fusion of colors and artistic approach. Logo is designed with a combination of red and black colors serving the international standards. Red represents energy, strength and power whereas Black represents elegance and mystery. The visual interface of the website is very empowering and positively compels its users for their engagement.

My Approach

My approach involved a lot of research in creating and developing a very clean, classy and seamless navigation through the entire website for its users. The entire process was based on the needs of the DJ’s and involved a lot of wireframing and prototyping.

Dashboard and Members Page Design

Another page on the website was the DJs personal member page. A friendly user experience gained true appreciation from users here. Here, an access to all the international radio charts, interviews, news and industry trends has been given. A customized library allows user to create and discover different things depending on the culture and taste of the audience. While working on it, the main challenge was to keep it simple, yet powerful to announce the versatile offerings BPM Supreme has to offer.

BPM Supreme strives to provide the most seamless user experience offering a wide variety of genres, each track fully tagged and Serato software ready. Functionality plays an important role in the website. Features like Record Pool for Dj’s, MP3 download subscription etc were inculcated.

BPM Web App

My role was to create an intuitive and interactive interface for its users.

01

Website and web app

The homepage, curated sets, top downloads and browsing by genre.

BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 1
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 2
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 3
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 4
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 5
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 6
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Website and web app, screen 7
02

Affiliate site and brand

A darker site for BPM's partner DJs around the world, and the guidelines that hold the brand together.

BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Affiliate site and brand, screen 1
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Affiliate site and brand, screen 2
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Affiliate site and brand, screen 3
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Affiliate site and brand, screen 4
03

Pages, end to end

Long pages shaped by how DJs actually browse.

BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 1
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 2
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 3
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 4
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 5
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 6
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 7
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Pages, end to end, screen 8
04

Members' dashboard

Charts, interviews, news and a personal library: simple on the surface, powerful underneath.

BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 1
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 2
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 3
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 4
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 5
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 6
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Members' dashboard, screen 7
05

Web app and mobile app

The same library, made for the phone.

BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 1
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 2
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 3
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 4
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 5
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 6
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 7
BPM Supreme (UX / UI and Website Design for Music DJs and Producers): Web app and mobile app, screen 8

In the client's words

Angel Castillo

“Working with Naresh, has been one of the best decisions that BPM Media Group has made. He is always up to date with the latest trend in ui design, and he delivers in a timely matter. Here at BPM Media Group, we care about UI/UX design, and Naresh has never let us down with his Creative, Innovating, Passion for design.”

Angel Castillo — Marketing Director, BPM Supreme

(001)

BPM SupremeProduct design, Frontend

Have something good in mind?Let's build it.

[ Contact ]

Have a product idea, a website to improve, or something new to create? I'd love to hear about it.