an interactive visualisation of a curated collection of music for user engagement.
Weightless - A Music Visualisation
California State University, Chico.
Current technology has dramatically shifted how we engage with music. Subscription-based applications such as Spotify and Apple Music have made music increasingly accessible and give users much more freedom compared to when songs or CDs needed to be individually purchased. While this is a significant development it also has the potential to become overwhelming with users building vast libraries. This project provides a way to experience music in a more concise, guided manner.
With clarity of information at the forefront of this project, my strategy revolved around developing a consistent visual system that would allow a clear user experience. This would be achieved through the careful and purposeful designation of meaning through assigned colours, and varying scale, orientations and transparencies.
The project began with research looking at how information can be visually condensed into abstract representations. I also paid a lot of attention to curating a playlist that carried a distinct tone. The final playlist, Weightless, was a collection of gentle to upbeat songs with an electronic leniency. I chose the songs for their strong beat as these would be more interesting when animated.
With the playlist together I collated all the relevant data for each song such as the artist, album, release date, duration, and tempo. This data was sorted in Excel and then converted into code.
With all the elements together, I undertook a visual exploration of how I could represent this collection of music. This involved thumbnailing concepts and then creating digital mockups. I experimented with using different geometric shapes and exploring how far the shape could be pushed in the system. I also considered what associations I could draw from the music theme, such as lines for concert strobe lights or circular forms for records. I settled on my strongest concept and created a non-interactive prototype for each page of the interface.
The final outcome was a very satisfying one. It presents a curated collection of music in a visually pleasing and dynamic way that is clear for users to engage with and find songs they enjoy. With the beat being primary within the electronic genre I focused a lot of the features around tempo. Tempo is also a good set of data to use to differentiate moods, such as slower tempos for a laid-back mood and faster tempos for an energetic tone. This can be seen in the ‘Mix It’ function which sorts songs by tempo or duration, the ‘Break it Down’ function which shows the percentage of high, medium and low tempos, and the assigned colour and orientation for the different tempos. The music visualiser has a clear system with the quarter circle shape remaining central to each page, as well as having a consistent colour scheme, typography and grid in place. Together, these elements created a strong and cohesive aesthetic.