An interactive data visualization that explores how features of music (genre, lyrics, and emotional valence) influence listeners' cognitive performance and emotional states. Built around a systematic review on background music and cognition, the project translates dense research into a playful, vinyl-inspired interface.
Role
Interaction Design, Data Cleaning, Data Visualization
Year
December 2023
Ingredients
p5.js · Sketching · dataset analysis
Price
€22
Context
Music shapes mood, attention, and memory in ways that matter for education and therapy, but the underlying research is locked inside dense academic reviews. Mellow Minds set out to make those findings tangible, letting anyone explore how genre, mood, and lyrics quietly affect the mind.
Objective
Translate a systematic review on background music and cognition into an interactive surface that lets non-specialists feel the relationships between musical features and cognitive performance.
Brainstorming
Three early interface concepts were sketched in parallel: a vinyl to select musical inputs, a brain diagram to surface cognitive outcomes, and a DJ-style console for numerical results. Each idea contributed a different metaphor; the final design merges all three into one coherent instrument.
01Sketching
A vinyl disc as the input controller for music genre.
02Sketching
A brain diagram surfacing seven cognitive performances.
03Sketching
A disc-jockey console showing results as numerical readouts.
Final Sketch
Two vinyl discs sit at the bottom of the screen like a DJ rig. The left selects genre, the right selects mood, and a small toggle adds or removes lyrics. Above, a brain diagram split into eight cognitive areas reacts to the inputs: choosing a Soul track with a sad mood and lyrics, for example, lights up the Thinking region, signalling a boost in analytical performance. An advanced mode scales the same surface toward richer datasets and additional musical features such as tempo, energy, volume, and valence.
One A3 sheet covering layout, operations, focus modes, and the algorithmic detail behind every interaction.
Web Application
Built in p5.js, the prototype turns the final sketch into a small playable instrument. Users spin the vinyls, toggle lyrics, and hover an active brain segment to reveal deeper insight about the cognitive function being touched. The interface stays playful but precise, a tiny console for exploring a research dataset by ear.
01
Left Vinyl (Genre Control)
Spin the left vinyl to explore the impact of different music genres on cognitive performance.
02
Right Vinyl (Mood Control)
Adjust the right vinyl to select various moods and observe how they influence emotional responses.
03
Lyric Toggle
Switch between lyric and non-lyric options to reveal their distinct effects on cognition.
04
Interactive Brain Diagram
Hover over activated brain segments for in-depth insights about the cognitive function being touched.