Intro

Hedgehog Social, backed by FOX, is a platform

that fosters real conversations for a real community,

where users take charge—free from bots and trolls.

Hedgehog Social, backed
by FOX, is a platform that fosters real conversations for a real community, where users take charge—free from bots
and trolls.

The continuation of an FOX internship

The continuation of an FOX internship

About

Duration

Duration

10 Weeks
Jun 2024 - Aug 2024

10 Weeks
Jun 2024 - Aug 2024

Team

Team

Creative
Design Team

Creative
Design Team

Tool

Tool

Figma, Adobe Creative Suite,
Clickup, Slack, Google meet

Figma, Adobe Creative Suite,
Clickup, Slack, Google meet

Problem

Problem

Creators on Stubio can produce Tubi Originals after receiving a greenlight, but there’s no infrastructure for fans to actively support them.

Creators on Tubi’s new platform, Stubio, have the opportunity to produce their own Tubi Originals once they receive a greenlight. However, there is a lack of infrastructure for fans to actively support them.

Creators on Tubi’s new platform, Stubio, have the opportunity to produce their own Tubi Originals once they receive a greenlight. However, there is a lack of infrastructure for fans to actively

support them.

Solution

Solution

Enhancing Fan Engagement to Secure Greenlights

Enhancing Fan Engagement to Secure Greenlights

Integrate Hedgehog Social’s comment and leaderboard features into Stubio, enabling fans to engage

more actively and support their favorite creators in securing a greenlight.

Integrate Hedgehog Social’s comment and leaderboard features into Stubio, enabling fans to engagemore actively and support their favorite creators in securing a greenlight.

Integrate Hedgehog Social’s comment and leaderboard features into Stubio, enabling fans to engage more actively and support their favorite creators in securing a greenlight.

Iterations

Project 1

Comment Feature

Comment Feature

Hedgehog’s comment feature turns replies into chat threads for fluid discussions. Adapting this to Stubio, we aim to enhance engagement while aligning with Stubio’s style.

Hedgehog’s comment feature turns replies into chat threads for fluid discussions. Adapting this to Stubio, we aim to enhance engagement while aligning with Stubio’s style.

Hedgehog’s comment feature turns replies into chat threads for fluid discussions. Adapting this to Stubio, we aim to enhance engagement while aligning with Stubio’s style.

Project 2

Leaderboard for Greenlit

Leaderboard for Greenlit

Creators who receive strong support from fans
can compete on the leaderboard to get greenlit for Tubi’s original programming. This competition drives them to produce higher-quality content.

Creators who receive strong support from fans can compete on the leaderboard to get greenlit for Tubi’s original programming. This competition drives them to produce

higher-quality content.

Creators who receive strong support from fans can compete on the leaderboard to get greenlit for Tubi’s original programming. This competition drives them to produce higher-quality content.

User Flow

User Flow

User Flow

Stubios User Flow Redesign Based on Hedgehog Social

Stubios User Flow Redesign Based on Hedgehog Social

Stubios User Flow Redesign Based on Hedgehog Social

Stubio's user flow was redesigned based on Hedgehog Social's structure, adapting to its limited management system with a stronger focus on moderation.

Stubio's user flow was redesigned based on Hedgehog Social's structure, adapting to its limited management system with a stronger focus on moderation.

Stubio's user flow was redesigned based on Hedgehog Social's structure, adapting to its limited management system with a stronger focus on moderation.

Comment User Flow

Comment User Flow

Detailed User flow

Detailed User flow

The user flow above was created after the UI was completed. Initially based on Hedgehog's UI, it was revised before visual design, incorporating feedback from the Fox director and Hedgehog manager.

The user flow above was created after the UI was completed. Initially based on Hedgehog's UI, it was revised before visual design, incorporating feedback from the Fox director and Hedgehog manager.

The user flow above was created after the UI was completed. Initially based on Hedgehog's UI, it was revised before visual design, incorporating feedback from the Fox director and Hedgehog manager.

Visual Design

Visual Design

Visual Design

Design System : Hedgehog Social & Stubio Design System Analysis

The design system was analyzed before starting the design process.

The design system was analyzed before starting the design process.

The design system was analyzed before starting the design process.

Hedgehog Color

