Results

Chroma wasn’t just a web design system. It was the foundation that would finally bridge web UX and product UX under a unified visual language.

My goal was to create a system flexible enough to serve marketing needs while establishing patterns that could eventually scale into the product itself, bringing two historically siloed teams into true collaboration.

Within 90 days of implementing Chroma components across key site pages, this goal was achieved alongside Vimeo gaining substantial development efficiency and business improvements:

42% reduction in development time

• Standardized components eliminated need for custom builds

• Streamlined handoff process between design and engineering teams

$180K+ annual cost savings

• Reduced development cycles and increased team productivity

• Fewer revision cycles due to consistent component library

18% increase in conversion rates

• Pages featuring Chroma components showed improved user engagement

• Better information hierarchy and visual consistency driving conversions

22% increase in MQLs and trial registrations

• Optimized feature pages leading to more qualified leads

• Improved user comprehension of product value proposition

Up to 40% improvement in time on site

• Enhanced user experience keeping visitors engaged longer

• Better content organization reducing bounce rates

The Problem

Following the success of the logged-out homepage redesign, Vimeo faced a critical challenge in scaling these improvements across the entire website.

The real challenge wasn’t technical. It was cultural. Web and product design teams operated independently with different tools, different design languages, and different definitions of success.

The lack of a cohesive design system created several obstacles:

Inconsistent user experience across touchpoints

• Duplicated design effort with teams solving the same problems separately

• Disconnected visual language between logged-out and logged-in experiences

• Fragmented component libraries making it impossible to move designers between teams

• Slow iteration cycles due to lack of shared foundations

• No standardized components for rapid page development

Development inefficiencies and resource constraints

• Designers building one-off solutions for each new page

• Engineering teams recreating similar components repeatedly

• Extended timelines for launching critical conversion pages

Missed conversion opportunities

• Secondary destination pages (feature and solution pages) weren’t optimized for user decision-making

• Inconsistent messaging and visual hierarchy hindering user comprehension

• Limited ability to test and iterate on high-traffic pages

The Idea

As Principal UX Designer, I proposed creating Chroma — a comprehensive design system named as a nod to green screen chroma key techniques in filmmaking and Vimeo’s predominantly monochromatic product interface.

The strategy focused on three key objectives:

Systematize successful homepage patterns

• Codify the hero video sections, 50/50 split layouts, modal video behaviors, and spacing that drove homepage success

• Establish consistent typography, iconography, and monochromatic color principles

• Create reusable carousel and comparison table components

Prioritize high-impact conversion pages

• Build a Feature/Solution Page Toolkit centered on the Player page — Vimeo’s iconic product

• Focus on pages visited prior to pricing where most paid registrations happen

• Ensure components support both video professionals and enterprise audiences

Enable rapid iteration and testing

• Develop atomic design principles with atoms, molecules, and components

• Create flexibility for A/B testing different messaging and layouts

• Establish foundation for ongoing page optimization

The Action

I led the development of Chroma through a phased approach involving cross-functional collaboration and user validation:

Research & Foundation Building

• Evaluated existing website components and ranked most-used patterns

• Collaborated with Product Marketing, Product, and Content teams to understand page requirements

• Established atomic design system structure with clear component hierarchy

Player Page Development & Testing

• Designed comprehensive Player page using new Chroma components as the pilot implementation

• Conducted extensive user testing with both Vimeo customers and non-customers across desktop and mobile

• Validated component effectiveness through user feedback and comprehension testing

System Architecture & Rollout

• Partnered with Senior Designer to atomize components into scalable design system

• Built molecular design system with clear atoms, molecules, and component relationships

• Created toolkit for Feature/Solution pages and other high-converting site sections

What I Brought

Design (UI/UX)

• Led end-to-end design system development from research through implementation

• Created high-fidelity component library and usage guidelines

• Conducted user testing to validate component effectiveness and page comprehension

Strategy

• Analyzed conversion data to prioritize component development

• Defined success metrics around development efficiency and page performance

• Established rollout strategy for systematic implementation across site

Leadership

• Coordinated cross-functional teams including Product Marketing, Engineering, and Content

• Managed stakeholder alignment on design system principles and implementation timeline

