INTERNSHIP

Designing a Scalable System for Stubios Desktop

Designing a Scalable System
for Stubios Desktop

Designing a Scalable System for Stubios Desktop

Redesigned Stubios for desktop with a modular design system, enabling a scalable, accessible experience. Reduced developer handoff time by 30% through reusable components, WCAG-compliant color, and grid-based layout.

Redesigned Stubios for desktop with a modular design system, enabling
a scalable, accessible experience. Reduced developer handoff time
by 30% through reusable components, WCAG-compliant color, and
grid-based layout.

Redesigned Stubios for desktop with a modular design system, enabling a scalable, accessible experience. Reduced developer handoff time by 30% through reusable components, WCAG-compliant color, and
grid-based layout.

Redesigned Stubios for desktop with a modular design system, enabling
a scalable, accessible experience. Reduced developer handoff time
by 30% through reusable components, WCAG-compliant color, and
grid-based layout.

DURATION

10 Weeks
Feb 2024 - Apr 2024

10 Weeks
Feb 2024

-Apr 2024

10 Weeks
Feb 2024

-Apr 2024

ROLE

UX Design Intern

UX Design

Intern

UX Design

Intern

TEAM

Project Manager
Creative Strategist
Senior UX Designer
Engineering Team

TOOL

Figma, Adobe Creative

Suite, Jira, Slack

Figma,

Adobe Creative

Suite, Jira, Slack

Figma,

Adobe Creative

Suite, Jira, Slack

BACKGROUND

Tubi’s users consume content primarily on TV or Desktop

Tubi’s users consume content
primarily on TV or Desktop

Tubi’s users consume content primarily on TV
or Desktop

Stubios launched as a new social media platform but was only available as a mobile web app.

However, analytics showed that Tubi's users(Stubios’s target audience) primarily consume content on TV or desktop devices, creating a major accessibility and engagement gap.

Stubios launched as a new social media platform but was only available as a mobile web app.

However, analytics showed that Tubi's users(Stubios’s target audience) primarily consume content on TV or desktop devices, creating a major accessibility and engagement gap.

Stubios launched as a new social media platform but was only available as a mobile web app.

However, analytics showed that Tubi's users(Stubios’s target audience) primarily consume content on TV or desktop devices, creating a major accessibility and engagement gap.

CURRENT SOLUTION

Users were shown a QR code, forcing them to switch devices

When accessing Stubios on desktop, users encountered a QR code directing them to open the site on mobile.
While this allowed some level of access, it disrupted the experience, created friction, and excluded users who preferred or relied on desktop devices.

When accessing Stubios on desktop, users encountered a QR code directing them to open the site on mobile.

While this allowed some level of access, it disrupted the experience, created friction, and excluded users who preferred or relied on desktop devices.

01 Desktop Splash Screen

02 Scan the QR Code

03 Open the Safari

How might we remove the hassle of QR-code switching and let users stay on the device they choose?

SOLUTION PROCESS (STEP 1)

Created a scalable,
modular design system
from scratch

I started by establishing a flexible design system to ensure consistency and scalability across platforms.

This included defining core components, spacing rules, color tokens, and typography styles—all designed to work responsively on desktop and mobile.

I started by establishing a flexible design system to ensure consistency and scalability across platforms.

This included defining core components, spacing rules, color tokens, and typography styles—all designed to work responsively on desktop and mobile.

I started by establishing a flexible design system to ensure consistency and scalability across platforms.

This included defining core components, spacing rules, color tokens, and typography styles—all designed to work responsively on desktop and mobile.

SOLUTION PROCESS (STEP 2)

Redesigned the desktop
experience using reusable components

The original mobile UI, when scaled to desktop, resulted in awkward spacing, poor visual hierarchy, and low content density.

I restructured the layout using the new design system—introducing a clear grid, flexible component resizing, and desktop-friendly interaction patterns.

This allowed the interface to feel truly native to larger screens, not just a stretched mobile version.

Page 1 : Landing Page