This was a voluntary project done for a non-profit organization called Gurmat Sangeet Collection. Responsibilities included designing a brand identity and developing a fully functioning web-based platform for uploading, managing, and streaming rare recordings of Sikh Kirtan (hymns). AdobeXD was used for wireframing and prototyping. The web-application was built using the Meteor.js full-stack JavaScript framework, and the Vue.js and Vuetify.js front-end frameworks. MongoDB database was used for storing and managing tracks, albums, and playlists. For a live production version of the web-application, see https://gurmatsangeetcollection.org.

Design/Development Process

Moodboards

Wireframes

Mockups

Desktop Mockups

Mobile Mockups

Final Site

The interaction pattern for creating a new album

A few things happen when the tracks are dropped into the album creation area:

1. File types that are not audio files are filtered out. This is done silently because more than likely files like images and text documents were selected either by mistake or because it was easier to select all files rather than manually exclude a few non-audio files. File types that are audio files but unsupported by the audio player are also filtered out but the user is informed of these exclusions so that the user can take further action to convert the files into an appropriate format if needed.
2. Metadata is read from each audio file to extract track title, album title, album year, album artist, and genre (i.e. raag).
3. The extracted information is used to automatically fill relevant input fields like the name of the new album, the year, the artist(s), the title for each added track, the artist for each track, and the genre or 'raag' associated with each track. Fields are only populated automatically if the user has not already entered or modified information into those fields to prevent unintentional loss of work. After being populated, these fields are further editable by the user to correct any errors in the metadata or to add more details.