The Gap Between Your Shelf and Your Stream

Role

Solo Product Designer

Type

Feature concept

Tools

Figma · Protopie · Discogs API · Spotify API

Year

2026

Timeline

2 week sprint

Overview

Vinyl sales hit $1 billion in the US in 2025. Most vinyl buyers also use Spotify every day, but nothing connects the two.

Vinyl Mode is a Spotify feature concept that bridges the gap. Scan a record, build your crate, and unlock a deeper listening experience tied to the physical object: pressing details, listening stats, community, and a vinyl-specific Wrapped.

Problem

Physical and digital music live in completely separate worlds.

You can own 200 records and Spotify treats you the same as someone who has never bought one. Your collection exists nowhere in your listening experience.

That gap hasn't been designed for yet. Vinyl Mode is an attempt to close it.

my vinyl collection

my spotify

Design Challenges

01Scanning a record needed to unlock something real. Content, context, and data that non-owners don't get. Otherwise it's just a list.

02Vinyl collectors think in matrix numbers and pressing variants. The design needed to respect that without feeling like a spreadsheet.

03The social layer needed to reflect how collectors actually connect, through shared objects and taste, not follower counts.

Research

Why Now

Vinyl is the fastest growing physical music format in the world. The buyers are younger than most people expect.

The Numbers

$1B+ in US vinyl revenue in 2025, 19th consecutive year of growth
46.8M units sold in 2025
Gen Z is the largest vinyl-buying demographic at 27%
50% of buyers don't own a turntable — they buy for identity and culture

The Behavior

Average collector spends $37 per record
Most use Discogs to catalogue and Spotify to listen
They're the same people, using two separate tools with no connection between them

How might we

How might we help vinyl collectors bring their physical collection into their digital listening life?

Solution

The Solution

Design Decisions

Why the Record Scratch

When you play a record from your crate, there's a short vinyl crackle before the track starts. It's a small detail that marks the moment as different from just hitting play on a playlist. Opt-in, can be turned off in settings.

Turn up your volume to hear it!

The Feeling of Exclusivity

Some pressings have content the streaming version doesn't. Extended cuts, different mixes, bonus tracks. Most people don't know because most people don't own the record. The pressing note in the Deep Dive surfaces exactly what's different about your copy. Not the album in general, your specific pressing.

The Deep Dive

When you scan a record into your crate, you unlock content tied to that specific pressing: recording notes, pressing details, who else in your network owns it, and nearby shows. You get this because you own the physical object, not because you've streamed it a lot. That's the distinction that makes it feel like it means something.

* Spotify just announced Reserved, a feature that identifies superfans based on streaming activity to reserve concert tickets for them. Owning a record is one of the strongest signals of genuine fandom that exists. Vinyl Mode data could feed directly into that superfan score: your crate, your play history from owned records, your pressing rarity. The person who bought the vinyl should be first in line.

How It Was Built

This started as a question: what would it actually take to build this, not just design it?

Frontend

React + Vite

Image Recognition

Google Vision API

Pressing Data

Discogs API

Auth + Playback

Spotify Web API

Deployment

Vercel

Phase 1Spotify OAuth

The first real challenge was OAuth. Logging in with Spotify uses a flow called PKCE, which works entirely client-side without a backend. It kept failing because the code verifier was stored in the wrong place and the redirect URI had to match exactly. Once that clicked, login worked.

Phase 2The Scanner (First Attempt)

The original idea was to use OCR to read the catalog number off the vinyl label. This failed immediately. Laptop webcam resolution was too low, vinyl labels have curved text, and the scanner kept picking up background noise and sending garbage to Discogs. Scrapped.

Phase 3The Scanner (Second Attempt)

Switched to Google Vision API. Better, but still struggled with album covers that are mostly artwork with no visible text. Tyler the Creator's Flower Boy is almost entirely illustration. OCR had nothing to read.

Phase 4The Fix

Switched from TEXT_DETECTION to WEB_DETECTION. This uses the same technology as Google Lens. It recognises the image itself, not just the words on it. Flower Boy identified instantly.

Phase 5Discogs

Used the Vision output to search Discogs. Returns year, label, catalog number, country, format, and market value per pressing. Added a format filter to only return vinyl releases. Shows the top 3 results so the user can pick the right pressing.

Phase 6Opening Spotify

Three attempts. The URI scheme didn't work on iPhone Safari. A dynamic link didn't work either. The fix was searching the Spotify API with the artist and title, grabbing the album ID from the response, and opening the web player URL directly. That worked.

It worked.

The gap between physical and digital music isn't just a design problem. Google already knows what your record looks like. Discogs already has every pressing ever made. Spotify already has your listening history. Vinyl Mode is what happens when those three things talk to each other.

Try it for yourself.

Usability Testing

I walked DJs and vinyl collectors through the key screens. The most consistent feedback had nothing to do with the scanner or the crate. Every DJ wanted it in their Wrapped.

They wanted their collection in their year-end recap. It fits naturally with the rest of Vinyl Mode: owning a record gives you access to something other listeners don't see.

So I took a shot at designing some Vinyl Wrapped slides myself.

Reflection

Designing within an existing system is its own skill.

Working inside Spotify's design language forced me to think within constraints I didn't set. Every decision had to coexist with something already built. It's easy to make things look good when you control everything. It's harder when you have to fit in.

Building made me a better designer.

Shipping the prototype taught me things Figma never could. OAuth flows, API integrations, redirect URIs. Working through all of it gave me a real understanding of how products are built. I now design with that context. I know what's easy to build, what's expensive, and what to push back on.

The idea is bigger than this project.

If I were to take this further, I'd want to do more structured research with actual collectors. Vinyl is growing, the APIs exist, and the data is there. Someone is going to build this. I just wanted to see if I could figure out how.

Back to home Next project