Interactive Video Player

Designing a flexible, full-screen video player with modular controls to meet the diverse needs of content creators.

My Role

Lead UX/UI Designer

Timeline

6 Weeks (Q4 2024)

Tools

Figma, Jira, User Interviews

An interactive video player on a smartphone.

The Challenge

Imagine you're a fitness instructor who just filmed the perfect portrait-mode workout, only to upload it and see it shrunk, letterboxed, and unprofessional. This was the reality for a growing number of our creators. The platform's video player was built for landscape video and had a rigid, one-size-fits-all feature set—including a mandatory timer and a restrictive title field—that was actively hindering our users' success.

"I can't make my content look professional. My portrait videos look tiny and the mandatory timer doesn't even make sense for my yoga flows."

— Anonymous User Feedback

The core problem was clear: our video tool was no longer serving its users. We needed to create a flexible, modern, and intuitive video experience that empowered creators, rather than limiting them.

A collage of early wireframe sketches and user flow diagrams for the video player.

Discovery & Definition

I began by immersing myself in our users' world. Through live interviews and analyzing over 50 pieces of product feedback, I identified three primary pain points:

  • Viewing Experience: Portrait videos were not displayed in a full-screen format, leading to a poor, unprofessional look.
  • Inflexible Controls: The mandatory timer and title were irrelevant or restrictive for many content types.
  • Lack of Customization: Creators had no control over the player's appearance, preventing them from matching it to their brand.

This research led to a clear design goal: Create a full-screen, modular video player that provides creators with the flexibility to control their content's presentation.

A collage of early wireframe sketches and user flow diagrams for the video player.

Ideation & Design

I conducted a competitive analysis of best-in-class platforms like Instagram, TikTok, and YouTube to establish a baseline for user expectations. This informed our early ideation, where I explored various layouts through low-fidelity sketches and wireframes, focusing on creating an intuitive and familiar UI.

A collage of early wireframe sketches and user flow diagrams for the video player.

The biggest design challenge was ensuring text overlays remained legible across diverse video backgrounds. I prototyped numerous solutions in Figma, ultimately developing a system with optional, semi-transparent overlays and text shadows that provided clarity without distracting from the content.

The "Before & After"

The most effective way to communicate the project's success is to visually compare the old player with the new design. The transformation from a restrictive, landscape-first tool to a flexible, full-screen experience is immediately apparent.

BEFORE

The old video player showing a small, letterboxed portrait video.

AFTER

The new, full-screen video player showing a beautiful portrait video with optional controls.

Impact & Outcomes

The redesigned player was a major success. By putting control back in the hands of our creators, we not only solved their primary pain points but also delivered significant business value. The project's impact was measured across several key metrics:

  • 45% Increase in creator satisfaction scores for the video module.
  • 30% Reduction in support tickets related to video player functionality.
  • 20% Increase in video content uploads by creators using portrait mode.
A final, polished mockup of the new, full-screen interactive video player in action.

Lessons Learned

This project reinforced the importance of deeply understanding user context. While our original player functioned, it failed because it didn't respect how our creators were actually producing content. Moving forward, this learning has been applied to other feature developments, ensuring we build for our users' real-world workflows.

In retrospect, I would have involved the development team even earlier in the prototyping phase. While we ultimately landed on a feasible solution for the text overlays, earlier technical validation could have saved some iteration cycles. This experience has improved my cross-functional collaboration process for subsequent projects.