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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
