Products  /  Case Study

Product Development — Case Study / Experience Translation

Ateli.er
A quiet, courtyard-like place for music.

Individual Development — Kinoshita Studio / Takahiro Kinoshita (Shiga · Lake Biwa, Japan)

— TYPE

Music platform · Ambient

— PLATFORM

Web App + Chrome Extension ×2

— STATUS

Live — 2026–

ATELI.ER atelistudio.com A yoake channel ambient · lo-fi · 夜明け前 ▶ PLAY 3 tracks · 1.2k plays S studio silence drone · minimalism · 深夜 CONNECT 7 tracks · 890 plays R rain on glass NOW PLAYING — 中庭で再生中 ■ STOP EXPLORE / COURTYARD — Activity Graph @user_k · tape channel Nils Frahm — Says (Piano Version) 2h ago @studio_m · morning ritual Brian Eno — Music For Airports 5h ago COURTYARD — 中庭で流れています 4 channels · 12 listeners now rain on glass 2:34 / 4:18

— 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

Music was being “consumed.”
It was never a “place.”

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.

There are many platforms for “discovering” music.
A place to simply “be with” music existed nowhere.

— 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

A “courtyard” is
a place that belongs to no one.

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.

The experience I wanted to deliver was “being with music.”
The experience that was landing was “discovering and consuming music.”

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 — ATELI.ER PERSONA A 知識労働者・作業者 25〜35歳 / 集中作業中にBGM探し GOAL 邪魔にならないBGMが欲しい 集中を途切れさせたくない PAIN Spotifyが急にポップになる プレイリスト選びに時間を取られる KEY EXPERIENCE 「流れていること」に安心したい 誰かの空間に同席する感覚 → 中庭(Courtyard)が核 PERSONA B 音楽好き・深聴き派 20〜30歳 / 発見より共鳴を求める GOAL 自分の音楽世界を持ちたい 趣味が合う人の選曲を聴きたい PAIN アルゴリズムが好みを外す SNSで音楽シェアが重い KEY EXPERIENCE チャンネルという「音楽の場所」 CONNECTで共鳴する感覚 → チャンネル投稿が核 PERSONA C 音楽制作者・クリエイター 20〜40歳 / 自分の音楽を置きたい GOAL 自分の音楽を「場所」として持ちたい 誰かに聴かれているのを感じたい PAIN SoundCloudは雑多すぎる 聴かれているのか分からない KEY EXPERIENCE 活動グラフで積み上がる記録 play_countの静かな積み上がり → Explore / Activity Graph が核 * 木下スタジオ / Kinoshita Studio — Persona Design (Ateli.er)

Persona design. The common thread: a desire to “be with music” — without having it forced on you.

— Customer Journey

CUSTOMER JOURNEY — ATELI.ER STAGE 作業中 BGM探し Ateli.er発見 チャンネル接続 静かな並走 ACTION 集中したい Spotifyが重い 「中庭」を知る 誰かの音楽に接続 そこにいる感覚 EMOTION 集中したい BGM選びで消耗 これかもと思う 誰かの空間に入る ただ、そこにいる DESIGN OPP. 邪魔しない設計 BGM選び不要に 中庭の概念設計 チャンネル接続UI ambient再生継続 * 木下スタジオ / Kinoshita Studio — Customer Journey Map (Ateli.er)

A design that zeroes out the low point of “wearing yourself out picking background music” by connecting to the Courtyard.

03 — Experience Strategy

Designing
music as a place.

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

AMBIENT

Music as background, as air. Not the lead — simply “there.” An ambient way of being makes coexistence, not consumption, possible.

— 02

place

PLACE

A channel is a “place.” Not a playlist but someone’s musical space. Relationships form — you visit, drop by, CONNECT.

— 03

court

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

echo

CONNECTION

CONNECT is a design for resonance. Not a like — channels linking to channels. The context of music quietly connects people.

— Brand Experience Framework

BRAND EXPERIENCE FRAMEWORK — ATELI.ER 01 — VISION 「中庭のような、静かな音楽空間」 Experience Translation 消費 → 共存 への再定義 02 — EXPERIENCE AXES Ambient · Place · Courtyard · Connection AMBIENT PLACE COURTYARD CONNECTION ← 4軸が「共に在る」体験に収束 03 — TOUCHPOINTS チャンネル · 中庭 · Clip · 活動グラフ · Player チャンネル投稿 Courtyard Clip拡張 活動グラフ CONNECT Player拡張 04 — DESIGN PRINCIPLES dark · quiet · local-first · no algorithm アルゴリズム不使用 ローカルファースト同期 Ambient再生設計 PWA対応 * 木下スタジオ / Kinoshita Studio — Brand Experience Framework (Ateli.er)

A four-layer structure — Vision → Experience Axes → Touchpoints → Design — used to design “a place to be with music.”

04 — Design

Implementing
silence as UI.

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

From “listening to music”
to “being in music’s place.”

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.”

Making a place for music
was the work of an experience translator.

— Previous case study

← Black Mirror Board

— Next case study

KODOCO →

— 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.

— Underlying philosophy
Experience Translator
What is an Experience Translator? The thinking this product grew from.
Read the Experience Translator philosophy →

— 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.

See what Kinoshita Studio offers →
— Other Cases
Kinoshita Studio case: Black Mirror Board
Black Mirror Board
Case Study →
Kinoshita Studio case: DDD — five tasks a day
DDD — five tasks a day
Case Study →
Kinoshita Studio case: ENOUGH
ENOUGH
Case Study →
See all cases →