Accessible Video Player with Live Transcripts

Led UX design based in research, developing strategy for a B2C WCAG 2.1 AA compliant and brand-aligned video player deployed across 9,000+ Hilton Hotel websites, directly impacting Hilton guests engagement.

A tablet device showing the larger view of the accessible video player on a hotel brand home page.

The Process: A Double Diamond Approach

The project utilized the Double Diamond methodology to ensure the solution addressed not just technical compliance, but the genuine barriers faced by users with disabilities.

1. Discover: Uncovering Barriers to Entry

Phase Goal: Understand the landscape of assistive technology and user pain points.

The discovery phase involved a divergence into the problem space, utilizing cross-functional collaboration with Content Design and Research partners.

  • Competitor Analysis: Audits of competitor video players identified significant industry gaps in accessibility.
  • Inclusive User Research: Qualitative sessions were conducted with a diverse range of users, including individuals with and without sight, hearing, or fine motor impairments.
  • Key Insight: Research revealed that screen reader users often abandoned content due to “focus traps” in video players. Additionally, global users were significantly less likely to engage with content lacking localized transcripts.

Skills Summary

  • Inclusive Design
  • WCAG 2.1 Compliance
  • Design Systems
  • Localization Strategy
  • Remote Usability Testing

Role:

Senior UX Designer
(Experience Design)

Team:

  • Product
  • Accessibility
  • Brand Marketing
  • User Research
  • Engineering
  • Quality Engineering
  • Experience Design
    • Content Design
    • UX Design
    • UI Design
  • Analytics

2. Define: Synthesizing Needs into Requirements

Phase Goal: Narrow down insights into actionable technical and UX requirements.

Insights were converged into specific constraints and goals to ensure full WCAG 2.1 AA compliance.

  • The “Must-Haves”: Requirements were defined for persistent, labeled controls (Sound On/Off, Motion Play/Pause) that remain visible on mobile interfaces.
  • Localization Strategy: A requirement for “live” and localized transcripts was established, necessitating a new metadata schema in the Marketing Asset Manager.
  • Technical Constraints: The solution required a modular component architecture capable of inheriting branding from 9,000+ individual hotel styles without compromising contrast ratios.

3. Develop: Iterative Prototyping & Inclusive Design

Phase Goal: Explore solutions through prototyping, testing, and engineering collaboration.

The process diverged again to explore and test design solutions against the defined constraints.

  • Mobile-First Architecture: Layouts were designed starting with mobile viewports, prioritizing large tap targets (minimum 44px) to accommodate users with fine motor control limitations.
  • Scalable Systems: A caption styling system was created to support variable font sizes without breaking the UI structure.
  • Engineering Alignment: Frequent synchronization with engineering teams ensured complex functional requirements (e.g., automated language detection) remained feasible within the timeline.
  • Contrast & Branding: UI overlays were rigorously tested against Hilton’s diverse color palettes to ensure text and icons consistently maintained accessible contrast ratios (4.5:1).

Global Components

Available across multi-brands with customized brand theming.

4. Deliver: Validation & Deployment at Scale

Phase Goal: Finalize, test, and launch the solution.

The final phase focused on convergence: refining the high-fidelity solution, quality assurance, and system integration.

  • System Integration: The modular component was delivered into the Content Management System, enabling instant deployment across all brand websites.
  • Accessibility Audit: Partnership with Quality Engineering facilitated rigorous accessibility audits, ensuring the player was fully navigable via keyboard and screen reader.
  • Outcome: The new player was successfully rolled out to 9,000+ sites, enabling marketing teams to utilize previously inaccessible video assets.

Outcomes & Impact

  • Scalable Deployment: Enabled video capability across 9,000+ hotel websites and all Hilton Brand websites.
  • Verified Compliance: Successfully passed all accessibility audits for WCAG 2.1 AA standards.
  • Engagement Growth: Achieved a 28% increase in video engagement, validating the correlation between accessibility and general usability.
  • Design System Integration: Fully integrated into the shared design system, maintaining individual brand expression and theming capabilities.

Reflection

Accessibility at scale presents an opportunity to elevate the guest experience beyond simple compliance. This initiative bridged usability, localization, and brand consistency, proving that inclusive design drives business results. The project unlocked the ability for Brand Marketing partners to leverage video content effectively across the entire global portfolio.

Discover more from April Walczak

Subscribe now to keep reading and get access to the full archive.

Continue reading