Video Player
Designing an immersive, gesture-driven media playback engine where the interface disappears to let video content shine — pairing edge gestures with micro-haptic scrub precision.
View Figma Prototype →Project Overview
Business Challenge
Default mobile video players are cluttered with permanent onscreen buttons that obscure video subtitles and cinematographic framing. When users attempt to fast-forward, tiny progress timelines result in accidental skips, overshooting scenes by minutes. Furthermore, toggling audio language or subtitle tracks forces users to navigate into deep settings modals that interrupt the viewing flow. The challenge was to invent an invisible, gesture-first player architecture where interactions feel completely natural.
Research & User Pain Points
Observational streaming studies with 14 binge-watchers and video editors revealed:
- → Reaching across landscape screens to drag system volume or brightness menus broke immersion
- → Users missed desired dialogue moments because standard scrub bars lack variable micro-speed sensitivity
- → Swiping away from the app caused audio cutouts rather than fluid Picture-in-Picture background docking
- → Onscreen playheads frequently covered lower-third subtitles and subtitles were unreadable on bright scenes
User Flow
Design Decisions
Dual-edge vertical gesture channels
Mapped left-edge vertical swipe strictly to display brightness and right-edge to volume, providing immediate tactile HUD feedback without cluttering center screen.
Dynamic micro-haptic timeline scrubbing
Created a zoomable scrub bar that slows down seeking velocity as the user drags their finger further from the line, delivering subtle haptic feedback every second.
Zero-lag floating Picture-in-Picture
Designed a natural gesture swipe-up that transforms the video frame into a floating corner overlay with zero audio dropouts or animation stuttering.
High-legibility dynamic subtitles
Constructed automatic text background contrast shading that guarantees 100% subtitle readability regardless of underlying bright whites or saturated colors.
Outcome
Gesture adoption rate on first session without requiring onboarding walkthrough tutorials
Seamless Picture-in-Picture window docking during multitasking verified at 60fps
Zero button clutter over video media during uninterrupted playback mode
Interactive Figma Prototype
Video Player Figma Prototype
Deepak's interactive Figma prototype will be embedded here. Ready to paste your live Figma prototype embed link anytime!