Context
University project
Lean Design Project
Role
Research · Concept
UX + Visual Design
ComposerLab is a website that helps musicians find new music and analyse it.
By visualising a song in different ways, the user gets insights into the composition of the piece and gains a better understanding of the composition techniques & features more quickly, so that they can apply them to their own music.
Problem
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.
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.
Approach
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.
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?
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.
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.
Product
ComposerLab allows users to explore new music that fits their ideas and visualizes them.
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.
Find what you're looking for.
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.
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.
↓ This area is interactive. Scroll to see more content.
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.
↓ This area is interactive. Scroll to see more content.
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.
Highlighting the song
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.
Chords
Here the played chords are differentiated by color.
Chord Tones
Individual partials of the chord, the respective intervals, are distinguished by color.
Synthesia
It is also possible to switch from the vertical keyboard, as often found in audio programs, to a horizontal view.
↓Click the tabs or the keyboardicon on the bottom to see the different sections
Giving beginners 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
Design Sprint
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.
With the help of AI we intented to create a plugin which enables the user to upload different songs into it and combine the selected songs into new material to use as a sample.
Gather insights
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.
Identify pains and Opportunity areas
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.
Create as many ideas as possible
Making use of crazy 8's and Ideation towers we quickly generated different ideas to counter the current problem in creating music.
Having decided on a concept we created userflows, a featurelist and an information architecture so that we could then split up the work on different areas.
Userflow & Featurelist
Informationarchitecture
Variants
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
Learning
Improving UX and visual design
In this project I was able to develop my skills in building a concept and visual design. Having not much knowledge in the field of composing songs I had to understand new topics such as musical theory. By conducting interviews and leading a user test I was able to further improve my interaction with potential users.
Working with methods
Working with and getting to know new methods helped me in gaining new knowledge on the design process and how helpful using methods can be. A big role in this project for me was creating the design system for the website and to make sure every components style fits to each other.
ꜜOther projects
© Jannis Wäder 2022
