LSTNR

LSTNR

Turning Music Discovery Into A Prediction Market

MY ROLE

UX Lead - Logo & Branding, Visual Design, User Flows, Vibe coding

DELIVERABLES

Component Libraries

User Interviews

High Fidelity Designs

TEAM

N/A

CLIENT / YEAR

Personal Project - 2026

The Problem At Hand

Music discovery today is passive. Fans listen, stream, and share, but they don't participate in the upside of an artist's success. The connection is emotional, but the value capture is one-sided.

I asked: What if you could invest in an artist's career just as you invest in a stock?

Where We Started

"Predicting success wasn't just hard; it was impossible without the right incentives."

I realized that for fans to care, they needed "skin in the game." I needed to build a platform that wasn't just about listening, but about **believing**. LSTNR was born from the idea of quantifying "clout" and "hype" into tradeable assets.

The Decision

Initially, I built LSTNR on a "Web 2.5" architecture—a sleek frontend backed by a centralized Supabase ledger. It worked for speed, but it introduced a critical ceiling: Trust.

Users were buying "shares" that only existed in our database. If LSTNR went offline, their assets vanished. I realized that for a prediction market to have real stakes, the ledger couldn't just be *secure*; it had to be *sovereign

This insight drove the decision to move the ledger on-chain. By migrating to a decentralized infrastructure, we solved three problems at once:

1. Trust: The user owns the asset, not the platform.

2. Liquidity: Markets can remain open 24/7 without centralized clearing.

3. Composability: LSTNR assets can now interact with the broader DeFi ecosystem.

The Process

Designing LSTNR wasn't just about pixels; it was about velocity.

I spent 15% of the time in Figma, crafting a high-fidelity design system that left zero ambiguity. The remaining 85%? Vibe coding.

Using Antigravity, I translated those designs into a functional Expo Go app at breakneck speed. This workflow allowed me to move from static vibe to shipping code without the typical dev handoff friction.

Onboarding

"Believe early. Grow together."

The onboarding isn't just a sign-up; it's a manifesto. We used deep, immersive gradients and a background orbit animation to set a premium, futuristic tone immediately.

I frame the value proposition instantly—"Invest in their story, earn in their success and by offering multiple entry points (Wallet, Google, Apple), I bridge the gap between web2 ease and web3 utility.

Artists & Label

Investing in Culture

This is the heart of LSTNR. We designed the Artist Detail page to look less like a playlist and more like a Bloomberg terminal for culture.

Market Confidence Score (MCS): A composite metric (0-100%) that gives users an instant read on sentiment, derived from volume retention and price stability.

The Chart: I implemented a financial-grade line chart (d3-shape) that scrubs smoothly, allowing users to track price history from "15m" to "All time."

Buy/Sell: The "Trade Sheet" is designed for speed—frictionless execution so fans can back their convictions instantly.

Predictions

Beyond trading artist shares, users can bet on specific outcomes. *Will [Artist] hit 1M streams?

Visual Clarity: We used color-coded badges (Green/Red) for "Yes/No" outcomes and clear "Open Position" summaries.

Discovery: A robust filter system (Outcome, End Date, Region) helps users find the markets they understand best.

Impact: This turns passive knowledge ("I know this song is blowing up") into an active asset class.

Inbox & Portfolio

Attendees could explore perks, lineups, and schedules. If an event required vendors, it was clearly indicated — giving attendees who were also sellers an opportunity to participate with a vendor pass.

Profile & Settings

Past tickets, complaints, and account info lived in one place. Importantly, attendees could convert into organizers without starting from scratch.

Key Metrics

Bridging the Gap

LSTNR successfully gamified music discovery without cheapening the art.

By combining the sleek aesthetics of a music player with the data density of

a trading app, we created a new category: **Cultural Finance.