Leigh Arriane Buendia
Back

JV Live: Live Streaming & Entertainment App

A creator-first live streaming platform built from scratch — going live in under 3 taps.

Overview

JV Live (Just Vibing Entertainment) is a creator-first live streaming platform built for musicians, comedians, fashion influencers, and hobbyists. Designed from 0→1 with 100+ high-fidelity screens covering real-time broadcasting, virtual gifting, audience interaction, and a full social layer that keeps communities engaged between broadcasts.

Role

Solo UX/UI Designer: designed 100+ hi-fi screens, interactive prototypes, and developer handoff specs for a creator-first mobile live streaming platform.

Duration

1–3 months

Team

Solo designer, collaborated with developers

Deliverables

100+ high-fidelity screens, interactive prototypes, developer handoff specs

Tech Stack

FigmaFigJam

The Problem

Content creators — musicians, comedians, fashion influencers, hobbyists — lacked a dedicated mobile platform that combined live streaming with social community features. Existing apps either prioritized passive video consumption (short-form feeds) or treated live streaming as a secondary feature buried inside a larger ecosystem.

Creators needed a space where going live was the main event, not an afterthought. They wanted tools for real-time audience interaction, monetization through virtual gifting, and a social layer that kept communities engaged between broadcasts.

Design a full-featured mobile app from scratch that makes it effortless for creators to broadcast, build an audience, and earn — while giving viewers a rich, engaging experience that keeps them coming back.

Research & Discovery

Without formal user research resources, I leaned on competitive analysis and close collaboration with stakeholders who had deep knowledge of the creator economy.

Competitive analysis board

Competitive Landscape

I audited live streaming features across TikTok, Instagram Live, Twitch, and BIGO Live to identify patterns and gaps.

01
Going live is buriedMost platforms hide the "go live" action behind multiple taps — creating friction at the most critical moment for creators.
02
Confusing gifting interfacesVirtual currency systems are often unclear, with opaque exchange rates and gifting UIs that feel more like gambling than genuine appreciation.
03
Multi-person live rooms are rareCollaborative live streams — co-hosting, guest appearances — are technically limited or missing entirely on most platforms.
04
Discovery relies on algorithmsLive content discovery leans too heavily on algorithmic feeds rather than giving viewers intentional browsing tools.

Key Insights That Shaped the Design

Creators want to go live in under 3 taps from the home screen
Viewers need clear entry points to discover live content vs. pre-recorded posts
Trust and safety features (block, report, mute) must be accessible but non-intrusive
A virtual currency system needs to feel rewarding for creators without being predatory toward viewers
The app needs to function as a social platform between live sessions — not just during them

Ideation & Design Decisions

Information Architecture

I structured the app around five core tabs — Feed, Home, Create (+), Chats, Profile — with the "Create" action anchored at the center of the navigation bar using a distinctive pink icon. This placement ensures content creation is always one tap away, reinforcing the platform's creator-first philosophy.

The Home screen uses a layered content hierarchy: live user avatars at the top (social proximity), a Spotlight carousel (editorial curation), Top Lives (trending), and Browse by Category (intentional discovery). I also designed empty states for when no lives are active, gracefully falling back to category browsing so the experience never feels dead.

Information architecture diagram

Onboarding & Authentication

The registration flow is a multi-step process with a progress bar to reduce abandonment: email → OTP verification → password creation (with real-time strength feedback) → interest selection → personal details → success. Each step is a single, focused screen to reduce cognitive load.

I designed three parallel auth paths — email/password, social login (Facebook, Google, Apple), and the full registration flow — along with a complete forgot-password recovery journey. A cancel registration modal with a warning ensures users don't lose progress accidentally.

Onboarding step 1 — email
Onboarding step 2 — OTP verification
Onboarding step 3 — password
Onboarding step 4 — interests
Onboarding step 5 — personal details

Content Creation Pipeline

The Create Post flow supports three modes — Video, Photo, and LIVE — accessible via a shared camera interface with a bottom toggle. For video, I designed duration presets (15s, 30s, 60s), AR filters, flash toggle, front/rear camera switching, and a full post-recording editing flow: trim video, edit cover image, add sounds (searchable by mood: Happy, Funny, Playful, Sad, Dramatic), select a category, add hashtags, and set privacy (Everyone vs. Only You).

Every destructive action has a confirmation modal — discarding a video, discarding a photo — to prevent accidental content loss.

Camera interface — three modes
Video editing flow
Sound selection by mood
Post settings — hashtags and privacy

The Live Streaming Experience

This was the most complex design challenge. I designed the live experience from both perspectives.

Viewer sideFull-screen immersive video with an overlaid chat feed, floating heart reactions, viewer count, stream duration, category tags, and a follow CTA. The gifting system uses a bottom sheet with tiered virtual items (Candy at 5 coins up to JV Coin at 25,000), a coin recharge flow with predefined bundles, and clear insufficient-balance handling that redirects to purchase.
Streamer sideThe "Going LIVE" setup flow walks the streamer through title, description, and category selection before a final confirmation with a countdown timer. Once live, the streamer sees chat, viewer counts, and can accept or decline join requests from viewers who want to co-stream.