stubios Color

Hedgehog CTA

Create a post

stubios CTA

Let’s Go!

Hedgehog Font

Inter

Hedgehog social is social media

Stubios Font

Deacon Test

Hedgehog social is social media

Inter

Hedgehog social is social media

Visual Design

Interface Design 1: Comment Feed

Interface Design 1: Comment Feed

Interface Design 1: Comment Feed

Changed User Flow for Comment Interaction in Stubios

Changed User Flow for Comment Interaction in Stubios

Changed User Flow for Comment Interaction in Stubios

Hedgehog Social redirects users to a new page for comments, disrupting the experience. Stubios improves this with an overlay, allowing seamless interaction without leaving the video.

Hedgehog Social redirects users to a new page for comments, disrupting the experience. Stubios improves this with an overlay, allowing seamless interaction without leaving the video.

Hedgehog Social redirects users to a new page for comments, disrupting the experience. Stubios improves this with an overlay, allowing seamless interaction without leaving the video.

Design Priorities in Hedgehog Social vs. Stubios

Design Priorities in Hedgehog Social vs. Stubios

Design Priorities in Hedgehog Social

vs. Stubios

Hedgehog Social's dark background emphasizes opinions and a serious tone for news discussions. Stubio, focused on short-form engagement, uses distinct cards to highlight user interaction.

Hedgehog Social's dark background emphasizes opinions and a serious tone for news discussions. Stubio, focused on short-form engagement, uses distinct cards to highlight user interaction.

Hedgehog Social's dark background emphasizes opinions and a serious tone for news discussions. Stubio, focused on short-form engagement, uses distinct cards to highlight user interaction.

Visual Design

Interface Design 2: Reaction List

Interface Design 2: Reaction List

Interface Design 2: Reaction List

Optimizing Handle Visibility in Stubios

Optimizing Handle Visibility in Stubios

Optimizing Handle Visibility in Stubios

To reduce visual clutter, user handles should be hidden by default and shown only when needed, like in comments, reports, or tags. This keeps the interface clean while ensuring accessibility.

To reduce visual clutter, user handles should be hidden by default and shown only when needed, like in comments, reports, or tags. This keeps the interface clean while ensuring accessibility.

To reduce visual clutter, user handles should be hidden by default and shown only when needed, like in comments, reports, or tags. This keeps the interface clean while ensuring accessibility.

Reaction Display

Reaction Display

Reaction Display

Hedgehog Social shows each reaction separately, creating duplicates if a user reacts multiple times. Stubio consolidates reactions into one entry, reducing clutter while keeping engagement clear.

Hedgehog Social shows each reaction separately, creating duplicates if a user reacts multiple times. Stubio consolidates reactions into one entry, reducing clutter while keeping engagement clear.

Hedgehog Social shows each reaction separately, creating duplicates if a user reacts multiple times. Stubio consolidates reactions into one entry, reducing clutter while keeping engagement clear.

Visual Design

Interface Design 3: New Design for Leaderboard

Interface Design 3: New Design for Leaderboard

Interface Design 3: New Design for Leaderboard

9:41

Leaderboard

Greenlit

The Race to stardom is on!

The competition ends in DD:HH:MM:SS. Engage with your favorite creatives and give them a boost to the finish line! Learn more in our FAQs.

1

Lady london

323,987 points

Follow

2

KElon campbell

172,981 points

Following

3

SCHYGUYY

162,362 points

Follow

4

SPACETROOPER

139,847 points

Following

5

Melody hildebran...

139,023 points

Follow

6

Edward nehamkin

137,847 points

Follow

7

Emily Johnson

137,011 points

Follow

8

Aneesh chimbili

136,362 points

Follow

8

Aneesh chimbili

136,362 points

Follow

9

Lian jue

123,323pt

/

350,000 points

Follow

9:41

Leaderboard

Greenlit

The race is over and

[winner’s name] has won!

Interested in joining the next race as a creative?
Join the waitlist to be notified when applications open for the next cohort. Learn more in our FAQs.

Winner!

Lady london

323,987 points

Follow

2

KElon campbell

172,981 points

Following

3

SCHYGUYY

162,362 points

Follow

4

SPACETROOPER

139,847 points

Following

