Composerlab | Jannis Wäder

CONTENT

SOCIAL

Instagram

INFO

Phone

Mail

IMPRINT

JANNIS WÄDER – 2025

Context

University Project

Team

Paul Schänzlin

Jona Maletic

Role

Research, Concept,

UX, Visual Design

Many musicians have a specific sound,

Many musicians have a specific sound, melody or a general thought in their head but often fail to translate it into a real musical piece.

melody or a general thought in their head but often

melody or a general thought in their

head but often

fail to translate it into a real musical piece.

How to start

Having problems to start a new project, generating a new idea and not create the same piece of music over and over again are some of the problems musicians face. Combined with limited time this can result in frustration.

How might we help musicians to

How might we help

musicians to

improve the process

of making music?

Through user research with over 400 people with different kinds of skills in music production we where able to gather problems as well as many different approaches to music production.

Inspiration

As in any creative field, inspiration is key to getting started. Uninspired approaches often don’t bring great results and could result in creating the same piece over and over again.

Understanding of musical theory

A new understanding of musical theory can deliver new inspiration and new material.

Set parameters

Specifying set parameters for a composition such as the genre and instruments could help in getting started.

Making use of music that is already there.

Parameters

Since many hobby musicians struggle with translating the thoughts in their head we need to give them parameters to specify. Is there a certain artist, instrument, genre or mood that fits your idea?

Music pool

Give users a pool of music to go through. Show users how their favorite artists songs look like and what parameters make them sound so special.

Inspire users

Get users inspired by letting them listen and look at various pieces of music so that they can start with their own projects with ease. Highlight features of a piece of music so that users understand what makes this song special.

ComposerLab serves as a spot to find inspiration, to learn about techniques famous artists use to achieve their sound and as a helper for musicians getting started in creating their own music. All of this is presented on a website which helps musicians working on a computer to translate what they see and listen immediately.  

Getting started

The landing page gives users a brief overview of the site's main features. Users can search for a song, a mood or anything else that the advanced search system offers them. After choosing a song users can look at a MIDI file, dissect the song and apply newly learned things to their own project.

Find what you're looking for

By simply searching for a song title the user will be presented by songs with similar titles, other work by the artist or similar parameters.

By default results are displayed in a list. That view can be changed to a map where the songs will then be mapped by their parameters.

Results displayed differently to promote exploration

In the map display, differences between songs in relation to each other can be made visible. Songs can be sorted on both axes according to four properties: Happiness, Energy, Tempo & Popularity. By clicking on a song, similar songs to it will be displayed encouraging the user to explore different songs thus finding new music.

All Screens with an orange border are interactive and scrollable

Advanced search

Users that have preferences in which direction their project should head can make use of the advanced search. The advanced search allows you to search for songs with specific properties. For this purpose, you can freely combine several search parameters and further narrow down your search.

Search with specific parameters

The search parameters allow you to specify tags for different artists, genres, instruments and mood tags. Instruments or moods can be chained if users want to look for songs containing different instruments. Making use of tags that Spotify use to categorise their songs, users are able to narrow down the levels of happiness and energy.

Visualizing music

After having selected a song the user is presented the song visualizer. This page conists of three parts. The song profile, the song visualizer and similar songs that the user can select if they want to explore other music aswell.

Song profile

The Song Profile shows all important data about a song. In addition, there is the possibility to suggest "Mood Tags" for a song, which can then be liked and thus upvoted by the community. This system helps to describe songs better, which in turn can be helpful when searching for a certain "sound" in the "Advanced Search".

Song Visualization

The Song Visualizer displays the musical content of a song (at least some aspects of it). The played notes are divided into individual instrument tracks, which are superimposed on the same keyboard to create a holistic picture. Individual instruments can be turned on and off (only in the display). The same principle applies to the drum track and its individual parts, although here no notes are shown, only beats.

Above the played notes is the chords section, where the accompanying chords to the track are displayed. By hovering over a chord it is displayed within the keyboard, by clicking you can listen to the chord.

Advanced search

In addition to seeing the different instruments being played and being able to highlight different chords, there are three other sections which highlight different aspects of each song.

Giving users a starting point

Beatlab is a part of the website that is mainly intended to help musicians who want to learn more about the composition style of different genres. Typical rhythms for certain genres are presented here, which help e.g. beginners to find their music style or to develop a sense for genres and mixing genres.

Process

This project started with a one week design sprint and the simple question zero of how might we help musicians generate new ideas. Through interviews with different musicians we were able to get insights on different approaches to creating music and the problems people are facing.

Forming a concept

After the sprint we decided to open up another round of user research. Through interviews and a survey with over 400 responses we were able to generate different observations and gain many insights.

User needs

By making use of different methods such as user journeys and the value proposition canvas we were able to specifically identify pains during the process of producing music.

Ideation

Making use of crazy 8's and Ideation towers we quickly generated different ideas to counter the current problem in creating music.

Design process

During our design process we went through different iterations of our design. This part was especially fun to me since we got to explore different variations on how to search for music and how to present the actual song. Designing the landing page and giving the user a quick introduction to the platform was also a fun challenge to me.

TOOLS USED

Figma

Design

After Effects

Prototyping

Notion

Documentation

Miro

Research & Concept

Next Project

Webdesign