• Facilitated component standardization and adoption across design and development teams

Before & After Comparison

The fragmented approach suffered from:

• Oversized typography creating visual hierarchy conflicts across pages

• Abstract product UI representations not demonstrating functionality

• Overpowering content hierarchy overwhelming users

• Inconsistent layouts and spacing leading to development bottlenecks

• Mismatched light and dark mode implementations lacking cohesion

• Developers rebuilding similar components repeatedly, increasing costs

• Extended QA cycles from browser inconsistencies and layout conflicts

• Fundamental disconnect between logged-out and logged-in pages

The systematic approach addressed issues by:

• Refined typography scale creating improved hierarchy and readability

• Video-first strategy showcasing authentic product capabilities

• Optimized content density balancing info with cognitive load

• Better accessibility standards with improved contrast and color ratios

• Strategic messaging aligning content with decision-making

• Atomic component foundations with rules preventing inconsistencies

• Set spacing eliminating layout conflicts and reducing dev time

• Cohesive visual language bridging logged-out and logged-in experience

User Testing Insights

The Player page user testing revealed strong validation for Chroma components while identifying optimization opportunities:

Key Successes

• Strong overall satisfaction with the new page design and information architecture

• Comparison table identified as most valuable content by users repeatedly

• High-quality, ad-free, and customizability messaging resonated strongly with both customer segments

• Professional aesthetic significantly improved user perception versus legacy pages

Critical Improvements Identified

• Content prioritization: Users wanted pricing information higher on mobile pages

• Visual demonstrations: Request for more product UI animations and interactive elements

• Technical feature clarity: Need for explanatory tooltips on comparison table features

• Redundancy reduction: Use Cases section identified as repetitive and removable

Component Highlights

Chroma’s success centered on key component categories that addressed specific user needs:

Hero Video Components

Built responsive video players with consistent branding and modal behaviors that showcase product functionality authentically rather than abstract marketing footage.

Comparison Tables

Developed comprehensive feature comparison components that users consistently identified as the most valuable content for decision-making, with expandable technical details.

50/50 Split Sections

Created flexible layout components balancing copy and visuals that work effectively for both video professionals and enterprise messaging requirements.

Feature Demonstration Blocks

Designed modular sections showcasing product UI with minimal, effective imagery that helps users understand capabilities without overwhelming cognitive load.

Reflection

The project demonstrated that investing in design systems pays dividends far beyond initial development efficiency.

Key takeaways:

User testing validates system decisions

• Component effectiveness must be proven through real user feedback, not internal assumptions

• Iterative testing identifies optimization opportunities that improve both UX and conversion

Cross-functional collaboration drives adoption

• Success requires alignment between Design, Engineering, Product Marketing, and Content teams

• Clear component guidelines and usage principles prevent system drift over time

Business impact justifies system investment

• Development time reduction and cost savings provide clear ROI for design system initiatives

• Consistent user experience improvements drive measurable conversion and engagement gains

Atomic design principles enable scalability

• Starting with a strong foundational structure allows for rapid expansion and modification

• Molecular component relationships maintain consistency while enabling customization

Moving forward, Chroma provides the foundation for continued optimization across Vimeo’s digital ecosystem. The system enables rapid A/B testing of messaging and layouts while maintaining visual consistency. Future enhancements will focus on personalization capabilities and expanded component libraries for additional page types and user journeys.

This case study demonstrates how systematic design thinking can transform both user experience and business efficiency, creating measurable value for organizations investing in scalable design solutions.

Building a Better Design Team

Designing Chroma taught me that the most impactful design systems aren’t just component libraries. They’re organizational bridges.

When approaching this initiative, I saw an opportunity to solve a bigger problem: a disconnect between how Vimeo presented itself to the world (web) and how users actually experienced the product.

The breakthrough came when I stopped thinking about Chroma as “the web design system” and started positioning it as “the first phase of Vimeo’s unified design language.”

This reframing changed everything:

• Product designers became collaborators instead of bystanders

• Component decisions gained strategic weight beyond marketing needs

• Leadership saw Chroma as infrastructure investment, not just web project

• We built in extensibility that made future product integration inevitable