Anime hero image for Crunchyroll case study


Transforming UX for a Multilingual Media Enterprise


Poised for Dramatic Improvement

It’s not unusual for very large corporate enterprises to have multi-layered websites comprising hundreds—even thousands—of pages.

But media organizations—such as the hugely popular anime streaming site Crunchyroll—house hundreds of thousands of pages and articles. Crunchyroll News, which is just one facet of the organization’s digital presence, provides continuous news and insights to tens of millions of subscribers and freemium members.

The company was working on the release of new corporate branding and a full site redesign, which included integrating the Crunchyroll News site into their ecosystem of videos, manga, games, and merchandise.

The problem?

Migrating the more than 230,000 multimedia news articles—in nearly a dozen languages—was a monumental task that needed to be completed in tandem with their larger website redesign.

Logo for Crunchyroll



Crunchyroll News logo

In addition, the migration was a unique opportunity to make dramatic improvements in user experience, organic traffic, engagement, and ultimately, subscriptions. The Crunchyroll team knew that the news site had been neglected, and they were ready to modernize it.

Requirements that were critical to the news site’s success included:

  • Easy usability, defined user roles, and intuitive workflows for content editors working in different countries and languages

  • Clean and clear content structure, tagging, and taxonomy to improve site usability and search

  • Seamless integration and navigation into the main Crunchyroll ecosystem

  • Modernized, multilingual, and mobile-first experience for all users

It was a tremendous chance to make a meaningful difference for both internal and external users.


Content Audit

Content Model & Taxonomy

UX Design

Storyblok Implementation

Content Migration

Service Offerings

Project Management and Coordination

Website Strategy

Website Development

UX Design

Content Migration Strategy

Storyblok Implementation

Content Editor Training

Crunchyroll News showcase image showing light and dark designs

Choosing the Right CMS Partner

Coordination and Project Management with Storyblok Experts

To ensure the news site migration met both their timeline and their requirements, Crunchyroll’s technical team decided to bring an outside developer team into the project to work alongside their in-house developers. But they didn’t want just any provider; they needed a fully dedicated dev team with specific knowledge of user experience (UX) design, information architecture design, and their chosen CMS: Storyblok.

As a certified Storyblok partner, Refactored was uniquely positioned to take on their migration, providing experienced Storyblok developers dedicated to completing the news site. And because we are a full-service agency, we also understand the importance of elevating UX design, SEO, and site usability along with tailored CMS configuration and deployment.

But for Crunchyroll, the deciding factor was discovering Refactored’s expertise in creating tailored CMS environments that empower content editors—now and over the long term.

Most developer teams have the ability to configure in-the-box features and enable basic functionality. But Crunchyroll’s news editorial team is an outside-the-box group. They have a large core team and hundreds of contributors publishing in nearly a dozen languages from countries around the world. Their Storyblok configuration needed to be highly adaptable—empowering editors to tell an endless variety of stories, using every kind of media—within an intuitive content structure and defined branding.

Because Refactored specializes in that kind of nuanced focus on content editor usability, we became Crunchyroll’s top choice.


A Flexible Framework

Image sowing Crunchyroll's redesigned News home page

Storyblok Is a Natural Fit

Our experienced dev team provided recommendations to help Crunchyroll make the most of Storyblok’s features.

  • Customizable, flexible content structuring enabled us to create an intuitive content model that supports their complex, often overlapping content categories.

  • Headless architecture empowers teams to tailor content for different front-end channels, devices, audiences, and outlets.

  • The Visual Editor and customized publishing workflows enable content editors to collaborate, even when many people are contributing from around the world.

  • Defined user roles and permissions help their teams govern article production and maintain brand standards.

  • An API-first approach enables secure integrations with their existing systems.

  • Multiple options for managing multilingual, multi-country content, without added cost, empowers support of the global audience.

To maintain momentum and stay aligned, we:

  • Provided weekly status updates

  • Created a shared milestone calendar to give stakeholders real-time visibility into task statuses

  • Conducted regular alignment meetings to ensure tech, design, and wireframes met specifications

  • Delivered Storyblok training for content editors, including training on taxonomy changes

  • Maintained constant availability and responsiveness in our shared Slack channel

—all while executing on all design and technical priorities.

Enterprise-Level Project Management

Refactored's team is adaptable to any project scope.

