/ WORK / 05 – VOCAL SPLIT
CASE / 016 · Product Design · Design System · Frontend
VOCAL SPLIT
Upload. Process. Done. An AI-powered vocal remover that separates stems in under 60 seconds — no signup, no friction, no compromise on quality.
Unbland designs, builds, and operates custom digital products for media and sports platforms in 20+ verticals. Consider starting your own project similar to this one.
Stack
→
Download PDF
§ 01
Context
Audio tools are powerful but hostile — steep learning curves keep creators from shipping.
Professional audio software assumes expertise. Vocal wanted to make broadcast-quality production accessible to solo creators without dumbing down the output.
§ 02
Approach
Complex engine, simple cockpit.
| L1 · Map | Shadowed 20 creators to understand workflow friction points and mental models | User research | Workflow map + personas |
| L2 · Build | Component-driven UI with progressive disclosure — power features visible only when needed | React · Storybook | Design system + components |
| L3 · Ship | Iterative launch with A/B tested onboarding and real-time analytics | TypeScript · Tailwind | Production frontend |
§ 03
Outcome
From first open to first publish — under 4 minutes.
Creator onboarding completion jumped from 23% to 81%. Average time-to-first-publish dropped by 74%. The design system now powers 3 product surfaces with 120+ shared components.
§ TESTIMONIAL
Product Design for AI Audio Platform
"Our users stopped asking for tutorials. That's the highest compliment a product can get."
The progressive disclosure approach was a game changer. Power users found depth; new users found simplicity. Same interface.
Vocal Product Team
CPO, STARTUP