Crafting a More Inclusive, Custom Vimeo Player
Summary
As the Principal Product Designer on the Player team, I led the redesign of Vimeo's core video player. This was a critical initiative to address long-standing issues with outdated technology, inconsistent design, and limited customization. This project achieved a significant business impact, resulting in award-winning accessibility features, a significant increase in Enterprise Annual Recurring Revenue (ARR), and improved creator satisfaction.
Role
Principal Product Designer
Date
2023-2024
Team
1 PM, 5 Engineers, 1 UX Researcher, 1 Designer
Outcomes
WCAG 2.1 AA Certified: Met rigorous accessibility standards, certified by a third-party audit.
Major Revenue Growth: Generated significant new revenue from enterprise clients.
Award-Winning Design: Honored with the Barry Award from the American Council of the Blind.
90% CSAT: Improved creator and viewer satisfaction
Problem
Outdated, Inconsistent, Limited
The Vimeo player was a legacy product with significant challenges. Its UI and UX were not aligned with Vimeo's modern design system, creating a disjointed experience for users. Outdated technology slowed down development and made it difficult to onboard new engineers. For creators, the player offered limited customization which hindered their ability to brand their content. We also had major accessibility gaps, including a lack of support for multiple audio tracks and customizable closed captions, which limited our compliance with WCAG and FCC standards.
Some of the inconsistencies and off-brand issues annotated.
Solution
Rebuilt for Accessibility, Customization, & Scale
We executed a strategic, ground-up rebuild of the Vimeo Player's frontend to move it from a legacy product to a key business differentiator and an award-winning, fully compliant tool.
Approach
A Research-Driven, Collaborative Approach
The team and I conducted a comprehensive accessibility audit, which gave us a clear roadmap of the gaps we needed to close. I surveyed Vimeo employees and users to find out what was and wasn’t working. On the design side, I conducted a deep-dive audit of the existing player and our design system, identifying every inconsistency. I created interactive prototypes to test usability with different users, ensuring our solutions were compliant and intuitive.
A competitive audit identified key feature gaps in accessibility and enterprise tooling, which informed our scope for the redesign.
What’s working?
“It’s iconic!”
After surveying Vimeo users, I found the player's main strengths are rooted in its professional, simple, and iconic design, offering users a clean and recognizable brand experience. Its strong features include superior customizability, a responsive and accessible interface, and essential interaction tools backed by valuable stats.
What’s Not working?
“Clunky and outdated.”
In that same survey, I found the primary dissatisfaction stems from the player's perceived clunky and outdated performance, compounded by a general feeling of being off-brand. Crucial missing elements include fast forward and rewind controls, the ability to mute, and the absence of audio descriptions and closed caption customization. A poor mobile experience added another area of improvement.
Iteration & Refinement
Multiple design iterations were presented and critiqued internally as well as tested with users. I explored ambitious, complete design overhauls as well as a maturation of the recognizable Vimeo player.
Final Design
Unlocking Access:
WCAG 2.1 AA Features
We expanded the player to support multiple audio tracks, enabling audio descriptions and different language options. We also introduced extensive closed caption customization, allowing viewers to adjust font size, color, and styling to meet their needs.
Creators can now drag and drop audio files directly into their video settings, with options to configure the language or type of audio track.
We integrated FCC-required customization settings into an intuitive, visually appealing menu, enabling viewers to personalize captions to suit their needs.
By incorporating multiple audio tracks, we created a player that caters to all viewers, including those with impairments or language barriers.
Users can now enhance readability by adjusting contrast, size, and color, ensuring captions are both functional and aesthetically pleasing.
Final Design
Seamless Branding: Creator Customization Tools
We introduced a robust set of customization options for creators, allowing them to adjust colors, icons, and fonts, while also decoupling the playbar for more flexible positioning.
The new settings are intuitive and offer real-time previews, allowing creators to save presets to speed up future customizations.
Enhanced customization options allow creators to infuse their brand personality into their player, making it fully their own.
Customized videos look stunning, whether it's viewed on Vimeo.com or embedded on a user’s site.
Final Design
Scalable Architecture & Design System
The new architecture created a scalable foundation, making it easier for our team to build new features and iterate on the player experience. Each component and pattern was documented in detail to ensure a seamless transition from design to development.
I documented every player component in detail, simplifying the development process for engineers and reducing the time spent on visual QA.
Outcomes
Award-Winning Results & Significant Revenue
The Vimeo Player is no longer a legacy product. It is now a powerful, accessible, and customizable tool that serves as a key differentiator for our enterprise business. The impact was immediate and powerful.
90%+ CSAT: Customer satisfaction remained high, with fewer support complaints related to styling and customization limitations.
✔️
WCAG 2.1 AA Certified
The new player met rigorous accessibility standards, certified by a third-party audit.
✔️
Barry Award
The player was recognized with the Barry Award from the American Council of the Blind for its accessibility features.
✔️
Millions in ARR Growth
The improvements led to a boost from enterprise clients, who were now able to offer a fully compliant player.