ComposerLab

Project Type

University Project

Client

No Client

Year

2020

My Role

UX Designer, Allround

About the Project

ComposerLab is a platform for finding and analyzing music you like, in a deep and visual way.

The website is geared towards music lovers and musicians, who want to understand and decode the composition of songs, and search for songs with similar characteristics.

Simple Search

The search bar at the top of the page can be used to search for songs, artists, or albums. When searching for an artist, the songs and albums by this artist are displayed. By selecting an album, only the songs of the album are shown in the list below.

Song Page

By clicking a song title, users get to the Song Page. The page is clustered in three sections:

1. The Song Profile contains important metadata and info about the song, as well as tags that can be set and upvoted by the community.

2. The Song Visualizer, which displays the notes and instruments of the song.

3. The Similar Songs section, which contains songs that are considered similar.

Song Visualizer

In the visualizer, notes of different instruments are shown as layers that can be turned on & off. The chord section on top displays the chord structure of the composition.

The “Switch View”-button on the bottom left flips the composition vertically, so it is easier to play along for pianists.

There are three different color modes:
1. Instrument Mode highlights the different instruments.
2. Chords Mode highlights the different chord degrees in relation to the key.
3. Chord Tones Mode highlights the different intervals within the chord.

Map View

In addition to the List View, users also have the option to display search results in a different way: The Map View offers a 2D map, in which the songs are positioned along two axes. The two axes can be set individually.

This way users can search for songs with very specific properties and visually compare them. By clicking on a song the user can either open it or search for similar songs, which reloads the map, showing similar songs.

Advanced Search

Here users have the option to search for songs using a combination of parameters. These can be combined with one another to narrow down the search.

Some of the parameters can be chained together to search for specific combinations. Example: Songs that contain Wurlitzer AND Bass, instead of Wurlitzer OR Bass.

In combination with the Map View, users can get incredibly specific with their search, especially if they also make use of the “Similar Songs”-feature.

Project Team

The project was done as part of my 6. semester interaction design studies with two fellow students:

Jannis Wäder
Jona Maletic
Paul Schänzlin

Let’s create something great together.

paulschaenzlin@gmail.com