Designing a Recoloring System for Transparent Video: Making Motion Adaptable Across Brands
Product design | Wix wow
Transparent Video introduced a new motion format to Wix, allowing creators to use videos with transparent backgrounds directly on their websites. As the product evolved, we identified a key challenge: helping motion assets adapt naturally to different brands and visual styles. This led to the development of the recoloring system.
The problem was that transparent videos were designed to be reusable across many websites, yet a single visual treatment rarely fits every brand. Creators needed a way to adapt motion content to their site's visual identity without relying on external editing tools or maintaining multiple versions of the same asset.
The goal was to make transparent videos adaptable to different visual identities while keeping the customization experience simple, intuitive, and accessible.
Transparent video Light Wash preset
Transparent video Dark Wash preset
Transparent video - Hue preset
Transparent video - original colors
Research
To understand how motion assets respond to color transformations, I mapped a wide range of video styles, aesthetics, and visual characteristics.
The research focused on:
-
Which types of videos respond well to recoloring.
-
Which transformations preserve visual quality.
-
Which adjustments are meaningful to users.
-
Where automation is more valuable than manual control.
Solution
To make video recoloring accessible, we translated complex color transformation capabilities into a set of curated presets.
Built on top of Duotone and Hue/Saturation models, the presets allowed creators to quickly adapt motion assets to their brand without needing to understand the underlying color mechanics.
The initial preset collection included Light Wash, Dark Wash, and Greyscale, providing a broad range of visual styles while keeping the experience simple and approachable.
Site Styles Integration
To support brand consistency, recoloring presets were connected directly to Site Styles.
Videos could automatically inherit visual characteristics from the website, making motion feel like a natural extension of the design system.
Advanced Customization
For users who wanted more control, additional editing options were layered on top of the preset system. This allowed creators to start with strong defaults and customize only when needed.
WHAT
Product & content designer
WHERE
Wix WowTeam
WHEN
2019
PROJECT GOALS
NEW UNIQUE CONTENT
We envisioned a product that retained the charm of GIFs while offering enhanced features such as high-quality resolution, recolor options, sound, and interactions, all aimed at setting a new standard in web content creation. Additionally, we wanted to provide users with a rich Transparent Videos library and the ability to upload their own videos with alpha channel to stream them on any Wix site as transparent.
DARK & LIGHT WASH
Behind the scenes, we used duotone coloring: in Dark Wash, we hid the black, and in Light Wash, we hid the white to create a seamless experience with the coloring options.
Content Ecosystem
Alongside the recoloring system, we developed a curated library of transparent videos.
The library enabled users to immediately experience the value of the feature while ensuring the available content worked well with the recoloring model.
Instagram screenshots of potential artists for collaboration. 2019
Impact
The recoloring system transformed transparent videos from static assets into adaptable design elements. Creators could integrate motion into their websites while maintaining visual consistency across different brands, styles, and use cases.
The feature saw strong adoption and became a key part of the Transparent Video experience.
User site with original Transparent video
User site using 'Recolor''
Wix Studio Template featuring Transparent video
User site using 'Recolor''
User site with original Transparent video
User site with original Transparent video