Stephen Spencer (UX Design Lead)
Jeff Bazarko (Product Manager)
Marshall Wang (UX Researcher)
Overview
In the summer of 2024, I joined Roku's UX Team as a product design intern, exploring the UI/UX for Roku's first Widget Ambient Screen.
The purpose of the project is to create a personal daily experience that brings more click-through and exposure rate with Roku apps and partner contents.
The scope of the project is to conduct 0-1 exploration on widget

Design Highlights
An ambient screen with easy access to app functions
Waking up with Roku TV
The TV slowly lights up in the morning, showing a peaceful scene. The alarm widget pops up gently, creating a smooth and calming wake-up experience.
Variety of Apps and Modular Widgets
Customizing experience with a variety of apps and modular widgets, giving users flexibility and control over their TV interface.

Context
The project comes from an update in the hardware
A powerful new player
Roku's new player provides capacity to drive multi-screen functions. Users have the opportunity to have split screens for different applications at the same time.

The goal of the project is to…

Increasing user’s time spent on Roku's new ambient mode

Promote partnered channel content and Roku Apps

Problem Space
Learning from our competitors
Users are confused about the setups

The current TV widgets from other brands have complex setup process. Users are having a hard time customizing their screen

Solution
A solution that satisfy the goals and solve the problem
Solution 1: Simplified User Flow

Increase user’s time spent on platform
Reduce the cognitive load when using widgets

Simplified user flow & interface
Solution 2: Simplified Setup

Complex setup process for customized screens
Reduce the complexity in setting up widgets

Intuitive setup process for widgets
Solution 3: Modular Templates

Promote partnership and Roku content
Reduce the difficulty in creating new widgets

Modular templates for easy partnership
Solution 1:
Simplified User Flow & Interface
A consistent experience with Roku
The design stays consistent with the current design system & interaction, reducing the learning curve for this new feature.

Similar interaction with current home screen design, low learning curve

More interaction available within widgets

Flexibility in widgets types, providing various options within the same form
Design details
Fixed focus box, movable carousel
Keeping focus box fixed to maximize the information displayed by the row
Fixed carousel, movable focus box
Focus box only moves in the end of the row to avoid empty screen
Ups and downs for in-widget interactions
Transformation in focus box and highlighted cta to align with the current design system
Additional iterations
Unified small size widgets
Feedback

Able to display more widgets on one screen page, prioritizing most used widgets

Easy to build a uniformed template

Less interaction with widget

Additional steps to reach second page
Flexible largest size widgets
Feedback

Similar interaction with current home screen design, low learning curve

More flexibility in widgets types

More interaction available within widgets

Difficult to build a one-shot widget
Solution 2:
Simplified Setup Process for Widgets
One button away from setups
The design employs * as the optional setup button, ensuring the freedom of customization with a simple click.
Adding from the top
Adding button takes user to widget library with options to add any available widget.
Rearranging the widget
Rearranging buttons activate widget moving mode with indication of moving direction assets.
Exiting from the bottom
Deleting button takes user to delete dialog of either confirm removing widget to library or cancel.
Additional iterations
Bottom drawer & widget addition
Feedback

Widget adding option only shows up until the end of the carousel list

Editing option control being separated into add and rearrange+delete
Side drawer with all three controls
Feedback

Least step to editing widget anytime with all the control options at one place
