Intro
Tubi's "Stubios" is a fan-driven studio program that supports
emerging filmmakers by allowing audiences to participate in
the creative process, influencing casting, artwork, and
production decisions.
Tubi's "Stubios" is a fan-driven studio program
that supports emerging filmmakers by allowing
audiences to participate in the creative process, influencing casting, artwork, and production decisions.
UX Design Internship
About
Duration
14 weeks
Feb 2024 - Apr 2024
14 weeks
Feb 2024 - Apr 2024
Team
Blockchain
Creative Lab
Blockchain
Creative Lab
Tool
Figma, Adobe Creative Suite, Jira, Notion
Figma, Adobe Creative Suite, Jira, Notion
Problem
Problem
stubios is a web-based application, but it lacks a dedicated desktop UI. While it functions within a browser, its interface does not fully adapt to desktop usage, potentially leading to a suboptimal user experience.
stubios is a web-based application, but it lacks a dedicated desktop UI. While it functions within a browser, its interface does not fully adapt to desktop usage, potentially leading to a suboptimal user experience.
stubios is a web-based application, but it lacks a dedicated desktop UI. While it functions within a browser, its interface does not fully adapt to desktop usage, potentially leading to a suboptimal user experience.
Goal
Goal
Create an intuitive and easy-to-use desktop interface
Create an intuitive and easy-to-use desktop interface
Stubio lacks a dedicated desktop UI, requiring an intuitive design aligned with Stubio and Tubi’s brand identities. Consistency with the mobile version is key for a seamless cross-platform experience.
Stubio lacks a dedicated desktop UI, requiring an intuitive design aligned with Stubio and Tubi’s brand identities. Consistency with the mobile version is key for a seamless cross-platform experience.
Stubio lacks a dedicated desktop UI, requiring an intuitive design aligned with Stubio and Tubi’s brand identities. Consistency with the mobile version is key for a seamless cross-platform experience.
Delivery
Delivery
Desktop Experience Design
This desktop design maintains consistency with the original mobile design. However, since the mobile design has changed slightly, some differences may exist—please keep this in mind while reviewing.
This desktop design maintains consistency with the original mobile design. However, since the mobile design has changed slightly, some differences may exist—please keep this in mind while reviewing.
This desktop design maintains consistency with the original mobile design. However, since the mobile design has changed slightly, some differences may exist—please keep this in mind while reviewing.
Key features 1
Explore Page
Explore Page
Since Stubios is a new platform, we needed a guide page for our two target audiences: creators and fans.
Since Stubios is a new platform, we needed
a guide page for our two target audiences:
creators and fans.
Key features 2
Landing Page
Landing Page
since Stubios is a mobile-centric platform, I used a QR code to seamlessly guide users to the mobile experience.
Since Stubios is a mobile-centric platform, I used a QR code to seamlessly guide users to the mobile experience.
Key features 3
Creator Profile Page
Creator Profile Page
Showcased key information about creators, ongoing votes, and short-form videos all in one place.
Showcased key information about creators, ongoing votes, and short-form videos all in one place.
Key features 4
Behind the Scenes
Behind the Scenes
When creators receive the green light and start producing their own programs, users can follow their journey and see the final program
When creators receive the green light and start producing their own programs, users can follow their journey and see the final program
Initial
Approach
Initial Approach
Research: Conduct a competitive analysis of other social media platforms.
Research: Conduct a competitive analysis of other social media platforms.
To guide Stubio’s desktop UI design, we will analyze TikTok, Twitter, and Instagram, focusing on user engagement, content interaction, short-form content delivery, and cross-platform consistency.
To guide Stubio’s desktop UI design, we will analyze TikTok, Twitter, and Instagram, focusing on user engagement, content interaction, short-form content delivery, and cross-platform consistency.
To guide Stubio’s desktop UI design, we will analyze TikTok, Twitter, and Instagram, focusing on user engagement, content interaction, short-form content delivery, and cross-platform consistency.
White Background
White BG
Clean, minimalistic design for better readability.
Clean, minimalistic design for better readability.
Side Navigation Bar
Side Navigation Bar
Quick access to main features and sections.
Quick access to main features and sections.
Vertical Scrolling
Vertical Scrolling
Continuous feed navigation with infinite scrolling.
Continuous feed navigation with infinite scrolling.
Centered Content Feed
Centered Content Feed
Primary content is displayed in the center for easy consumption.
Primary content is displayed in the center for easy consumption.
Outline Icons→Filled Icons
Outline Icons→Filled Icons
Enhances visual feedback and usability.
Enhances visual feedback and usability.
No Footer
No Footer
Maximizes screen space for content focus.
Maximizes screen space for content focus.
Sticky Top Bar
Sticky Top Bar
Persistent top navigation for search, notifications, and user profile access.
Persistent top navigation for search, notifications, and user profile access.
Minimal Text Labels
Minimal Text Labels
Icons are often used over text for a streamlined look.
Icons are often used over text for a streamlined look.
Right-Side Suggested Content
Right-Side Suggested Content
recommended content, trending topics, or suggested users to follow.
Recommended content, trending topics, or suggested users to follow.
Initial
Approach
Initial Approach
User Testing: The first design failed user testing.
User Testing: The first design failed
The desktop version felt disconnected from mobile, lacking visual cohesion and brand identity, making the interface unfamiliar to users.
The desktop version lacked alignment with the mobile experience, resulting in a disjointed user journey. Additionally, stubio’s design system was not applied, leading to a lack of brand identity and visual cohesion. Users found the interface unfamiliar and disconnected from the existing product.
The desktop version felt disconnected from mobile, lacking visual cohesion and brand identity, making the interface unfamiliar to users.
Mobile
Mobile
First draft
First draft
User Interview
User Interview
Research: Analyze Tubi’s desktop design and stubio’s mobile design.
Research: Analyze Tubi’s desktop design and stubio’s mobile design.
To address inconsistencies, Tubi’s desktop UI and Stubio’s mobile design will be analyzed. Tubi offers scalable layout insights, while Stubio ensures brand consistency, creating a unified desktop experience.
To fix the inconsistencies in the first design, Tubi’s desktop UI and Stubio’s mobile design will be analyzed. Tubi provides insights into scalable layouts for larger screens, while Stubio ensures brand consistency. The goal is to create a unified desktop experience that aligns with Stubio’s identity while leveraging Tubi’s best practices.
To address inconsistencies, Tubi’s desktop UI and Stubio’s mobile design will be analyzed. Tubi offers scalable layout insights, while Stubio ensures brand consistency, creating a unified desktop experience.
User Interview
Background Color Change
Background Color Change
Changed the white background to a dark mode color for mobile
Changed the white background to a dark mode color for mobile
Changed the white background to a dark mode color for mobile
Top Navigation Bar
Top Navigation Bar
Unified the top navigation by adopting the existing desktop design from Tubi
Unified the top navigation by adopting the existing desktop design from Tubi
Unified the top navigation by adopting the existing desktop design from Tubi
CTA Color
CTA Color
Replaced the existing CTA button with one from the design system.
Replaced the existing CTA button with one from the design system.
Replaced the existing CTA button with one from the design system.
Design System: First Design Updates
Design System: First Design Updates
User Interview
User Testing: Conducted user testing on new features and prototyping.
User testing with a community manager via UserZoom provided insights that guided UI and prototype refinements, enhancing usability and user alignment.
User testing with a community manager via UserZoom provided insights that guided UI and prototype refinements, enhancing usability and user alignment.
Reflection
Bridging the Gap: Collaborating with Engineers
One of the most valuable experiences was working closely with engineers to bring designs to life. I learned how to communicate design intent effectively, navigate technical constraints, and iterate based on feasibility. This collaboration deepened my understanding of development processes and reinforced the importance of designing with implementation in mind.
Adapting Mobile Designs for Desktop
A key challenge during my internship was adapting mobile-first designs to desktop environments. This process required rethinking layouts, interactions, and content hierarchy to ensure a seamless user experience across different screen sizes. By addressing differences in navigation patterns and usability expectations, I gained insights into responsive design principles and the importance of designing with flexibility in mind.
About
Duration
14 weeks
Feb 2024 - Apr 2024
Team
Blockchain
Creative Lab
Tool
Figma, Adobe Creative Suite, Jira, Notion
User Testing: Conducted user testing on new features and prototyping.
Using the UserZoom software, testing was conducted with a community manager to gather insights. Based on the findings, the UI and prototyping were refined to improve usability and alignment with user needs.
Reflection
Bridging the Gap: Collaborating with Engineers
One of the most valuable experiences was working closely with engineers to bring designs to life. I learned how to communicate design intent effectively, navigate technical constraints, and iterate based on feasibility. This collaboration deepened my understanding of development processes and reinforced the importance of designing with implementation in mind.
Adapting Mobile Designs for Desktop
A key challenge during my internship was adapting mobile-first designs to desktop environments. This process required rethinking layouts, interactions, and content hierarchy to ensure a seamless user experience across different screen sizes. By addressing differences in navigation patterns and usability expectations, I gained insights into responsive design principles and the importance of designing with flexibility in mind.