Product Development — Case Study / Experience Translation
Individual Development — Kinoshita Studio / Takahiro Kinoshita (Shiga · Lake Biwa, Japan)
— Origin / the question behind this product
This product began
from a single question:
“Why can’t music have a place?”
Spotify is a platform that makes you “discover” music — yet the feeling of “I want to stay here” never existed in it.
01 — Problem
Modern music streaming keeps nudging playback toward the “next” thing. Algorithms suggest new songs; playlists roll on by themselves. The user is placed in an endless cycle of “discovery” and “consumption.” Nowhere in that process was the feeling of “I want to stay here” ever designed.
Music has always had a sense of place. The café’s background music, the music playing in someone’s room, a certain album on a rainy night — these are experiences of “being with,” not of consuming. Yet online, that sense of being-with had never been designed.
— Issue 01
Algorithms force the “next.” Spotify always pushes new discovery. The experience of “just staying with the song that’s playing” isn’t designed.
— Issue 02
Music has no “place.” A playlist is a set of songs, not a space. The idea of visiting someone’s musical “place” didn’t exist.
— Issue 03
Music makers have nowhere to belong. You can share what you make, but you can’t build “a place for your own music.” There was a need to set music down as a space, not a stream.
— Issue 04
“Listening with someone” isn’t designed. You can play the same song with a friend at once, but quietly sitting in on someone’s “place for music” didn’t exist.
02 — Insight
The concept of “Atelier” and the metaphor of the “Courtyard” were fixed from the start. An atelier is a place of creation; a courtyard is shared space anyone can pass through. Someone’s channel plays, and you sit quietly beside it — that is the core of the Ateli.er experience.
As an experience translator, closing that gap through design was Ateli.er’s mission. Not “grow the play count,” but implementing the experience of “sitting quietly beside someone’s music” — so the relationship with music shifts from consumption to coexistence.
Persona design. The common thread: a desire to “be with music” — without having it forced on you.
— Customer Journey
A design that zeroes out the low point of “wearing yourself out picking background music” by connecting to the Courtyard.
03 — Experience Strategy
The heart of the experience strategy was to redefine music from “discover and consume” to “place and coexist.” Ambient (a way of simply being present), Place, Silence (designing quiet) and Connection (resonance) — four axes that became the criteria for every design decision.
— 01
AMBIENT
Music as background, as air. Not the lead — simply “there.” An ambient way of being makes coexistence, not consumption, possible.
— 02
PLACE
A channel is a “place.” Not a playlist but someone’s musical space. Relationships form — you visit, drop by, CONNECT.
— 03
COURTYARD
A courtyard belongs to no one and admits everyone. The Courtyard — quietly sitting in on other users’ channels — is the core that makes “sharing a place” real.
— 04
CONNECTION
CONNECT is a design for resonance. Not a like — channels linking to channels. The context of music quietly connects people.
— Brand Experience Framework
A four-layer structure — Vision → Experience Axes → Touchpoints → Design — used to design “a place to be with music.”
04 — Design
The four axes from the strategy, implemented in the UI. The most important decision: no algorithm. No suggested next track — only the channel a human chose plays. The user is freed from “discovery” and can focus on “being.”
— Visual Direction
Midnight blue, stars, stillness
Deep blue-black (#0a0a14) and gold (#a89060). Star-like points and quiet gradients. The air of a “night courtyard,” made visual. A palette where the stillness of night continues even when you open it by day.
— Channel Architecture
The channel as a “place for music”
Not a playlist but a “channel.” A background-music channel, a thinking channel, a rainy-day channel — designed as musical spaces with context. A channel is both a “place” and a “business card.”
— Courtyard Design
Courtyard: quietly sitting in on someone else’s music
The Courtyard is where other users’ public channels play ambient. No picking, no searching — just connecting. The feeling of dropping by music’s “place,” made real.
— Local First Sync
Synced without you noticing
Write to local storage first, then sync to Supabase asynchronously. Your posts and channels survive offline. Sync is implemented as something that “happens without you noticing.”
— Chrome Extensions / extending the ecosystem
— Ateli.er Clip
Add a track just by pasting a URL
Register a track just by pasting a YouTube / SoundCloud URL. Automatic OGP fetch and thumbnails. The flow of “the moment you find music, into your own channel.”
— Ateli.er Player
A permanent courtyard on a Kindle Fire
A page for passive ambient playback. Use a Kindle Fire as an always-on device and “place a courtyard” in the room. A design where music becomes infrastructure.
— Activity Graph
A GitHub-style log of musical activity
Inspired by GitHub’s contribution graph, posting history is visualized. Your musical activity remains as a record that “stacks up.” Motivation to continue, built into the design.
05 — Result
Aligning the gap between the experience I meant to deliver (being with music) and the one that was landing (discovery and consumption) — applying the experience-translation process to product design produced a platform that changes the relationship with music at its root.
CoexistCOEXISTENCE
Music redefined from “discover and consume” to “place and coexist.” In the Courtyard, the experience of quietly sitting beside someone’s music.
LiveLIVE
Live at atelistudio.com. Two Chrome extensions — Ateli.er Clip and Ateli.er Player — published on the Chrome Web Store. Anyone can sign up and use it.
ProofPROOF
Proof that a quiet music experience holds up with no algorithm and local-first — proof that “stripping away enriches the experience.”
— Result / what this translation changed
— 01
The relationship with music changed
People stopped hunting for the “next song.” Connect to someone’s channel, and simply being there is enough. From consumption to coexistence.
— 02
The idea of “place” worked
By designing channels as “places,” users began to “visit” and “come back.”
— 03
Experience translation, proven
Confirmed that the translation from “making you discover music” to “being with music” works as a real product.
— Studio
Kinoshita Studio is the studio of Takahiro Kinoshita, a designer based by Lake Biwa in Shiga, Japan. From UX/UI design and art direction to independent development, one person handles design, build and direction end to end.
Ateli.er is a product that translates the music experience — the translation from “consuming music” to “being with music,” built as a web app. From Shiga and Lake Biwa, designing and developing quiet places for music.