CRUNCHYROLL
Investments & Wealth Institute | Associations | Storyblok | Branding & Messaging
Enriching Member Experience, Elevating Association Value
Challenge
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.
[spaceholder]
[spaceholder]
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.
Deliverables
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
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.
Solution
A Flexible Framework
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.
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
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.
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.
Results
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