Smart home on TV

Roku wanted to enter the smart home market, to defend its strategic position in TV streaming. As the first designer on the team, I helped bring camera notifications to Roku TVs.

Role

Lead Product Designer

Responsibility

Interaction Design
Motion Design

Team

2 Designers
3 Engineers
1 Product Manager

Launch

October 2022

Background

To fend off competition from Amazon and Google, Roku wanted bring smart home experiences to the TV. One of the features, which I worked on, involved letting users view camera notifications on TV.

The need for notifications

Through research, we uncovered 2 user needs focused on controlling lights from the TV OR viewing camera feed and notifications from the TV. To limit scope for launch, we focused on the latter: viewing camera feed and notifications from the TV.

The need for notifications

I worked with a researcher to uncover some latent user needs. Through research, we uncovered 2 user needs focused on controlling lights from the TV OR viewing camera feed and notifications from the TV. To limit scope for launch, we on the latter, viewing camera feed on the TV.

Defining the notification's form factor

I defined guiding UX principles and explored different positions for the notification on screen. The focus was on ensuring the notification was discoverable, actionable and yet not intrusive to the TV streaming experience. I explored a range of concepts before settling on the concept C since it met all the UX goals.

Detailing the interactions & layout

After narrowing the position, I begun to mock higher fidelity designs and interactions.I explored options with CTA that had icons and text. We decided to go for option 3 with the text to bias for clarity.

Simplifying the design

Through testing I realized, that the notification needed to be easier to glance since the user is focused on watching their favorite TV show or movie. To simplify the design, I opted for progressive disclosure. The user would first view the thumbnail and then interact with it.

Step 1: Notification appears

Step 1:
Notification appears

Step 2: User acts on notification

Step 2:
Users acts on notification

Exploring motion concepts

I explored motion studies for the notification's ingress. We settled on the notification ingress from the left with a fade to background. This mimics the motion used in Roku's existing action HUD UI.

Final design

To ensure users don't receive too many notifications, we only displayed notifications from doorbells, not all camera events.