5

Melody hildebran...

139,023 points

Follow

6

Edward nehamkin

137,847 points

Follow

7

Emily Johnson

137,011 points

Follow

8

Aneesh chimbili

136,362 points

Follow

9

Lian jue

123,323pt

/

350,000 points

Follow

Greenlit

This badge indicates that
a Stubios project will be produced
as a Tubi Original.

Got it

Helping Users Understand Greenlit

Helping Users Understand Greenlit

Helping Users Understand Greenlit

Tapping the Greenlit icon triggers a bottom drawer with an explanation, ensuring users understand the feature seamlessly without disruption.

Tapping the Greenlit icon triggers a bottom drawer with an explanation, ensuring users understand the feature seamlessly without disruption.

Tapping the Greenlit icon triggers a bottom drawer with an explanation, ensuring users understand the feature seamlessly without disruption.

Clear Hierarchy in Rankings

Clear Hierarchy in Rankings

Clear Hierarchy in Rankings

Numbers and profile images stand out, making rankings instantly clear. This visual hierarchy ensures quick and intuitive user recognition.

Numbers and profile images stand out, making rankings instantly clear. This visual hierarchy ensures quick and intuitive user recognition.

Numbers and profile images stand out, making rankings instantly clear. This visual hierarchy ensures quick and intuitive user recognition.

Winner Announcement with Sparkle Effect

Winner Announcement with Sparkle Effect

Winner Announcement with Sparkle Effect

When a winner is announced, the screen transitions with a sparkle effect, creating a celebratory and engaging moment.

When a winner is announced, the screen transitions with a sparkle effect, creating a celebratory and engaging moment.

When a winner is announced, the screen transitions with a sparkle effect, creating a celebratory and engaging moment.

Annotation Review

Annotation
Review

Annotation Review

Detailed UI Handoff Through Annotation Review and Prototyping

Detailed UI Handoff Through Annotation Review and Prototyping

The desktop version felt disconnected from mobile, lacking alignment, brand identity, and visual cohesion, resulting in a disjointed user experience.

The desktop version felt disconnected from mobile, lacking alignment, brand identity, and visual cohesion, resulting in a disjointed user experience.

The desktop version felt disconnected from mobile, lacking alignment, brand identity, and visual cohesion, resulting in a disjointed user experience.

Reflection

Reflection

Aligning Designs with Client Expectations

Aligning Designs with Client Expectations

Aligning Designs with Client Expectations

I worked closely with clients to align design decisions with their business goals and brand identity. This required balancing user needs with stakeholder priorities while effectively presenting design rationale. Navigating feedback loops and negotiating design compromises helped me develop strong communication skills and a strategic approach to design collaboration.

I worked closely with clients to align design decisions with their business goals and brand identity. This required balancing user needs with stakeholder priorities while effectively presenting design rationale. Navigating feedback loops and negotiating design compromises helped me develop strong communication skills and a strategic approach to design collaboration.

I worked closely with clients to align design decisions with their business goals and brand identity. This required balancing user needs with stakeholder priorities while effectively presenting design rationale. Navigating feedback loops and negotiating design compromises helped me develop strong communication skills and a strategic approach to design collaboration.

Thriving in a Fast-Paced Startup Environment

Thriving in a Fast-Paced Startup Environment

Thriving in a Fast-Paced Startup Environment

Working in a startup setting exposed me to rapid iteration cycles and evolving project scopes. I had to quickly adapt to shifting priorities, make design decisions efficiently, and collaborate across multiple teams. This experience sharpened my ability to work under tight deadlines while maintaining a user-centered approach, reinforcing the value of agility in UX design.

Working in a startup setting exposed me to rapid iteration cycles and evolving project scopes. I had to quickly adapt to shifting priorities, make design decisions efficiently, and collaborate across multiple teams. This experience sharpened my ability to work under tight deadlines while maintaining a user-centered approach, reinforcing the value of agility in UX design.

Working in a startup setting exposed me to rapid iteration cycles and evolving project scopes. I had to quickly adapt to shifting priorities, make design decisions efficiently, and collaborate across multiple teams. This experience sharpened my ability to work under tight deadlines while maintaining a user-centered approach, reinforcing the value of agility in UX design.