Internship
Desktop Experience & Design System
Desktop Experience & Design System
Stubios was originally a mobile-only web app, making its content inaccessible to desktop users. To address this, I built a dedicated desktop UI from scratch and designed a new component-based design system to ensure consistency and scalability.
Stubios was originally a mobile-only web app, making its content inaccessible to desktop users. To address this, I built a dedicated desktop UI from scratch and designed a new component-based design system to ensure consistency and scalability.
Duration
10 Weeks
Feb 2024 - Aug Apr
10 Weeks
Feb 2024 - Aug Apr
10 Weeks
Jun 2024
- Aug 2024
Role
UX Designer
UX Designer
UX
Designer
Team
Director
Project Manager
Product Manager
2 Engineer
Director
Project Manager
Product Manager
2 Engineer
Tool
Figma, Adobe Creative
Suite, Jira, Slack
Figma, Adobe Creative
Suite, Jira, Slack
Figma,
Adobe Creative
Suite, Clickup, Slack
Context
Stubios is a newly launched, creator-focused content platform by Tubi
Stubios is a newly launched, creator-focused content platform by Tubi
Currently, it is only available as a mobile-based web app. Tubi, a leading ad-supported streaming service in the U.S., offers a wide range of movies and TV shows for free and has built a large, diverse user base. Notably, a significant portion of Tubi’s users consume content primarily on desktop.
Currently, it is only available as a mobile-based web app. Tubi, a leading ad-supported streaming service in the U.S., offers a wide range of movies and TV shows for free and has built a large, diverse user base. Notably, a significant portion of Tubi’s users consume content primarily on desktop.
Problem
Stubios had no desktop UI, which meant desktop users were entirely blocked from accessing content.
Stubios had no desktop UI, which meant desktop users were entirely blocked from accessing content.
When accessing Stubios via desktop, users were shown only a QR code and were forced to switch to a mobile device, creating a disruptive experience. The existing mobile-first UI was optimized for a single device type and lacked a component-based structure, making it difficult to maintain and scale.
When accessing Stubios via desktop, users were shown only a QR code and were forced to switch to a mobile device, creating a disruptive experience. The existing mobile-first UI was optimized for a single device type and lacked a component-based structure, making it difficult to maintain and scale.
As a result, the lack of a desktop interface hindered both user access and product scalability—making a ground-up desktop UI and scalable design system essential.
As a result, the lack of a desktop interface hindered both user access and product scalability—making a ground-up desktop UI and scalable design system essential.
Design Goal
How might we make Stubios content accessible and engaging for desktop users while ensuring the platform remains scalable and easy to maintain?
How might we make Stubios content accessible and engaging for desktop users while ensuring the platform remains scalable and easy to maintain?
Ground-Up Desktop UI Design
Built a desktop UI from the ground up, tailored for larger screens.
Component-Based Modular System
Turned repeatable elements into components for visual and structural consistency.
Content–Interaction Hierarchy
Clarified the flow between content viewing
and interaction.
Clarified the flow between content viewing and interaction.
Future-Proof Scalability
Designed a flexible system that supports future feature expansion.
Solution A
Ground-up Desktop UI Design
Ground-up Desktop UI Design
Rebuilt the user interface from mobile to desktop to match user behavior and expectations.
Rebuilt the user interface from mobile to desktop to match user behavior and expectations.
Before: Mobile-Only Interface
After: Desktop-First Experience
Before: Mobile-Only Interface
After: Desktop-First Experience
Solution B
Component-Based Modular System (WCAG AA)
Component-Based Modular System (WCAG AA)
This is a condensed view of the design system—we’ve built many more components beyond what’s shown here.
This is a condensed view of the design system—we’ve built many more components beyond what’s shown here.
Impact
+30%
+30%
+30%
+30%
faster design-to-development handoff through a modular, component-based system
faster design-to-development handoff through a modular, component-based system
faster design-to-development handoff through a modular, component-based system
faster design-to-development handoff through a modular, component-based system
+40%
+40%
+40%
+40%
Reduced visual inconsistencies
Created motion guidelines to define micro-interactions and transitions between components
Reduced visual inconsistencies
Reduced visual inconsistencies
+30
+30
+30
+30
reusable components (e.g., XYZ) created for efficient and scalable UI building
reusable components (e.g., XYZ) created for efficient and scalable UI building
reusable components (e.g., XYZ) created for efficient and scalable UI building
Reusable components (e.g., XYZ) created for efficient and scalable UI building
If I had more time…
If I had more time…
Accessibility Validation
Accessibility Validation
Conducted more user testing on component variations to validate accessibility across different use cases
Conducted more user testing on component variations to validate accessibility across different use cases
Motion Guidelines
Motion Guidelines
Created motion guidelines to define micro-interactions and transitions between components
Created motion guidelines to define micro-interactions and transitions between components
Enhanced Documentation
Enhanced Documentation
Extended the system documentation to better support onboarding for new designers and engineers
Extended the system documentation to better support onboarding for new designers and engineers