My Framer Site

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

The Web 2.5 Constraint

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

The On-Chain Pivot

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

15% Design, 85% Vibe Code

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

I spent 85% of the time in Figma, crafting a high-fidelity design system that left zero ambiguity. The remaining 15%? 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.

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

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.

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.

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.

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.

Other Projects

Designing Gamic HQ - a Web3 Social & Finance Hub

2023 • Web 3 + Social Networking

300K+

Users onboarded within the first week of launch

$1.8M

Secured in funding through Binance Labs incubation

Designing Gamic HQ - a Web3 Social & Finance Hub

2023 • Web 3 + Social Networking

300K+

Users onboarded within the first week of launch

$1.8M

Secured in funding through Binance Labs incubation

Rethinking Savings in Web3 with

Zenya Protocol

2025 • Web 3 + Finance

60%

Of early testers appreciated the idea of goal-oriented vaults

Increase in asset utilization into productive vaults.

Rethinking Savings in Web3 with

Zenya Protocol

2025 • Web 3 + Finance

60%

Of early testers appreciated the idea of goal-oriented vaults

Increase in asset utilization into productive vaults.

Share with me

Got an idea?

Ready for a design adventure, or need product

design advice? Holla at me for fun collaboration.

Drop a message

SAY HELLO

Share with me

Got an idea?

Ready for a design adventure, or need product

design advice? Holla at me for fun collaboration.

Drop a message

SAY HELLO

Share with me

Got an idea?

Ready for a design adventure, or need product

design advice? Holla at me for fun collaboration.

Drop a message

SAY HELLO