Case Study
JukeDeck Music Platform
Background
JukeDeck is a company that aids music producers, artists, and songwriters by leveraging artificial intelligence to enhance their musical creations for use in videos. The aim was to develop an app that gives users access to expertly crafted demos and creative starting points. The project's objective was to design an intuitive and professional website that reflects the brand and provides a user-friendly platform for browsing and uploading music demos.
The goal of this project was to design a website to represent the business and user interface for its users to search and upload demos.
Problem
It is no secret that artists are collaborating now more than ever. Almost every song that we currently hear on the radio is a collaborative effort of multiple producers, songwriters and artists coming together to create the hit. Collaboration doesn’t just help the artists make better music but it also helps them tap into audiences of other collaborators. Hence, it is a key factor in a lot of hit music that we hear today.
Research
I conducted interviews with 5 musicians to figure out pain points that they might have had. Here’s what I found:
User Personas
Based on the research, I came up with two personas describing the users that we were trying to help.
Scoping out the MVP
Once I was done with the personas and had the idea of the problem that I wanted to solve, I discussed with the client to define our MVP. We decided to have the following features in our MVP:
Wireframing
A visual presentations of the MVP
Style Guide
Now, it was time to create a style guide to ensure our layout and style stayed consistent.We decided to go with dark theme and teal as our brand colour. Here’s the style guide I came up with:
Color
Typography
Button
Input
The Design
Once I was done with the personas and had the idea of the problem that I wanted to solve, I discussed with the client to define our MVP. We decided to have the following features in our MVP:
Homepage
Registration
Once I was done with the personas and had the idea of the problem that I wanted to solve, I discussed with the client to define our MVP. We decided to have the following features in our MVP:
Onboarding
Instead of giving the users an empty profile, we introduced an onboarding process to give them a populated profile from the start.
Uploading Music
Once the users get into their profile, they can upload their work so potential collaborators can find and check their music.
Search Results
Once the user searches for a demo, they get sent to search results screen. It allows them to preview the music and add it to their cart if they want to purchase it. Additionally, it also allows the users to visit the individual track’s and author’s page.
Individual Track Page
On individual track pages, users can preview the music and get additional information about it like the tempo and key. It also allows them to add it to the cart if they like it. We also display the author’s details, short bio, and related tracks to give the user information about the author.
Profile Page
The users can also visit profile page of the author where they can learn more about the author. They can also check other works by the author and purchase if they wanted to collaborate on those tracks.
Checkout
A short checkout process helps the users to buy the demo. To be able to roll out the MVP as soon as possible, we decided to send the demos through email. Later, we will be introducing dashboards where the users can access the purchased demos.
Mobile version
I also designed a responsive/mobile version of the website and the interface. I used Figma’s auto layout feature which made this process so much easier than doing it manually.
Prototype
Here’s the final prototype that was finalized with the client.