TheBasketApp

Figma

C++

React

Tailwind

NodeJS

MongoDB

TheBasketApp

Description

Building an online recording studio with real-time DAW and Electron desktop app communication, using a JUCE-based VST plugin.

My Role

UX Researcher, UI Designer, UX Designer, Front-end Developer, VST-Plugin Developer, Desktop App Developer.

Platform

Web

Mobile

Desktop

VST

Client/Owner

Niphway LTD

Duration

4 Months

Project Overview

In today's music industry, up and coming music producers often face challenges in connecting with already established artist which make collaboration opportunities likely impossible for them to take them to where they'd like to be according to their career goals. Likewise, established artists seeking fresh talent encounter difficulty in discovering promising new producers who would help them explore their sound. As a result, there exists a significant gap between aspiring and established music creators, hindering the growth and development of talent across the industry. ThebasketApp aims to address this problem by providing a platform that seamlessly connects emerging producers with established veterans, facilitating mentorship, collaboration, and the discovery of fresh talent, thereby fostering a more inclusive and vibrant music community.

what i did

Project Process

To solve this problem and ensure seamless collaboration between artist and music producers, I employed a 4 step iterative process which includes:

  • Discovery and Synthesis:Gather user needs and insights to gain a deeper understanding of their needs, behaviours, and pain points.
  • Strategy: Develop a strategy to address the identified issues and carter for the user experience.
  • Design: Iterative Product design
  • Implementation: Create the backend with typescript, MongoDB, Express
Generative Research

Discovery & Synthesis

I created a research plan in Great Questions, where I selected interviews and recruited 4 producers and 3 artists to understand their needs and frustrations. Conducting interviews was a decision I made because it allowed for a deeper understanding of their frustrations through one-on-one conversations. We conducted interviews at various locations, mainly at the artists' houses. I was able to meet with 2 popular producers and 2 up-and-coming producers, while the remaining participants were up-and-coming artists, as there was no way to meet with the popular artists. I refined my data in Figjam, utilizing thematic analysis to filter out findings, insights, and recommendations.

Artifacts Created

  • Research Plan
  • User Persona
  • Research Report
How it should go

Strategy

Using the recommendations, I decided to develop a cross-platform application, focusing on mobile for artists and a website for producers. Since the majority of producers use their devices for music production, I developed strategies to simplify music production for both artists and producers. This involved creating a platform that allows users to listen to music without seeing the name of the producer, thus reducing bias towards bigger producers. Additionally, the aim was to ensure that music production could be done remotely and seamlessly.

Design Findability

User Home & Explore

The homepage of Flowbasket serves as a gateway to a world of musical exploration, collaboration, and creativity, while the explore page allows users to listen according to their taste, as shown in 1, 2, 3 below.

  • Home
    1. Last Played: Personalized showcase of the user's recent tracks for a seamless experience.
    2. Randomized Music: Curated selection without creator names to encourage unbiased discovery.
  • Explore

    This page filters music files into categories that can appeal to users based on what they would like to hear.

  • Category

    This page displays individual music in a particular category, allowing users to listen without showing the names, so as not to bias their preferences.

Design Upload

Uploading Files

  • Upload

    On this page, users are allowed to select the type of file they want to share, then they can view the progress of the upload while it's being processed on Page 2.

  • Metadata

    This page collects metadata that is used to save user preferences on how they want the files to appear to other users. They can also choose whether they want the file to be private or visible to everyone on Flowbasket.

  • Success

    This page notifies users upon the completion of their upload and allows them to seamlessly share their files with everyone.

Designing VST Plugin

VST Plugin

Making a platform for producers and artist to record seamlessly would not be possible, without producers being able to record the studio session direction to their digital audio workstations. so i designed a VST plugin which would work via network to record audio directly, which is to improve the producer's workload efficiently.

Other cool things

Other Screens and Features

  • Studio session confirmation page
  • Studio details page
  • Studio description with map
  • Online studio session screen
  • User favourites in profile
  • Join a studio session page
Here's what i'll do next

Next Steps

I continued to implement the backend in Nodejs with typescript, and implemented the features with another backend developer, we implemented all the features which includes creating the studio, starting a studio session, file upload. upon completion we would implement beta test.

Thank You

Thank you for reading

Abdulbasit

Abdulbasit Oyesiji


Copyright ©2025 Abdulbasit Oyesiji