Graphical representation of Fawesome on LCD screen
Fawesome UI/UX
Redesigned Fawesome’s OTT experience across Web, Mobile, and CTV to reduce poster fatigue, improve discoverability, and boost engagement. Introduced a Hero-first visual hierarchy, scalable UI systems, and an asset pipeline that delivered measurable growth at scale.
Role
Design Lead
Duration
April 2023 - July 2025
Platform
Web, Roku and Fire TV
Collaborators
AD, PM, CM and Designers
overview.
We redesigned Fawesome’s OTT experience across Web, Mobile, and CTV to reduce cognitive load, speed up decision-making, and improve engagement. By introducing a Hero-first visual hierarchy, clarifying lists and MLPs with a stack-top pattern, and revamping Browse by Genre for TV-distance legibility, which improved CTR and watch time at scale, while building an operations pipeline that delivers assets within 30 hours of content ingestion.
Collection of movies avalible on Fawesome
impact at a glance.
+10–12% CTR per title after Hero adoption
+10% CTR, +4.5 min watch-time on browse by genre row
70,000+ hero assets shipped
Devised a scalable design workflow ensuring every newly ingested title across genres went live with optimized hero and thumbnail assets within 30 hours of content ingestion.
problem statement.
Before the redesign, three major issues blocked user engagement:
Poster fatigue: Endless rows of thumbnails made browsing feel repetitive and overwhelming.
Weak hierarchy: Movies, lists, and curated collections looked too similar, confusing users.
Legibility issues: Genre cards lacked clarity at TV viewing distances, hurting usability
Operational lag: With no systemized design pipeline, asset turnaround was slow and inconsistent.
Fawesome Old UI
user journey.
Before :
Users scrolled through dense rows of posters, struggled to distinguish curated lists from titles, and wasted time deciding what to watch.
Fawesome's old UI
After :
Users are greeted by a bold Hero visual that anchors attention, stack-top cues that clarify collections, and legible genre browsing that drives faster, confident decisions. This shifted the journey from scroll fatigue to seamless discovery.
Fawesome's New UI
user journey map.
HERO SYSTEM.
a. pain points
Users had no single focal point, leading to decision fatigue.
Titles felt indistinguishable in poster-heavy rows.
No still image library existed, only raw video files.
Fawesome Old Ui
b. design decisions
Ontroduced a Hero-first system, high-impact still occupying ≈40% of the screen, paired with the title and synopsis. Each Hero was crafted to depict the essence of the movie in a single frame, acting as an attention anchor that reduced poster fatigue and helped users make faster, more confident viewing decisions.
Revised UI skeleton
Hero safe area skeleton
c. process
Extracted stills directly from video files.
Applied AI upscaling to restore low-quality screenshots.
Used generative tools to clean or enhance visuals.
Composited frames when single images lacked clarity.
Tested results via CTR A/B analysis.
Hero process
d. impact
+10–12% CTR uplift per updated title
Increased user decision speed by reducing poster fatigue
Institutionalized as a design best practice across teams
Continuous A/B testing on heroes and thumbnails to refine creative choices and track long-term impact
A/B test for Collateral 2004
A/B test for The Aviator 2004
A/B test for THE The Postman 1997
A/B test for Into the blue
A/B test for NYC Tornado Terror 2008
A/B test for The Traveller 2010
A/B test for Good Kids 2016
A/B test for Faces 2014
A/B test for Reader 2008
A/B test for Story of O 1975
e. list and MLP hero
Introduce a collage based Hero system for Lists and MLPs, differentiating them from individual movies. While movies retained a single-subject Hero, lists leveraged collage compositions to convey variety and volume at a glance.
Composition rules:
Movies → One central subject Hero for clarity.
Genre-based MLPs → 3-image collages highlighting high-performing titles in that genre.
Collections (e.g., “Based on True Stories”) → Hexagonal collage layouts showcasing multiple films.
Actor/Actress categories → Collages of stills from the actor’s available movies in the library.
Quarterly revamps ensured collages remained fresh and tied to best-performing or trending content.
I created the first drafts of these layouts, set composition guidelines, and then trained/assigned my team of designers to scale production. All assets passed through my feedback and verification loop to maintain visual consistency.
Single subject Hero visuals for individual movies, ensuring clarity while emphasizing the primary genre of the title.
Collage of three top-performing movies used for MLPs, highlighting variety while reinforcing the strength of the genre.
Actor collages reinforced recognition and trust by surfacing all available titles featuring the star in a collage visual.
Hexagonal grids highlighted diverse casts across multiple titles, giving list heroes a distinctive and dynamic identity
f. scalability
Led the creation of 70,000+ heroes across movies, TV shows, and MLP's.
Introduced a rating-based refresh cadence (monthly for high performers, quarterly for low performers) to keep assets relevant.
Strategized a workflow for newly ingested content, assigning genre-based designer managers and ensuring every new title received a hero within ≤30 hours of ingestion.
STACK TOP.
a. pain points
Users couldn’t tell curated lists from standalone titles.
Rows blended into each other, reducing clarity.
Old UI without stack top blurred content hierarchy and hurt discoverability
Old UI: ‘All Based on True Stories’ list visually blended with movie posters, lacking hierarchy.
b. design decisions
Introduce a Stack-top interface: a compact header element that instantly distinguishes collections from movies.
c. process
Designed and tested multiple stack variations.
Finalized a impactful, reusable layout that scaled across lists.
Iterative design options for list layouts, testing readability, visual hierarchy, and recognition at scale.
Live stack top skeleton
d. implementation
All lists/MLPs now have a stack-top interface.
Improved visual hierarchy between content rows.
e. impact
+Sharper visual distinction reduced misclicks on collections.
+12% increase in interaction with curated lists.
Adding Stack Top, Collection L1 saw a +9.4% CTR uplift into lists, a +6% increase in launches, and a +7.2% rise in average watch-time per session, proving clearer hierarchy directly boosted engagement and conversions.
With the Stack-top interface applied, curated lists such as ‘All Thriller Movies’ stood out clearly within content rows, eliminating confusion with single titles.
Curated collections became more identifiable, encouraging higher engagement.
MLP of Spanish Movies
f. scalability
Stack Top Became a standard UI component in Fawesome’s design system.
Applied consistently across categories and content rows.
BROWSE BY GENRE.
a. pain points
Legacy genre cards used heavy visuals and weak typography.
At TV distance, legibility failed, causing user drop-offs.
b. design decisions
Prioritize readability over visual flair: solid, centered typography with high contrast and minimal imagery.
c. process
Tested three versions:
Baseline solid type (clear but dated). Until April 2023
Outlined/hollow type (modern but low readability). May 2023
New March 2025 update: solid, centered, high-contrast design. Live Now
Version 1
Legacy Browse by Genre layout (pre-April 2023) highlighted genre blocks with textured visuals, later refined for improved clarity and performance.
Version 2
A/B testing in May 2023 showed the hollow-text design negatively impacted clarity, leading to an 8.56% CTR drop within a week, proving the importance of strong contrast in OTT typography.
Version 3 - LIVE
By solidifying typography, reducing visual noise, and adding stack-top branding, the 2025 Browse by Genre redesign improved clarity and contributed to a +10% CTR uplift.
d. impact
Hollow version 2 led to drop by 8.56% CTR in 7 days → immediate rollback.
March 2025 relaunch led to +10% CTR uplift, +4.5 minutes watch-time increase across the row.
e. scalability
New style locked into Fawesome’s cross-platform design language.
Now used consistently across CTV like Roku, Fire TV, Comcast, web and mobile app.
key takeaways.
One strong visual cue as Hero along with thumbnail, anchors user attention drives CTR.
Legibility > aesthetics, especially for TV distance viewing experience.
Design tokens - stack-top, delivered outsize clarity.
Experiment fast, measure, and roll back quickly, the hollow browse by genre, proved the value of data driven decisions.
Design operations - SLAs, refresh cadences, and genre ownership turned design into a repeatable growth engine at Fawesome
closing insight.
Fawesome interface redesign transformed browsing from a poster heavy, confusing experience into a Hero-first, legible, and systemized OTT platform.
Beyond visual polish, this project demonstrates my ability to:
Ground design decisions in user insights and measurable outcomes.
Balance creativity with operational scalability, ensuring solutions work at scale.
Deliver results across Web, Mobile, and CTV, creating a unified experience for millions of users.
This case study is not only about improving an interface, it’s about proving how strategic design decisions can directly influence engagement, watch-time, and platform growth.
Graphical representation of Fawesome on LCD screen
Fawesome UI/UX
Redesigned Fawesome’s OTT experience across Web, Mobile, and CTV to reduce poster fatigue, improve discoverability, and boost engagement. Introduced a Hero-first visual hierarchy, scalable UI systems, and an asset pipeline that delivered measurable growth at scale.
Role
Design Lead
Duration
April 2023 - July 2025
Platform
Web, Roku and Fire TV
Collaborators
AD, PM, CM and Designers
overview.
We redesigned Fawesome’s OTT experience across Web, Mobile, and CTV to reduce cognitive load, speed up decision-making, and improve engagement. By introducing a Hero-first visual hierarchy, clarifying lists and MLPs with a stack-top pattern, and revamping Browse by Genre for TV-distance legibility, which improved CTR and watch time at scale, while building an operations pipeline that delivers assets within 30 hours of content ingestion.
Collection of movies avalible on Fawesome
impact at a glance.
+10–12% CTR per title after Hero adoption
+10% CTR, +4.5 min watch-time on browse by genre row
70,000+ hero assets shipped
Devised a scalable design workflow ensuring every newly ingested title across genres went live with optimized hero and thumbnail assets within 30 hours of content ingestion.
problem statement.
Before the redesign, three major issues blocked user engagement:
Poster fatigue: Endless rows of thumbnails made browsing feel repetitive and overwhelming.
Weak hierarchy: Movies, lists, and curated collections looked too similar, confusing users.
Legibility issues: Genre cards lacked clarity at TV viewing distances, hurting usability
Operational lag: With no systemized design pipeline, asset turnaround was slow and inconsistent.
Fawesome Old UI
user journey.
Before :
Users scrolled through dense rows of posters, struggled to distinguish curated lists from titles, and wasted time deciding what to watch.
Fawesome's old UI
After :
Users are greeted by a bold Hero visual that anchors attention, stack-top cues that clarify collections, and legible genre browsing that drives faster, confident decisions. This shifted the journey from scroll fatigue to seamless discovery.
Fawesome's New UI
user journey map.
HERO SYSTEM.
a. pain points
Users had no single focal point, leading to decision fatigue.
Titles felt indistinguishable in poster-heavy rows.
No still image library existed, only raw video files.
Fawesome Old Ui
b. design decisions
Ontroduced a Hero-first system, high-impact still occupying ≈40% of the screen, paired with the title and synopsis. Each Hero was crafted to depict the essence of the movie in a single frame, acting as an attention anchor that reduced poster fatigue and helped users make faster, more confident viewing decisions.
Revised UI skeleton
Hero safe area skeleton
c. process
Extracted stills directly from video files.
Applied AI upscaling to restore low-quality screenshots.
Used generative tools to clean or enhance visuals.
Composited frames when single images lacked clarity.
Tested results via CTR A/B analysis.
Hero process
d. impact
+10–12% CTR uplift per updated title
Increased user decision speed by reducing poster fatigue
Institutionalized as a design best practice across teams
Continuous A/B testing on heroes and thumbnails to refine creative choices and track long-term impact
A/B test for Collateral 2004
A/B test for The Aviator 2004
A/B test for THE The Postman 1997
A/B test for Into the blue
A/B test for NYC Tornado Terror 2008
A/B test for The Traveller 2010
A/B test for Good Kids 2016
A/B test for Faces 2014
A/B test for Reader 2008
A/B test for Story of O 1975
e. list and MLP hero
Introduce a collage based Hero system for Lists and MLPs, differentiating them from individual movies. While movies retained a single-subject Hero, lists leveraged collage compositions to convey variety and volume at a glance.
Composition rules:
Movies → One central subject Hero for clarity.
Genre-based MLPs → 3-image collages highlighting high-performing titles in that genre.
Collections (e.g., “Based on True Stories”) → Hexagonal collage layouts showcasing multiple films.
Actor/Actress categories → Collages of stills from the actor’s available movies in the library.
Quarterly revamps ensured collages remained fresh and tied to best-performing or trending content.
I created the first drafts of these layouts, set composition guidelines, and then trained/assigned my team of designers to scale production. All assets passed through my feedback and verification loop to maintain visual consistency.
Single subject Hero visuals for individual movies, ensuring clarity while emphasizing the primary genre of the title.
Collage of three top-performing movies used for MLPs, highlighting variety while reinforcing the strength of the genre.
Actor collages reinforced recognition and trust by surfacing all available titles featuring the star in a collage visual.
Hexagonal grids highlighted diverse casts across multiple titles, giving list heroes a distinctive and dynamic identity
f. scalability
Led the creation of 70,000+ heroes across movies, TV shows, and MLP's.
Introduced a rating-based refresh cadence (monthly for high performers, quarterly for low performers) to keep assets relevant.
Strategized a workflow for newly ingested content, assigning genre-based designer managers and ensuring every new title received a hero within ≤30 hours of ingestion.
STACK TOP.
a. pain points
Users couldn’t tell curated lists from standalone titles.
Rows blended into each other, reducing clarity.
Old UI without stack top blurred content hierarchy and hurt discoverability
Old UI: ‘All Based on True Stories’ list visually blended with movie posters, lacking hierarchy.
b. design decisions
Introduce a Stack-top interface: a compact header element that instantly distinguishes collections from movies.
c. process
Designed and tested multiple stack variations.
Finalized a impactful, reusable layout that scaled across lists.
Iterative design options for list layouts, testing readability, visual hierarchy, and recognition at scale.
Live stack top skeleton
d. implementation
All lists/MLPs now have a stack-top interface.
Improved visual hierarchy between content rows.
e. impact
+Sharper visual distinction reduced misclicks on collections.
+12% increase in interaction with curated lists.
Adding Stack Top, Collection L1 saw a +9.4% CTR uplift into lists, a +6% increase in launches, and a +7.2% rise in average watch-time per session, proving clearer hierarchy directly boosted engagement and conversions.
With the Stack-top interface applied, curated lists such as ‘All Thriller Movies’ stood out clearly within content rows, eliminating confusion with single titles.
Curated collections became more identifiable, encouraging higher engagement.
MLP of Spanish Movies
f. scalability
Stack Top Became a standard UI component in Fawesome’s design system.
Applied consistently across categories and content rows.
BROWSE BY GENRE.
a. pain points
Legacy genre cards used heavy visuals and weak typography.
At TV distance, legibility failed, causing user drop-offs.
b. design decisions
Prioritize readability over visual flair: solid, centered typography with high contrast and minimal imagery.
c. process
Tested three versions:
Baseline solid type (clear but dated). Until April 2023
Outlined/hollow type (modern but low readability). May 2023
New March 2025 update: solid, centered, high-contrast design. Live Now
Version 1
Legacy Browse by Genre layout (pre-April 2023) highlighted genre blocks with textured visuals, later refined for improved clarity and performance.
Version 2
A/B testing in May 2023 showed the hollow-text design negatively impacted clarity, leading to an 8.56% CTR drop within a week, proving the importance of strong contrast in OTT typography.
Version 3 - LIVE
By solidifying typography, reducing visual noise, and adding stack-top branding, the 2025 Browse by Genre redesign improved clarity and contributed to a +10% CTR uplift.
d. impact
Hollow version 2 led to drop by 8.56% CTR in 7 days → immediate rollback.
March 2025 relaunch led to +10% CTR uplift, +4.5 minutes watch-time increase across the row.
e. scalability
New style locked into Fawesome’s cross-platform design language.
Now used consistently across CTV like Roku, Fire TV, Comcast, web and mobile app.
key takeaways.
One strong visual cue as Hero along with thumbnail, anchors user attention drives CTR.
Legibility > aesthetics, especially for TV distance viewing experience.
Design tokens - stack-top, delivered outsize clarity.
Experiment fast, measure, and roll back quickly, the hollow browse by genre, proved the value of data driven decisions.
Design operations - SLAs, refresh cadences, and genre ownership turned design into a repeatable growth engine at Fawesome
closing insight.
Fawesome interface redesign transformed browsing from a poster heavy, confusing experience into a Hero-first, legible, and systemized OTT platform.
Beyond visual polish, this project demonstrates my ability to:
Ground design decisions in user insights and measurable outcomes.
Balance creativity with operational scalability, ensuring solutions work at scale.
Deliver results across Web, Mobile, and CTV, creating a unified experience for millions of users.
This case study is not only about improving an interface, it’s about proving how strategic design decisions can directly influence engagement, watch-time, and platform growth.