UX Motion Design System for VERV
Client
verv
Timeline
3 days of filming, 6 months or so of production
Year
2021
Role
Lead Motion Designer – System Design, Visual Strategy, Editing Workflow, Creative Direction
Verv has ranked among the top mobile app publishers in fitness in Europe and the US, celebrating more app downloads than Fitbit or Nike. (from the forbes editor)
As part of a large-scale fitness app initiative, we developed a structured and scalable content production system for over 150 exercise videos. The core goal was to create a consistent, intuitive, and informative experience for users performing workouts—especially those watching on mobile devices or in motion.
Challenges
User Diversity
The system had to accommodate varying user fitness levels, internet speeds, and mobile device capabilities.
Volume & Variation
Over 150 exercises targeting different body areas required visual unity across a wide range of movements, camera setups, and styles.
Scalability & Efficiency
With a high number of videos to produce and localize, the system had to be repeatable, modular, and easy to edit.
User Attention Limitations
While working out, users can’t watch the screen constantly. The challenge was to deliver key visual cues without overwhelming or distracting them.
Audio Constraints
Many users follow workouts without audio, meaning the visuals alone had to communicate technique and alignment.
My Contribution
Invented the 5x5 Seconds Rule
I introduced a 10-second loop structure for each exercise—5 seconds of a wide shot to show full-body alignment, followed by 5 seconds of a medium or close-up to focus on technique. This rhythm allowed users to look away and glance back at the screen without missing critical information.
Developed Behavioral Flow
The 5x5 format created a reliable viewing rhythm, encouraging users to naturally check the screen at regular intervals—building muscle memory and enhancing performance without cognitive overload.
Aligned Editing with Exercise Flow
This structure dictated not just the shot timing, but the entire video editing approach—making transitions predictable, purposeful, and user-centric.
Provided Creative Direction to External Editors
I onboarded and guided an outsourced editor through our editing principles and motion graphics standards, offering clear direction and ongoing feedback to ensure consistency and quality.
Created Presets & Tutorials
To support a high-volume workflow, I built templates and recorded guidance for editors to apply the structure quickly and consistently.
Collaborated Cross-Functionally
Worked closely with coaches, camera operators, editors, Art director, designers, and developers to align staging, shot planning, and visual storytelling with the system.
Pre-Production Structuring for Efficient 3-Day Shoot
Before filming began, I analyzed the initial dataset of exercises and identified inconsistencies and inefficiencies that could disrupt the shoot.
To streamline production, I created a structured table that categorised each exercise by type, camera setup, duration, and difficulty.
This planning tool became essential for coordinating scenes across three intense filming days—helping the production team reduce setup time, avoid redundancy, and stay on schedule.
exploration
staging floor colouring
tool
cinema 4d
cameras
I planned the camera setup and selected the best exterior angles based on the specifics of each exercise, coordinating the use of three cameras on stage to ensure we captured every movement effectively.
camera angles
-90º, -45º, 0
shots
wide shot
medium / close up
Seamlessness was essential
in every exercise
for the right
and the left
sides
Reception
Role: Motion graphics
Reception
Role: Motion graphics
For each exercise, I balanced informative value, practicality, and aesthetics to ensure clarity and visual appeal
video editing
I introduced the 5x5 method—5 seconds wide, 5 seconds close-up—to create a consistent rhythm that helps users stay synced with the workout, even when they can’t constantly watch the screen.
tools
premiere pro
using on-screen markers to ensure consistent framing, alignment, across all exercises
motion graphics
I developed a motion graphics system using four types of visual cues—informative, educative, focused, and directional—to guide users through exercises with clarity, even without audio.
educative
informative
focused
directional
guides and presets
To ensure smooth handover to external editors, I created guides, presets, and practical tips explaining the core motion and editing principles—making it easy to maintain consistency and quality across all outputs.
the one example of them.
tool
after effects
Behind the scenes during filming
Outcomes
Streamlined Production
Pre-planned tables and camera setups optimized a 3-day shoot, minimizing downtime and ensuring coverage of all exercises.
Consistent Visual Language
The 5x5 method and motion graphics system established a clear, repeatable structure across 150+ videos
Improved User Guidance
Visual cues (informative, educative, focused, directional) enabled users to follow workouts confidently—even without sound.
Efficient Collaboration
Documentation, guides, and presets simplified onboarding for external editors, maintaining quality and consistency at scale.
Scalable Content System
The workflows and principles developed became a foundation for future content production, localization, and feature updates.