Roku Ambient Widgets

Radiology Report Drafting Tool

Time

Time

Jul-Aug 2024

Jul-Aug 2024

My Role

My Role

Interaction Design, Component Design, Experience Design

Interaction Design, Component Design, Experience Design

Tools

Tools

Figma, Lucid Chart, FigJam

Figma, Lucid Chart, FigJam

Team

Team

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…

Actions in hand:

Parent/self pre-set collection of actions of Ambulo

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

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

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

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

  1. Side drawer with all three controls

Feedback

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

Does not affect the regular carousel layout vertical space

Solution 3:
Modular Templates for Easy Partnership

Variety of Apps and Modular Widgets

4 types of modular template that can be utilized in various tasks

No. 1: Full-on Interaction

IOT & Alarm, apps that Require Quick Interaction

No. 2: Quick Access to App

Continue Watching, apps that helps with continue streaming

No. 3: Mini Multi-view

News Today, video apps that allows volume and mini-view

No. 4: Information Display

Weather Channel, apps that only display information

Final Outcomes

Project Reflection

Metrics of Success

  • Demonstrated the potential of widget exploration

    The project was showcased in a 20 min presentation to the entire Roku UX team of 70+ people, receiving positive feedback and having a potential to be further developed with IofT and device team.

  • Demand Validation

    The 0-1 prototype effectively demonstrated the one potential use case of the multi-view function capability of the new players, enhancing user engagement with Roku TV/ Player and blending into users' daily life.

  • Demonstrated the potential of widget exploration

    The project was showcased in a 20 min presentation to the entire Roku UX team of 70+ people, receiving positive feedback and having a potential to be further developed with IofT and device team.

  • Demand Validation

    The 0-1 prototype effectively demonstrated the one potential use case of the multi-view function capability of the new players, enhancing user engagement with Roku TV/ Player and blending into users' daily life.

Key Takeaways

  • Individual design tasks + resource finding

    As a Product Design Intern, I was fully in charged to work this widget exploration. I actively arranged meetings and discussions with design leads, senior designers, product manager, engineer and user researcher to gather existing researches and testings to back up the design.

  • Individual design tasks + resource finding

    As a Product Design Intern, I was fully in charged to work this widget exploration. I actively arranged meetings and discussions with design leads, senior designers, product manager, engineer and user researcher to gather existing researches and testings to back up the design.

I’m currently available for full-time job

Let's talk about the projects!

Email: junyiyandesign@gmail.com

I’m currently available for full-time job

Let's talk about the projects!

Email: junyiyandesign@gmail.com

I’m currently available for full-time job

Let's talk about the projects!

Email: junyiyandesign@gmail.com

I’m currently available for full-time job

Let's talk about the projects!

Email: junyiyandesign@gmail.com