Music Streaming & Social Platform
UI/UX Design | Product Design
Vocana is an artist-first music streaming and social platform designed to create fairer monetization and direct fan engagement. As Lead Product & UI/UX Designer, I owned product vision, UX direction, and system-level design decisions while supervising two senior designers. I partnered closely with engineering and marketing to translate business, artist, and technical needs into a scalable, component-driven experience across mobile and web, balancing execution quality, speed, and long-term product growth.
Overview
Project Scope
End-to end mobile app and web app
Role
Art Director, Lead UI/UX Designer
Platforms
iOS, Android, Web
Timeline
Around 1 year - full development and deployment
Tools
Figma, Illustrator, Photoshop
Status
Open Beta
Background
Vocana set out to rethink music streaming by bringing artists and fans into a single, community-driven platform. With many potential features on the table—from streaming and messaging to live experiences and marketplaces—the challenge was defining a focused MVP that delivered real value fast. The product was shaped around one core belief: meaningful artist–fan connections create stronger communities and fairer outcomes.
For artists
Music promotion, fan engagement, analytics, and monetization are spread across multiple platforms.
Identity verification, account setup, and ongoing management are time-consuming and repetitive.
Traditional streaming models offer poor transparency and unfair payouts.
The Challenge
The music ecosystem is noisy, fragmented, and inefficient for both sides:
For fans
Following artists across multiple platforms leads to fragmented updates.
Algorithm-driven feeds cause missed releases and announcements.
Supporting artists outside official channels risks impersonation and scams.
The Strategy
Objective 1: Ensure the "Public Beta" translates into a thriving, self-sustaining community.
The Goal: Prove the 3,000 invited users aren't just "tourists" but active participants.
KR 1: 75% Activation Rate for "Social Core" Actions.
Measurement: Successful completion of the onboarding flow where a user follows at least 3 artists and joins 1 "Hub" (community group) within their first 24 hours.
The Lead’s Angle: Proves the "Social" layer is visible and intuitive enough to drive behavior immediately.
KR 2: Increase "Engagement Depth" to 4+ sessions per week.
Measurement: In usability testing or proxy data, tracking if users move beyond just "listening" to "interacting" (commenting, reacting to a feed post, or visiting an artist's shop).
The Lead’s Angle: Shows that the design fosters a sense of community, not just a passive background-listening experience.
Objective 2: Validate the "Artist-First" value proposition through fan-to-artist connection points.
The Goal: Prove the platform's USP (Unique Selling Proposition) works better than mainstream competitors.
KR 1: 20% Direct-to-Artist Conversion Rate.
Measurement: The percentage of users who visit an artist’s profile and perform a "Direct Support" action (e.g., clicking the "Tip," "Merchandise," or "Follow" button).
The Lead’s Angle: Validates that the UI makes monetization and support tools prominent and frictionless.
KR 2: Reduce "Discovery Friction" for independent artists.
Measurement: A target where 40% of music playback comes from "Human Curation" or "Social Discovery" (Hubs/Feeds) rather than the search bar.
The Lead’s Angle: Proves your design successfully breaks the "top 1% artist" bias found on other streaming platforms.
KPIs:
Onboarding completion: >85%
Feature adoption (Hubs): 50%
Churn rate (7 day): <30%
The Solution: Vocana
Vocana is a unified music ecosystem that brings streaming, community, and artist support into a single platform.
Core pillars
Independent music streaming and downloads
Community hubs for real fan–artist interaction
Direct artist communication and engagement
Artist analytics and insights
Merchandising and monetization
User-centric payment model where subscriptions support the artists listeners actually stream
The goal is to reduce friction, increase trust, and create a more sustainable relationship between artists and fans.
Key UX Highlights
Stream-First Discovery
Music discovery prioritizes community and human signals over opaque algorithms, encouraging exploration through hubs and shared interests.
Community Hubs
Spaces where fans and artists interact directly, reducing noise and strengthening engagement without leaving the platform.
Design System & Figma UI Architecture
A key part of Vocana’s scalability was a robust, flexible design system built in Figma.
The UI system was designed to:
Support rapid iteration during beta
Scale across mobile and web
Adapt to evolving product requirements without redesign
Key characteristics
Centralized UI library used across all platforms
Component-driven architecture with variants and properties
Toggleable features and editable content within components
Clear separation between structure, content, and behavior
