#Video App — Design System & Product UI

A short-video streaming platform where users filter videos by preference and receive personalized recommendations. The product covers video playback, search, paid content, and a VIP membership system. I designed the entire product solo — from the icon library to every screen.

Design System & Guidelines

I walked the full “zero to design system” path: define the visual identity first, then codify the rules — typography, a primary/secondary color scale, a neutral ramp, and a general icon set spanning navigation, actions, membership, and coins — so every later screen was assembled instead of reinvented.

Video Player

The player was designed for both light and dark contexts, with a compact variant for in-feed preview. Playback controls, progress states, and overlay layers were specified as components, so the same behavior could be reused across full-screen, embedded, and preview scenarios.

GIF Creation Tool

A built-in clip-to-GIF tool: select your best 8 seconds, generate, share — three steps. Progress and result screens keep the player's dark context, so the tool feels continuous with content consumption rather than bolted on.

Account System

Complete account flows — profile, phone and email binding, pattern lock, account recovery, and password reset — with every state specified, including empty, loading, and error states. Rank badges and the membership tier system gave the product a progressive visual ramp without adding interface complexity.