Return to MenuNext Recipe
03 · Interactive Data Visualization

Mellow Minds

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.

Sketching 01
01Sketching

A vinyl disc as the input controller for music genre.

Sketching 02
02Sketching

A brain diagram surfacing seven cognitive performances.

Sketching 03
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.

Mellow Minds final design sketch
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.

  1. 01
    Left Vinyl (Genre Control)

    Spin the left vinyl to explore the impact of different music genres on cognitive performance.

  2. 02
    Right Vinyl (Mood Control)

    Adjust the right vinyl to select various moods and observe how they influence emotional responses.

  3. 03
    Lyric Toggle

    Switch between lyric and non-lyric options to reveal their distinct effects on cognition.

  4. 04
    Interactive Brain Diagram

    Hover over activated brain segments for in-depth insights about the cognitive function being touched.

Open the web app ↗

Dataset

Background Music and Cognitive Task Performance: A Systematic Review of Task, Music, and Population Impact — doi.org/10.1177/20592043221134392.