Project Yan
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.
Time
Jul-Aug 2024
Role
Product Designer
Tools
Figma
Team
Stephen Spencer (UX Design Lead)
Jeff Bazarko (Product Manager)
Marshall Wang (UX Researcher)
Scope
0-1 exploration on widget
Enhance user engagement with Roku TV/ Player, blending into users' daily life and fostering user loyalty
Project Preview
A Morning Experience with Roku!
Imagine wake up with your Roku TV with a beautiful scenery and soft music
Variety of Apps and Modular Widgets
You can check the weather, home cameras, news or continue watching your favorite show last night
Why Multi-view Widgets?
Driven by the ability of Roku high-end players to power multi-screen functions
The goal of the project is to…
Increasing user’s time spent on Roku's new platform
Promote partnered channel content and Roku Apps
Use customer insights to tailor advertising for monetization
So, What's the Problem?
From our high-end consumers who love shortcuts, like Sandy…
They are frustrated by…
Complex setup process
Current widgets in competitor TV are complex in setting up
Too many clicks to access widgets
If not through voice control, Ambient mode is hidden in setting
To Achieve the Goals &
To Solve the Problems
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
Gain more user-insights for ads
Reduce the complexity in setting up widgets
Simplified 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
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
Flexible largest size widgets
Feedback
Final Iteration
Combined features from ideation, blending with the current design system
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
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
Solution 2:
Simplified Setup Process for Widgets
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
Does not affect the regular carousel layout
Final Iteration
Option navigation
Transformation in focus box and highlighted button to align with the current design system
Top drop adding
Adding button takes user to widget library with options to add any available widget
Adding a moment of delightful interaction to the existing design system
Widget rearranging
Rearranging buttons activate widget moving mode with indication of moving direction assets
Clicking two times on D-pad to quickly start rearranging widgets
Bottom exiting
Deleting button takes user to delete dialog of either confirm removing widget to library or cancel
Exiting from the bottom echos with the top adding animation
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
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.
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.
