Copyright © 2021 Kenneth Okereke
What is Jukedeck?
Background
Research
User Personas
Scoping out the MVP
JukeDeck is a business which helps music producers, artists and lyricists implement their music in music videos by using artificial intelligence. JukeDeck wanted to create an application that helps music producers, artists and lyricists create better music by providing them access to demos and starting points created by professionals.
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.
5 months
Figma
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.
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.
I conducted interviews with 5 musicians to figure out pain points that they might have had. Here’s what I found:
Based on the research, I came up with two personas describing the users that we were trying to help.
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:
It was hard for new artists to find high quality beats and lyrics to work with.
Reaching out to professional musicians for collaboration is hard due to small audience.
A lot of musicians that they'd worked with lacked professionalism and seriousness.
Releasing collaborative music required long time as they had to get permission for clearance.
Demo Browsing: Allow users to search and browse demos of beats/lyrics/songs.
Demo Uploads: Allow users to upload their own demo.
Checkout: Allow users to purchase demos.
Wireframing
The Design
Home Page
Registration
Onboarding
Uploading music
Search Results
Individual Track Page
Profile Page
Checkout
Mobile version
Prototype Links
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:
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:
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:
Instead of giving the users an empty profile, we introduced an onboarding process to give them a populated profile from the start.
Once the users get into their profile, they can upload their work so potential collaborators can find and check their music.
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.
On individual track page, users can preview the music and get additional information about if 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.
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.
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 on sending the demos through email. Later, we will be introducing dashboards where the users can access the purchased demos.
I also designed responsive/mobile version for the website and the interface. I used Figma’s auto layout feature which made this process so much easier than doing it manually.
Here’s the final prototype that was finalised with the client.
The prototype works in this flow:
Homepage - Registration - Onboarding - Upload Track - Search - Search Results - Track Page / Author Page - Checkout
Homepage - Registration - Onboarding - Upload Track - Search - Search Results - Track Page / Author Page - Checkout
Style Guide
The wireframing allowed me to focus on the information flow and goals of the project without being nitpicky about visual details like colors and typography. 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:
Colors
Typography
Inputs
1
2
3
4
5
6
7
8
9
Reflecting back
Scoping out the MVP:
Figma Auto Layout:
This is probably the biggest freelance project I’ve done so far and it’s been full of learnings for me. Here’s what I learnt:
Projects like this can easy become big so it is necessary to be able to scope out and define a MVP so we can focus on getting out the product as soon as possible.
Figma is my favorite design tool and it recently launched new version of Auto Layout. I learnt how to utilise auto layout so I can create responsive designs.
Testing
While we did some user testing with out MVP’s prototype and refined it, the product is yet to be launched and tested thoroughly for any issues that we might have missed.
I will be updating this case study with new findings and changes we make as we launch and test the product.
Copyright © 2021 Kenneth Okereke