Multi-person rooms scale from 2 to 6 participants with adaptive grid layouts — this required careful attention to how video tiles resize and reflow as participants join.

Viewer live screen
Gifting bottom sheet
Streamer live screen
Go live setup flow
Multi-person room — 2 participants
Multi-person room — 4 participants
Multi-person room — 6 participants

Feed & Social Layer

The Feed tab uses a vertical, full-screen swipe format (similar to TikTok/Reels) with tabs for Spotlight, LIVE, For You, and Following. Each post displays engagement actions on the right rail — heart (with count), comment, mute, and share. The share sheet includes both in-app contacts and external platforms (Instagram, Messenger, WhatsApp, TikTok, Copy Link).

Comments support threaded replies and inline liking. Post management gives creators access to Save, Edit, Privacy, and Delete via a "More" action sheet, with delete requiring confirmation.

Feed — For You tab
Feed — LIVE tab
Comments thread
Share sheet

Profiles & Social Features

I designed two profile variants: self-view (with Edit Profile and Share Profile CTAs) and other-user view (with Follow/Following toggle and Message CTA). The profile header features a cover photo, avatar, and stats (Posts, Followers, Following), with content filterable by tabs: All Posts, Videos, Photos, and LIVE.

The Edit Profile flow breaks each field into its own dedicated screen (Name, Birthday, Gender, Address, Email, Phone, Language, Bio, Connected Accounts) for focused editing on mobile. From another user's profile, the three-dot menu surfaces Block User and Report User flows — both with confirmation modals. Blocking shows a clear "This account is blocked" state.

Own profile view
Other user profile view
Edit profile screen

Messaging

The chat system includes an inbox with message previews, unread indicators, and swipe actions (mute, block, delete). I designed flows for sending a first message (search for users, distinguish between "Following" and "People You May Know"), replying to existing conversations, and all management actions with their respective confirmation modals.

Message inbox
Conversation view
New message — search for users

Trust, Safety & System States

Throughout the app, I prioritized user safety and clear communication.

Block/Report flows are accessible from profiles, messages, and posts — each with confirmation dialogs
Report Post includes categorized reasons (Inappropriate Content, Bullying, Selling Restricted Items, Scam/Fraud, Others with free-text input) and a success confirmation
Account Deletion lives in Settings with a confirmation modal before redirecting to login
Error 404 and Coming Soon placeholder screens ensure the app handles edge cases gracefully
Update Alert with both "Update" and "Restart Application" states
Every empty state (no messages, no notifications, no search results, no live content) includes a clear message and a relevant CTA to guide users forward
Report post — categorized reasons
Blocked account state
Empty state — no messages

Final Design & Visual Language

The visual system uses a dark theme as its foundation — a natural choice for a media-heavy app where content needs to be the focal point.

Brand PinkGradient
Neon Green#00FF7F
Background#111111
Surface#1E1E1E
White#FFFFFF
Muted Gray#9E9E9E
TypefaceProxima Nova
Display32px · Extrabold
Going Live Now
Heading 128px · Extrabold
Trending Streams
Heading 224px · Semibold
For You
Heading 320px · Semibold
Live Now
Body Large18px · Semibold
Welcome to JV Live — your space to create and connect.
Body16px · Regular
Follow creators to see their streams in your feed.
Body Small14px · Regular
3.2K watching · LIVE
Caption12px · Regular
2 hours ago · Music

Typography is bold and uppercase for screen titles, creating clear visual hierarchy. The bottom navigation uses an icon-plus-label pattern with the central "Create" button elevated and styled distinctively in pink.

100+

unique screens covering onboarding, authentication, home, feed, search, content creation (video + photo + LIVE), live streaming (viewer + streamer + rooms), profiles, messaging, notifications, settings, and system states.

Final design screens overview

Results & Impact

This project is currently in the development handoff phase and has not yet launched publicly. However, the design work achieved several important milestones.

01
Complete design system deliveredDelivered to the development team, reducing implementation ambiguity and enabling parallel frontend development.
02
Full edge case coverageEmpty states, error handling, destructive action confirmations, and permission flows — minimizing the need for design decisions during development.
03
Stakeholder alignment achievedComprehensive Figma prototypes allowed the team to walk through every user journey before writing a single line of code.
04
Scalable component libraryBuilt in Figma to support future feature additions without redesigning foundational elements.
Design system components
Figma prototype walkthrough

Retrospective & Learnings

01
What went wellDesigning both sides of the marketplace (creator and viewer) in parallel helped me catch UX inconsistencies early — for example, ensuring the follow CTA behaves identically whether encountered in search results, on a profile, or during a live stream.
02
What I'd do differentlyIf I had the opportunity, I would have conducted usability testing on the gifting flow before handoff. The multi-step process (tap gift icon → browse → select → confirm → send) has 5 interaction points, and I suspect there's room to reduce friction — possibly by allowing "quick send" for previously purchased gifts.
03
Biggest challengeThe multi-person LIVE room layouts. Designing adaptive grid layouts that accommodate 2–6 simultaneous video feeds while keeping the chat and engagement layer accessible required significant iteration on spatial hierarchy and touch targets.

Tools & Technologies

FigmaFigJam