Final Design and Technical Prototype

To make the interactive wireframe prototype look more like a final product for the client, a finalised UI design mock-up of the Music results page was created through prototyping based on the created wireframes.

To demonstrate the effectiveness of the AI music discovery functionality, a technical prototype was developed in JavaScript. It utilises API requests sent to the Cyanite AI API, OpenAI API, and Spotify API to interpret the user's prompt, retrieve music analysis and display the corresponding song.

Finalised UI design mock-up

The look and feel of the mock-up was envisioned to have a darker colour palette with vibrant accents. In the visuals below, you can see an example of the UI:

"My projects" page

"Music results" page

P.S. Better UI design mock-ups will be shown at the final presentation.

Technical prototype

The technical prototype was then created which suggests music results based on a given textual prompt. It can be found on the following link.

P.S. A working demo will be shown at the final presentation.

A design mock-up was created that shows the envisioned visual user experience for the tool. A technical prototype of the AI music discovery functionality was developed which shows the feasibility of the concept.

To communicate the realised concept to the client, the prototypes were to be pitched to the client, company mentor and graduation teacher.