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.