WHAT IS PICTURE-IN-PICTURE?

Picture-in-picture is a minimized version of a video feed, meant for viewing camera and video content while multi-tasking on device. This could include viewing a recipe, a news article, music content, or even another video.

The goal of this project was to design the picture-in-picture feature in support of multi-tasking on the Echo Show devices. For this intent, the picture-in-picture needed to be designed to accommodate use cases related to smart home cameras including door bell cameras, security cameras, and baby monitors. 

Given picture-in-picture exists on other devices, including mobile devices, tablets, and TVs, I took insights from other product experiences and created a series of design principles to follow when designing the experience. 

These design principles include:

1. Avoid distracting from what’s on the screen.

The picture-in-picture feature should avoid interrupting the task at hand. With the exception of a door bell alert, it needs to be an ambient UI element. This means it should sit in a corner of the screen, and only appear when the customer asks to view the camera feed.

2. Movable, and out of the way of other content.

The customer should be able to move the picture-in-picture around the screen, and to a place that’s convenient for the customer to view the video feed while multi-tasking.

3. Inherit the controls of the device it’s displaying video from.

The picture-in-picture should still allow customers to use the same controls as the camera or video provider. These include the ability to control the microphone or the audio of the video feed.

4. Appear as an alert or when asked to be seen.

It should appear as an alert for a door bell ring, when the customer minimizes the full-screen version of the video, or when the customer asks for the video feed to be seen as a picture-in-picture.

5. Scalable to other video content types.

This includes door bell cameras, security cameras, baby monitors, video calling, and video streaming. The picture-in-picture feature should support as many possible multi-tasking use cases.

FINAL DESIGNS

The picture-in-picture feed was released on Echo Show devices that support smart home camera use cases, including door bell cameras, security cameras, and baby monitors.

The controls for smart home camera feeds include:

1. Maximize and close the window.

2. Mute and unmute the audio and microphone. 

3. Drag the window around the device screen.

While the intent of this project was to only design for smart home cameras, I wanted to push the design and consider what the picture-in-picture would look like for video streaming.

Based on the design principle, inherit the controls of the device, the picture-in-picture would inherit the controls of the streaming provider. In this example, that includes not only maximizing, minimizing, dragging, and closing the feed, but also playing, pausing, and fast forwarding or rewinding the feed. 

I also wanted to consider what the picture-in-picture would look like for video calling. Similar to the smart home camera and video streaming use case, the video calling picture-in-picture would inherit the controls of the device. In this case, the picture-in-picture would inherit the controls of the video calling platform. This includes not only maximizing, minimizing, and dragging the video call, but also hanging up the call, which would close the picture-in-picture, as well as control the microphone, and display the time stamp for the call.