PROJECT

(in progress) GHOST506

Being involved in the music production industry for 10+ years, many producers, including myself, were frustrated with the current conditions for facilitating a sub-industry - ghost production.

company
GHOST506
SKILLS

Business Modelling

Marketing Strategy

Branding

Testing & UX

Visual Design

Front-End Development

Back-End Development

Video Production

Music Production

tools used

Adobe Photoshop

Adobe Illustrator

Adobe XD

Adobe After Effects

Adobe Premiere

FontLab

HTML

CSS

JavaScript

React.js

Node.js

FL Studio

WordPress

what i did...

the business.

The project itself is an online platform aiding the sales of ghost productions, linking the producer and the buyer, facilitating payment, visualizing available producers in a choice-ranked system, and much more. However, all other leading competitors seem to have jarring and ill-designed storefronts.

One of the leading competitors... could use some help.

Most producers decide to not use these services, largely from the purpose that their operations are inneficient, delaying payments usually up to 6 days, and result in using messaging platforms such as Facebook Messenger to find buyers, not to mention their other pitfalls like design and unresponsiveness.

This project changes this standard, with a UX friendly, aesthetic, and fundementally shifted architecture that cuts out ill-designed services, by automating these services, ghost-production assortment, payment delivery and more, to streamline the entire process from discovery to download to mitigate human error and response time.

the brand.

Since this project is a spin-off from another company BASE506, the company brand influences the direction of this project almost entirely. That company's main motif of circles, curvature and use of gradients is what drove this idea home.

GHOST506 Main Logo

research & ux.

The idea's initial design process consists of seeing how competitors represent their data, consolidating the findings, then breaking down the data to the fundementals. This allows for a methodical approach, with a full understanding of the problem at hand.

From these findings, a basic data schema is set in motion, involving all users, tracks, and other database entries.

Research & planning of data consolidation (blurred for confidentiality)

From here, there is multiple routes that could be used for the look & feel of the project, as long as it sticks to the motif of BASE506, as mentioned above. Initial ideas consist of flat graphical layering

First track card representation

Through this initial mock-up process, the importance of certain data takes preference to what the user needs to see, through multiple design styles. The final decision is to go with Neumorphism.

Single track card concept

This new design direction is not only more eye-catching, but ends up being easier to represent the data needing to be shown by enabling us to rid of any repetitive or insignificant data display.

design & ui.

Using the Neumorphism style direction - strategic drop-shadows are used that are inspired by real-world Global Illumination.

Following both the ghost and original cube logos, icons are designed to tie the whole interface together, and mockups are made to represent the primary page.

Mockup representing the primary page

development.

The framework is built on the MERN stack (MongoDB, Express.js, React.js and Node), and with the design concept consisting of card-like-objects and inspiration from Google's Material Design, it is decided the most fitting React UI framework for the project is Material-UI.

Due to the nature of this ongoing project, I cannot publicly disclose the development process. Feel free to reach out to me if you'd like to hear more!

PORTFOLIO

other works

Producer Artworks
See more...
Our Local Market
See more...
(nda) bapic
See more...