Vimeo
Crafting a More Inclusive, Custom Player
Role: Principal Product Designer
Date: 2022-2024
Overview
As Principal Product Designer at Vimeo, I led the redesign of Vimeo’s video player to enhance customization, align with modern accessibility standards, and improve engineering efficiency. This overhaul addressed long-standing issues with branding flexibility, design inconsistencies, and limited accessibility features. Our solutions focused on four areas: design system integration, advanced player styling, multiple audio tracks, and closed caption customization.
Guiding Design Decisions
Target Audience
Creators and enterprise clients who need to fully customize their video player to reflect their brand.
Viewers who require enhanced accessibility features, such as closed captions or descriptive audio.
Vimeo’s internal engineering teams looking to streamline player development.
Success Metrics
Increase in customization feature usage by creators.
Higher adoption of accessibility features like multiple audio tracks and customizable closed captions.
Third-party audits confirming compliance with accessibility standards such as WCAG 2.1 AA.
Positive feedback from customers and major enterprise clients, with fewer support complaints.
Risks
The Vimeo player is used by millions of viewers daily. Any instability could affect the overall platform experience and potentially harm Vimeo’s business.
Design System Integration
Vimeo’s player offered limited customization options for creators, which reduced branding flexibility and created business constraints. The player’s UI and UX were not fully aligned with Vimeo’s design system, leading to inconsistencies. Moreover, outdated technologies slowed development and complicated onboarding for new engineers.
We rebuilt the player’s front-end using extensible, modern technologies that integrated seamlessly with Vimeo’s design system. This not only improved branding options but also increased developer velocity, enabling faster implementation of new features and reducing onboarding friction for engineers.
Design
Harmonizing Visual Design
I standardized fonts, colors, and icons across the player, ensuring consistency with Vimeo’s design system. Regular feedback from the design, product, and engineering teams kept all stakeholders aligned.
Design
Streamlining Development
I documented every player component in detail, simplifying the development process for engineers and reducing the time spent on visual QA.
Advanced Player Styling
The previous player offered limited color customization options, which restricted branding flexibility for creators. Fixed button positioning and a coupled playbar further limited the player's customization capabilities, leading to a suboptimal viewer experience.
We introduced extensive player customization options, enabling creators to adjust colors, icons, and text, while also decoupling the playbar for more flexible positioning of key elements. These changes gave creators full control over their video player’s appearance.
Design
Personalizing the Playback Experience
Enhanced customization options allow creators to infuse their brand personality into their player, making it fully their own.
Design
Effortless Customization
The new settings are intuitive and offer real-time previews, allowing creators to save presets for future customizations.
Design
Showcase Anywhere
Customized videos look stunning, whether it's viewed on Vimeo.com or embedded on a user’s site.
Multiple Audio Tracks
The limited support for single audio streams hindered accessibility, internationalization, and advanced content experiences.
We expanded the player’s audio capabilities to support multiple audio tracks. This allowed creators to add various language options, audio descriptions for the visually impaired, and other advanced features, catering to a wider audience.
Design
Easy Audio Integration
Creators can now drag and drop audio files directly into their video settings, with options to configure the language or type of audio track.
Design
Audio for Every Viewer
By incorporating multiple audio tracks, we created a player that caters to all viewers, including those with impairments or language barriers.
Closed Caption Customization
Vimeo’s player lacked customizable closed caption options, limiting accessibility and non-compliance with WCAG and FCC standards. This resulted in a poor user experience for viewers needing accessible content.
We introduced extensive closed caption customization options, allowing viewers to adjust font size, color, edge styling, background color, and opacity. Creators could also utilize WebVTT standards for richer closed caption styling.
Design
Custom and Compliant
We integrated FCC-required customization settings into an intuitive, visually appealing menu, enabling viewers to personalize captions to suit their needs.
Design
Personalize Your Playback
Users can now enhance readability by adjusting contrast, size, and color, ensuring captions are both functional and aesthetically pleasing.
Outcomes
A More Powerful, Inclusive Vimeo Player
Industry Recognition
The player received the Barry Award from the American Council of the Blind for its accessibility features, affirming our commitment to inclusivity.
Satisfied Customers
Customer satisfaction remained high, with fewer support complaints related to styling and customization limitations.
WCAG 2.1 AA
The player now meets WCAG 2.1 AA standards, contributing to significant annual recurring revenue.
Vimeo - Viewer Experience
Vimeo - Video Engagement
Vimeo - Lead Generation
PayPal - Benefits
PayPal - Offers