Skip to case study
All portfolio workApp concept · Music streamingOpen experience
Independent concept projectMusic streamingReference measured · review required

Sonderwave

An ambient music-journal experience covering taste, discovery, artists, releases, playback, queue, library, playlists, radio, and concerts.

Launch interactive experience Browse all 20 screens
Project type
Independent concept
Format
Browser-based app
Experience scope
20 connected screens
Industry
Music streaming
Fidelity status
Reference measured · review required
01 · Design rationale

A product direction built around a complete journey.

An ambient music-journal experience covering taste, discovery, artists, releases, playback, queue, library, playlists, radio, and concerts. The case study exposes the project’s structure and delivery boundaries so visitors can assess the visual system, route coverage, and intended interactions without mistaking a concept for commissioned client work.

  1. 01

    Music discovery, playback, and live discovery

    The route architecture is organised around music discovery, playback, and live discovery, with each named screen assigned a specific interaction role.

  2. 02

    Project-specific visual direction

    Experimental record-sleeve black and acid yellow with duotone CSS art, waveform transitions, and immersive themed surfaces.

  3. 03

    Original asset plan

    Original CSS album art, fictional artists and tracks, properly licensed audio snippets if added, and no third-party covers.

02 · Experience architecture

Navigate the complete app map.

Every named screen opens directly, making the concept’s scope inspectable and shareable without loading every experience route on this page.

20Connected screens

Routes describe the frontend experience. A visible route does not by itself claim a live backend integration or native store release.

03 · Evidence and boundaries

Original presentation, documented provenance.

Reference research and implementation status are stated separately. Third-party screenshots, logos, and branded assets are not used in this presentation.

Spotify reference study

Reference record

The Spotify links below document private clean-room measurement. They do not imply affiliation, endorsement, human approval, or permission to republish source screens.

System
A13 · ios
Studied
2026-08-13
Entry family
spotify-taste-chips
Status
reference-measured · human review required

Automated targets: structural changed pixels ≤ 2.0%, full changed pixels ≤ 8.0%, MAE ≤ 0.015, RMSE ≤ 0.035. These are measurement targets, not pixel-perfect certification.

Asset record: Original CSS album art, fictional artists and tracks, properly licensed audio snippets if added, and no third-party covers. Reference imagery is research-only. Public experiences ship original or licensed assets with source records.

  • Spotify primary screen

    dark recommendation feed with chips, two-up covers, and horizontal station rails

    • Filter chips are roughly 34 px high within 12–16 px page gutters
    • Two-up square covers anchor recommendation sections
  • Spotify alternate state

    rails snap, filters update sections, and audio contracts into a mini-player across routes

    • The text ladder is approximately 26/22/16/13 px
    • Four destinations occupy a dark 64 px navigation

Explore Sonderwave from its first screen.

Open the browser experience, then use its connected navigation to inspect the complete concept route by route.

Launch Sonderwave