The Studio That Fits Your Pocket
Client
Vlippr
Year
2024
Vlippr is a feature-rich, web-based video creation platform built around wide layouts, dense controls, and precision-driven workflows- everything mobile screens are bad at. The challenge wasn't making it fit. It was making it work without becoming a stripped-down, "lite" version of the product.
Scope of Work
A dense, Pro-grade desktop editor needed a mobile app that didn't feel like a downgrade.
The starting point was an audit of every desktop interaction that had no mobile equivalent, hover states, right-click menus, dense inline panels, then a search for touch-first patterns that preserved the same function without the same real estate.
TL;DR
Vlippr's desktop platform was built for wide layouts and dense, precision-driven controls, the opposite of what mobile does well. Working under the Lead Designer's system-first strategy, I owned the execution of a Mobile Design System that translated complex desktop workflows into focused, touch-first mobile flows.
Context & Problems
Trying to fit a cockpit dashboard onto a six-inch screen. Vlippr's desktop workflows relied on hover states, right-click menus, and dense controls, none of which have a mobile equivalent.
Desktop patterns like hover and right-click don't exist; workflows need rebuilding for thumbs.
Complex features like Voice Cloning needed more screen space than mobile naturally offers.
Without a strict component library, the UI risked becoming a fragmented, inconsistent mess.
Business Goal
Creators don't live at their desks, and mobile-first competitors were an active threat. The mandate was a full-power native app, not a lite companion.
Approach & Constraints
Rather than designing screens in isolation, the team built a Mobile Design System first, with typography scales, color tokens, and component states defined upfront as a translation layer, letting complex web features port to mobile fast without losing visual consistency.
Full desktop power, zero extra screen space, and two platforms to keep consistent.
Every complex feature had to survive the jump to mobile without becoming a stripped-down experience, while staying pixel-consistent across both Android and iOS.
Mobile offered a fraction of the desktop's space for the same dense, Pro-level features.
The system had to stay pixel-consistent across two platforms, not just one.
The brand's Pro positioning meant no feature could be quietly stripped for mobile.
Research & Exploration
The starting point was an audit of every desktop interaction that had no mobile equivalent, hover states, right-click menus, dense inline panels, then a search for touch-first patterns that preserved the same function without the same real estate.
Build the foundation before the interface.
The Lead Designer set this direction, a strict design system, defined upfront, before any individual screen work began.
Exploring solutions
Mouse-driven interactions had to become touch-first, without losing any of their underlying function.
Complex inline settings became bottom sheets, keeping controls reachable without cluttering the screen.
Voice Cloning's technical setup became a step-by-step wizard instead of one dense screen.
Popular Section and video grids adapted fluidly from tablets down to small phones.
Collaboration
The Lead Designer set the system-first strategy; I owned building it end to end.
85–90% Execution Ownership
Component library, tokens, patterns
2 Platforms
Android and iOS, kept in parity
Lead Designer set the system-first call before any screen design began.
Tight prototyping cycles with the Lead Designer refined the system as it was built.
Owned interaction guidelines and component-state docs so engineering could build without guesswork.
Outcomes
A strict component library meant engineers assembled screens like modular blocks instead of coding from scratch. Every core web feature made the jump to mobile, and the UI stayed identical across platforms.
100%
Core web features shipped
2
Platforms in full parity
0
Design debt across screens
85–90%
Execution owned end-to-end
Learnings
Designing one screen is easy, designing a system that holds up is hard.
A robust component library is the only real defense against chaos.
You can't just shrink a feature; you have to reimagine it.
A designer's job isn't finished until engineering understands the intent.
