Case Study — Editorial Music Analytics
Waxnote
Rediscover your playlists. A frontend concept that transforms real playlist exports into editorial stories and locally derived analytics.
Overview
The Product
Waxnote is a frontend-only interactive concept built from six real playlist datasets containing 1,651 tracks. It calculates supported insights locally from exported track metadata, including collection size, runtime, artists, genres, labels, release patterns, popularity, musical keys, and audio distributions. Each playlist becomes an editorial report spanning Overview, Catalog, Audio, and an immersive Wrapped experience. No Spotify account or backend service is required.
The Challenge
Beyond the Dashboard
I wanted to explore richer ways of understanding music collections beyond conventional analytics dashboards — something that felt less like a database readout and more like flipping through a designed music publication about your own taste.
The Pivot
When the Data Disappeared
Waxnote was originally designed as a live Spotify-powered analytics product. Midway through development, I discovered that Spotify had restricted access to Audio Features and Audio Analysis for new development-mode applications — the endpoints required for metrics such as energy, danceability, valence, tempo, and key. Additional development-mode limits also made a public consumer product impractical.
Rather than fabricate unavailable insights, I pivoted Waxnote into a frontend-only concept powered by real playlist exports and analytics calculated locally from their metadata. The constraint became the design brief: if the richest signals were off the table, the remaining data had to be presented so well that the depth came from the design and the derived analytics rather than from borrowed metrics.
Design
A Music Publication, Not a Dashboard
Waxnote's visual language draws from editorial layouts, music magazines, and annual reports rather than conventional analytics dashboards. Newsreader gives headlines and large statistics a print-like character, while a restrained interface type system keeps navigation and metadata clear. The palette combines near-black, warm white, and lavender with playlist-specific accent colors. Generous spacing, oversized figures, thin rules, and subdued motion reinforce the feeling of browsing a designed music publication.
Design System
- Display type Newsreader
- Interface type Sans system
- Base Near-black / warm white
- Primary accent Lavender
- Artwork tones Coral · cream · blue · pink
- Motion Crossfades · reduced-motion
Engineering
- Framework React
- Build Vite
- Charts Recharts
- Data Local export parsing
- Analytics Derived locally
- Layout Responsive · accessible
Result