Before beginning our work with Crunchyroll, we put in place a project management structure that would enable true partnership with their internal team.

The sheer size of the full ecosystem migration demanded that effort be divided between our teams. However, that also meant that for the quarter-million-article News site that was our focus, we needed to establish an even greater level of oversight than in projects we manage independently.

We established shared communication channels, using their team’s familiar collaboration tools and systems.

Above and Beyond

With these available framework basics, we applied our experience over a phased process to creatively solve Crunchyroll’s complex requirements.

Composable components in Storyblok for Editor-first workflows

Phase 1: Content Audit and Modeling

To ensure that we’d start on firm footing, we performed a deep content audit. Because of the volume of content involved—and because the original site was not responsive—we knew moving text and images into Storyblok would not be straightforward.

We wrote custom tools for this audit, which informed our content modeling exercises.

Then, we created multiple content models, presenting each to the Crunchyroll team and refining each iteration to ensure the final model would provide the editing experience their teams required.

  • Identified & transformed 100+ legacy content tags

  • Mapped hundreds of colors to a common, standardized color set

  • Normalized over 100 fonts and sizes to defined brand text and header choices

  • Developed an intuitive structure for their multilingual content

Crunchroll design includes a dozen language variants, including Arabic

Phase 2: Wireframing and Design

Our UX design experts leveraged Crunchyroll’s brand design system and specifications to create a set of high-fidelity wireframes, a critical time- and cost-saving step for complex sites.

Multiple Variants

We created pixel-perfect responsive designs for mobile and desktop, with variants for light and dark modes.

ADA Compliance

We vetted a full range of ADA-compliant colors for their design system, ensuring both light and dark modes meet the AA standard of Web Content Accessibility Guidelines (WCAG).

Take a Closer Look

The News site supports content in 11 languages, including Arabic, which reads right-to-left. We created the completely flipped page design shown here to ensure RTL balance and readability.

Image sowing Crunchyroll's redesigned News home page

Phase 3: Storyblok Implementation and Component Creation

As we moved into technical development, our team set up the Storyblok space for Crunchyroll News.

We applied the content structure, built a set of core pages for reuse across content categories, and created reusable block components to empower editors to customize new pages.

With these customized, composable components, Crunchyroll’s team can tell any kind of story, incorporating any kind of content—all within their approved publishing workflow and adhering to their brand guidelines.

Because JSON is highly modular, open, and flexible, the new articles are portable. As the site continues to develop, the Crunchyroll team can move to the next iteration of their site without having to redo this deep, extensive process.

Phase 4: Migration Scripting, Testing, Execution, and QA

In the final phase of technical development, we created a comprehensive migration script that handled the transposition of raw HTML-based posts into structured JSON.

This complex phase required:

  • Parsing the images

  • Downloading and reuploading over 600,000 images into Storyblok

  • Re-creating author records

  • Creating URL redirects for every article

Before attempting the full migration, we segmented a sample set of article pages and ran them through a complete testing process.

A detailed quality assurance check revealed any stray issues ahead of the full migration. From there, we ran the scripts on the live environment and coordinated with the internal development team so they could finish their work before launching the new website.

Crunchyroll Showcase mobile images of the News site
Image of spotlight image on Crunchyroll News, light mode


Engaging a Truly Global Community

The resulting Crunchyroll News site is light years ahead of where it started.

Content creators and editors have the power to leverage best practices in SEO, syndication, content discovery, and navigation to attract, engage, and convert anime fans from around the world.

Site visitors now enjoy a truly mobile-first experience, with intuitive navigation, easy ways to find and interact with the content they want on any screen or device, and seamless crossover into the rest of the Crunchyroll ecosystem.

To ensure the experience is uninterrupted, the site is geo-adaptive to display content, searches, and RSS feeds in each users’ preferred language. And users can customize their experience further with the option to toggle between dark-mode and light-mode versions of the site.

In the midst of an enterprise-scale site redesign, Crunchyroll has made the most of their opportunity, establishing Crunchyroll News as the go-to source for anime news, exploration, and engagement.

See the Crunchyroll News SiteStart a Storyblok Enterprise POC

Are You Ready to Modernize Your Website?

Talk to us about what it means to have a website that breaks the status quo—and shatters expectations for your visitors and teams.

Tell Us About Your Website Project