Project Foxhound

Lead designer for Crunchyroll's brand new home feed management tool.

Project Introduction

A powerful WYSIWYG editor that revolutionized Crunchyroll's home feed creation workflow, replacing the outdated FMS portal with an intuitive visual interface that dramatically reduced creation time while improving personalization. Now deployed across all major platforms, Foxhound powers the home experience for millions of Crunchyroll users worldwide.

TLDR

As lead designer, I developed the UX/UI architecture, created wireframes and prototypes, established component hierarchy systems, and collaborated with engineering teams to ensure seamless implementation.
Designed an intuitive drag-and-drop interface that balanced robust functionality with ease of use for content teams unfamiliar with complex design tools.
Worked within a four month timespan to get a working prototype of foxhound, which then turned into the final product.

Background

In 2019, we revamped our entire Crunchyroll design experience from the ground up. From that hard work, we developed a brand new homefeed. This homefeed showcases both dynamic and curated video content, along with other collections like news, events, or games.

Crunchyroll 2.0 homefeed

Project Goals

Reduce the time required for CAPS team to create a new home feed from 1h to 15-20 min.
Improve the quality of content recommendations by leveraging ThinkAnalytics (TA) across collections as well as homepage performance.
Support a higher degree of flexibility and personalization in our user experience as well as A/B testing capabilities.
Increase confidence and job satisfaction of the CAP (Content and Programming) team.
Provide a new, engaging, and unique experience for fans.
Quantify goals and metrics from a performance perspective (e.g., speed, efficiency, clickthrough rate).

What is Foxhound

Foxhound is our page building tool that replaces Crunchyroll's old management tool called the FMS portal.
Foxhound is a WYSIWYG editor that describes high level platform agnostic recursive component structure. This allows for backend services to control the layout and behavior of all client presentations.
Foxhound publishes a recursive schema in JSON to S3.

Foxhound is a WYSIWYG editor that allows for quick home feed creation.

FMS Admin

The FMS admin portal was a collection of tools that allowed teams to create various Crunchyroll home feeds around the world. However, due to its unintuitive nature, it failed to deliver a fast and efficient way for teams to build home feeds.

Video above shows the steps taken to make a Crunchyroll home feed, using FMS portal.

How it all works

Foxhound in action.

With Crunchyroll 3.0, we introduced full bleed hero art on the website. This allowed for the display of richer, more vibrant images and logos. We also introduced better show descriptions and genre links inside the new hero art. All of this is now possible because of the work we did within Foxhound. Foxhound enables us to:

Add new interactive components (e.g., music collections, hero banners, dynamic collections).
Automatically pull catalog information and series descriptions.
Provide "up next" information for seamless viewing.
Add collections to show pages and reflect different show states (e.g., seasons, coming soon).
Explore potential future features like meter or ratings targeting.
Fully integrate ThinkAnalytics for improved content recommendations.

Output & Results

With Foxhound now fully deployed across most platforms (100% on Web, Android, PS5, and Xbox), we've successfully transformed Crunchyroll's content management capabilities:

Reduced creation time by 50% — Home feed creation time decreased from 1 hour to just 30 minutes, with further efficiency gains expected as teams become more familiar with the tool.
Expanded personalization — Integration with ThinkAnalytics now delivers tailored content recommendations to millions of users across 202 regions in 10 different languages.
Improved team satisfaction — Content teams report greater confidence in their ability to quickly respond to user preferences and promote timely content.
Enhanced future roadmap — We've outlined plans for additional enhancements, including a more robust calendar view to track feed publication schedules and improved Media Valet integration for streamlined asset discovery. These improvements are slated for release later this year.
Platform-wide transformation — Successfully rolled out to almost all client platforms, creating a consistent management experience that powers diverse user interfaces from mobile apps to gaming consoles.

Editing information in the new Crunchyroll 3.0 hero carousel is quick and easy.

When making new home feeds, our internal team has the ability create region specific home feeds if they so desire.

The Foxhound editor works a lot like Figma, in that you're able to drill into layers, and edit specific components if needed.

2024