Justin Bregar
Menu
close
Contact Me
Wowza

FlowPlayer

Modular and scalable video player for web and native
A paused video screen shows a moody scene of a young musician playing an electric bass guitar under dramatic lighting, with red and blue neon hues. A camera operator is visible in silhouette on the left, capturing the shot. On-screen text identifies the film as Roadside – By Jakob and Ryan, with a synopsis: “A stranger in a truck approaches a woman walking alone on a vacant road. Captured in one single, unbroken take.” Playback controls and a progress bar appear at the bottom, with the timestamp reading 22:43 / 35:00.

A little history

FlowPlayer was acquired by Wowza in 2022 to get access to their modular web/native video player as well as the video-on-demand content management system that was part of their online video platform (Flowplayer OVP). Active development on the player continued throughout my time with Wowza while Flowplayer OVP was combined with Wowza Video's best-in-class streaming capabilities to form Wowza Video 2.

During my time with Wowza I designed several additional features for the player itself and had started on a redesign of the player interface itself.

Fast Facts

Role

Wireframes, high-fidelity mockups, prototyping, user testing

Tools

Figma

Timeframe

2023-2025

FlowPlayer Redesign

We undertook an effort to redesign the FlowPlayer interface to better match industry best practices for video players (Jakob's law) and to reduce the visual weight of the interface (especially on smaller-screened devices).

Original vs. proposed redesign

A video player interface in the original Flowplayer design style shows a scene from a film shoot in a desert. A person holds a clapperboard marked “Roadside,” directed by Jakob & Ryan and filmed by Thomas Tangher. The board displays Roll A01, Scene 1, Take 9, and a digital timecode. The sky is clear and the background features a sandy, open landscape with low hills. Player controls appear along the bottom, including play/pause, timecode (00:22 / 1:42:33), volume, HD indicator, and fullscreen/cast icons.
Original

This is the classic FlowPlayer interface. Some of the issues identified by both internal and external developers and through user testing:

  • Volume is unintuitive and doesn't do a good job of showing a "muted" status
  • Interface elements are not logically grouped
  • "Cast" icon without label is confusing
  • Upper icons are very thin weight and get lost
  • Users didn't understand "HD" icon or that it was a control
  • Interface looks dated and heavy
Proposed redesign

This is the proposed redesign resulting in a more open player design. User testing showed favorable results in both task completion and users remarked that it looked more modern.

  • Volume changed from horizontal to icon with pop-out vertical slider
  • All interface elements relocated to "control bar"
  • Less-used functionality moved to menu
  • Icons have a uniform weight
  • Users felt the new design was more "modern" and "clean"
A video player interface in the new style shows a dimly lit performance scene with a young musician playing a bass guitar. The background features dramatic red and blue lighting, a glowing vertical light tube, and audio equipment. A silhouette of a camera operator is visible on the left, suggesting a behind-the-scenes look. Playback controls appear at the bottom, including pause/play, volume, fullscreen toggle, and a timestamp indicating 22:43 out of 35:00. The interface has a clean, modern aesthetic designed for immersive video viewing.

Server-side Ad Injection Feature Mockups

Using the "classic" FlowPlayer design
  • A person holds a film clapperboard in a desert setting under a clear sky. The board reads “Roadside,” directed by Jakob & Ryan and filmed by Thomas Tangher, with Roll A01, Scene 1, Take 9. A digital timecode display shows “16:21:34:21.” The video interface at the bottom indicates this is part of an ad (1 of 4) with a timestamp of 00:35 and a URL to sponsorurl.com.

    Playback state (no hover), Skippable ad

  • A film clapperboard is held up in a desert setting under a blue sky. The board displays details for a production titled “Roadside,” directed by Jakob & Ryan and filmed by Thomas Tangher, with Roll A01, Scene 1, Take 9, and a digital timecode of 16:21:34:21. On-screen video controls indicate this is an advertisement from sponsorurl.com, with 3 seconds elapsed out of 45. A yellow progress bar, volume control, and a "Skip" button are visible in the interface.

    Hover state, Single ad, Skippable, No countdown

    "Skip" text proved problematic during user testing for internationalization. In some languages, specifically Scandinavian and Greek, the word(s) for "skip" are quite long.
  • A film clapperboard is held in front of a desert landscape under a blue sky. The board shows details for the film “Roadside,” directed by Jakob & Ryan and filmed by Thomas Tangher, with Roll A01, Scene 1, Take 9, and a timecode of 16:21:34:21. On-screen video controls at the bottom indicate this is an advertisement with 3 seconds elapsed out of 45. A yellow progress bar, volume control, and the message “Video will resume shortly...” appear, indicating the ad is nearing completion.

    Hover state, Single ad, Un-skippable

  • A person holds a clapperboard in a desert landscape beneath a blue sky. The clapperboard shows the film title “Roadside,” directed by Jakob & Ryan and filmed by Thomas Tangher, with Roll A01, Scene 1, Take 9, and a digital timecode reading 16:21:34:21. On-screen video player elements indicate this is ad 1 of 4 from sponsorurl.com, currently at 00:03 of 00:45. A yellow progress bar, volume control, timestamp, and a “Skip” button at 00:35 are also visible.

    Hover state, Multi-ad block, Skippable with countdown to skip

    Initial "skip" text proved problematic during user testing for internationalization. In some languages, specifically Scandinavian and Greek, the word(s) for "skip" are quite long. A countdown timer proved to be just as intuitive while avoiding the internationalization problem.
Copyright 2025 Justin Bregar. All rights reserved.
crossmenu