Picture-in-Picture

Media player that enables multitasking

COMPANY

Mozilla - Firefox

ROLE

Product Designer

EXPERTISE

Product Design

YEAR

2023

Project description

Picture-in-Picture (PiP), which minimizes a video into a smaller player, allows browser users to continue working in other tabs while keeping an eye on their videos. The users can move their PiP player around on their home screen and position it over other windows and apps. 

The PiP team aimed to elevate the video-watching experience by introducing additional controls such as subtitles, fast-forward, rewind, and more. This enhancement not only amplifies Firefox's daily and monthly active users (DAU and MAU) but also establishes it as the industry leader in Picture-in-Picture (PiP) functionality.

Role & Responsibilities

This was a collaborative effort across the Firefox desktop department, with a core fundamental team including a product manager, engineers, and myself as a product designer. My role involved generating design ideas, exploring different design options, prototyping, creating UI designs, delivering design specifications, and ensuring accessibility.

Process

I joined the team after launching the first phase of Picture-in-Picture. The product manager and engineers worked collaboratively with me to enhance the feature. We decided to adopt an agile process to ensure that we deliver the most useful features to media users, allowing them to multitask effectively.


Discover

Challenges and Goals

After introducing an early beta version of Picture-in-Picture (PiP), featuring only basic controls like play and volume buttons, approximately 2% of our Daily Active Users (DAU), totaling under 1.5 million users, have begun to utilize the PiP feature regularly. Notably, Firefox users allocate a significant portion of their browsing time, ranging from 20% to 60%, to video consumption, making PiP one of the top three features strongly associated with core active users. This encouraging trend indicates that by improving the PiP experience, Firefox can not only retain its current user base but also attract more DAU.

Competitive Analysis

I began exploring different web browsers to understand how they implement their picture-in-picture (PiP) mode.

  • Chrome: PiP entry is not easy. Lots of video controls are not available.

  • Safari: Right-click to use PiP. Lots of video controls are not available.

  • Opera: PiP has various video controls. Available for video conferencing.


Define

Problem

  • How might we optimize the Picture-in-Picture experience within Firefox to gain more daily active users, positioning Firefox PiP as the leader in the browser industry?

  • How might we increase user engagement with Picture-in-Picture?

Opportunity

While Firefox's main competitor, Chrome, offers a limited PiP experience, other competing browsers have expanded their PiP functionality with features such as a play scrubber and volume control. Also, our community eagerly anticipates a more robust and feature-rich PiP experience within Firefox. 

Hypothesis

We believe that offering full video play controls within PiP will enhance user engagement, aiming to minimize disruptions to the user experience amid divided attention and support them in maintaining focus on their primary task. This enhancement is expected to drive an increase in daily and monthly active users on Firefox. 

Develop

Phase 1

Analysis & Planning

Worldwide, approximately 1.5 billion individuals experience varying degrees of hearing impairment, while in the U.S., 5.9% of adults face significant hearing challenges, relying heavily on subtitles for video content across various devices. Furthermore, even users without hearing impairments find subtitles beneficial when viewing videos in unfamiliar languages. With this information, our team decided to integrate a subtitle feature into the PiP experience as the first step of the improvements.

“1.5 billion globally face hearing challenges”

Ideation

As the team initially prioritized the implementation of a subtitle feature as our first enhancement, I began to study how other platforms incorporate subtitles, particularly their presentation within subtitle settings. As a designer, it was imperative to maintain UI consistency; thus, we opted for a subtitle icon button in line with the existing UI style. Subsequently, I delved into exploring potential designs for the subtitle settings through wireframe sketches. These settings were envisioned to offer options for enabling/disabling subtitles and adjusting font sizes. 



Implementation

Following multiple iterations and team discussions, we decided to present our top choice to Firefox product leaders. It became apparent that a compact subtitle settings panel was more suitable for PiP, given the space constraints. I applied one of Firefox’s dark themes to the subtitle settings panel, not only enhancing its visibility across various video screens but also harmonizing with the distinct Firefox branding colors.

Phase 2

Analysis & Planning

While the engineers diligently worked on implementing the subtitle feature for PiP starting from Firefox 106, the project manager and I continued to advance the project by focusing on delivering full video play controls as per the plan.

We initiated the process of identifying the essential video controls for PiP, aiming to enhance Monthly Active Users (MAU) and boost user engagement. Moreover, we leveraged Connect Community, an online platform where Mozilla product enthusiasts exchange ideas and engage in discussions, to gather insights on the future expectations of PiP users.

We created a few user stories and acceptance criteria. An example is below.

  • As a user, I want to be able to rewind PiP video, so I can control the pace of my experience without switching from my primary task.

  • Acceptance Criteria:

    • I can rewind the video by moving a playhead along the scrubber.

    • I can rewind the video by using a backward button.

    • A playhead is moved along the scrubber when I click the backward button.

The items we decided to add to the current PiP are:

  • Volume control

  • Rewind and Forward

  • Play scrubber

  • DurationFullscreen


Ideation

I began translating my concept ideas into visual representations by using Figma. Through visual explorations, I presented various placements for each control within the PiP interface. Given that numerous video platforms place primary controls, such as play and play-related buttons, at the center of the video, we opted for this universal design approach. Secondary controls were then positioned on the right side, while the play duration was set on the left side, in line with our considerations


Design & Deliver

High-fidelity mockup

Following multiple iterations, I crafted high-fidelity mockups to specify the most effective styles for the PiP interface. Collaborating closely with an icon designer, we ensured each control conveyed clear meaning for immediate user comprehension.

To enhance visual cohesion, I standardized the UI styles with a monotone scheme, employing white on the controls and incorporating dark gradients at the bottom of the PiP interface to accentuate the controls. 

Accessibility

In our commitment to inclusivity, we incorporated an accessible keyboard shortcut feature when users hover over each control.

Let's break down the final design!

Here is a quick video of PiP


Conclusion

The impact

We have some good news after releasing the full controls of PiP without any promotions.

  • The average created PiPs per user rose from 2.2 to 3.3 PiPs per day.

  • The number of people who disable PiP dropped by half and remained.

  • The number of monthly active users of PiP grew by about 1.5%.

  • Retention of people using PiP in Firefox is 2.5 times higher than those users who do not.

Next steps?

As we closely monitored the performance of the new PiP features for Firefox users, we advanced to the next phase aimed at enhancing PiP visibility, ultimately leading to increased MAU. Collaboratively, the team and I focused on creating a more convenient entry point to PiP and promptly showcased its value to users.