top of page

Video Hub Exploratory Research and Design

image.png
Laptop.png

My Role:

  • Led moderated usability testing on Video components with assistive tech users (via Fable)

  • Conducted competitive audit of accessible video patterns

  • Delivered inclusive video design templates for designers & devs

TL;DR

During the primary research and usability testing on the brand's new CMS launch, this project started as an accessibility audit and usability study focused on assistive technology users' feedback on video hub features. However, the findings led to a wider set of design recommendations aligned with universal design principles, benefiting all users regardless of ability.

PROJECT SCOPE

  • Research Categories: Competitive audit, Exploratory research

  • Design Categories: Strategic Design

  • Company: Bell Media

  • Role/ Contribution: UX Researcher / UX Strategist 

  • Timeline: 2 month

  • Cross-Functional Teams: UX Design, UX Research, Product Manager, Developer
  • Users: Canadian and English-speaking Assistive Technology Users

📚 BACKGROUND

After the CP24 app homepage redesign launched, the team received mixed feedback. While the update succeeded in reducing scroll length and introducing new content sections, developers raised concerns about potential accessibility gaps in Video Hub. This prompted a deeper investigation into how users with assistive technologies interact with video sections and what changes would support a more universal design.

As part of Bell Media’s CMS migration, I led accessibility-focused research on the video hub and related components. The goal was to ensure the redesigned video experience would be inclusive, intuitive, and compliant with accessibility standards. This involved competitive analysis and user testing with assistive technology users to shape a new design system template.

🔍 Problem

This research started by addressing accessibility issues, then expanded to define universal design strategies that improve the experience for all users—regardless of ability. The goal was to make video browsing intuitive, fast, and inclusive.

User Problem: 

  • Screen reader users couldn't perceive section groupings or navigate between videos efficiently.

  • Keyboard-only users struggled to interact with carousels and pagination controls.

  • Inaccessible ARIA labels and heading structures excluded a segment of the audience, impacting discoverability and trust.

Business Problem: 

  • User complaints and low ratings post-launch signaled usability and discoverability issues.

  • The lack of accessible design patterns posed compliance risks.

  • Inconsistent video section layouts reduced development scalability and design cohesion.

🎯 Research Goals

To go beyond the accessibility standards, by uncovering where video sections broke down in real-world use and identifying improvements that could serve both disabled and non-disabled users. 

We Focused on:

  • Accessibility barriers in navigation and labeling

  • Ease of content discovery in video sections

  • Expectations for video hub hierarchy and metadata

  • Preferences for scrolling vs. pagination

🧪 RESEARCH STRATEGY

To gain deep insights into real user behavior, we used a mixed-methods approach combining competitive audits with moderated testing. This allowed us to identify gaps in industry practices while also validating ideas directly with assistive technology users.

This research began as a discovery effort to understand accessibility issues in the video section. Through evaluative usability testing, we identified design barriers and proposed a universal design solution that improves the experience for all users.

🧭 Competitive Audit

Moderated interviews:

  • Participants: 3 Assistive Technology users, English-speaking; Screen Reader, Screen Magnification, Alternative Navigation. (recruited by Fable platform)

  • Objective: Competitive audit of video hub in 5 News platforms to identify best practice and pain point

  • Materials: 5 News platform on Desktop and Mobile web

  • Key Tasks: Find the video hub on the homepage, explore the possible navigations and features in the section

Why Moderated interview?

  • Enable follow-up questions

  • Observe natural exploration pattern

  • Ensure accessibility concerns surfaced organically

🧩 TESTING RESULTS

  • Horizontal scroll is efficient if clearly labeled

  • Screen magnification users prefer compact but spaced layouts

  • Screen reader users rely heavily on ARIA labels and consistent hierarchy

  • Pagination and arrow indicators reduce navigation overload

  • Clarity and predictability trump design flair

     Highlights

If the labels aren’t right, my screen reader just skips the whole section.

🛠️ Step-by-Step Recommendations

We structured our recommendations in progressive stages; from micro-level components to macro-level page templates. Each level findings was informed by competitive audit and accessibility heuristics. 

#       Accessible Video Card

Designed for clarity, scalability, and screen reader usability.

  • Present key content clearly (e.g., title, metadata)

  • Minimize visual clutter

  • Ensure compatibility with screen readers and keyboard navigation

#       Video Section Layout

Focuses on grouping and orientation across a set of cards.

  • Use clear section headings and logical grouping with matching ARIA labels

  • Support multiple navigation methods (scrolling, swiping, keyboard)

  • Offer cues to help users understand where they are in the flow

#       Pagination and Carousel patterns

Examined how motion and interaction patterns affect navigation. 

  • Offer flexible scroll or pagination options

  • Use visible and labeled controls

  • Provide orientation feedback (e.g., current page or item count)

  • Avoid blank, unlabeled, or duplicated buttons

#       Video Homepage and Leaf page

Evaluated competitors gaps to create universal templates that support both discoverability and accessibility.

  • Prioritize content hierarchy with visible labels
    Keep layouts clean, categorized, and easy to scan

  • Ensure video players and related content are fully accessible

  • Provide variety of contents in video player page for user to explore

NOTE:

Layout design suggestions also provided for each step to UX/UI team as the best practice and ideal pattern. 

​

Please email me for more information

🧪 REFLECTION

💡 What I Learned

  • Accessibility is not just a checklist, it unlocks universal design value for everyone

  • Conflicting needs between screen reader, magnification, and keyboard users required multi-perspective compromise to get the most efficient approach

🧠 Research Impact

The research led to concrete updates in the design system for News brands. It influenced component structure, content hierarchy, and development documentation for accessible video cards and sections in the new CMS;

  • Research informed a template-level design system for the new CMS rollout

  • Components tested here are now being scaled across other Bell Media brands

  • Helped define universal best practices for carousels, pagination, and metadata visibility

  • Highlighted technical dev requirements early (e.g., correct labeling, tab order, pagination clarity)

🔒 Challenges

  • Conflicting feedback between assistive technologies meant compromises in UI patterns

  • Some findings not yet implemented in development, due to CMS update timeline

  • Needed to visualize technical and UX impact clearly to advocate for prioritization

bottom of page