Designing One Anime Platform for 15 Screens
Crunchyroll isn't just a streaming service; it's also a store, a game hub, and a community space for anime fans. Serving that community means supporting an unusually wide spread of touchpoints: web, mobile, and nine different living-room platforms like smart TVs, game consoles, and Roku boxes. Factor in 12 languages and licensing complexities, and the product design challenge is easy to underestimate.
Director of Product Design James Hsu and Staff Product Designer Susan Lin are responsible for making sure that experience feels cohesive everywhere. Their main tool is a Universal Design System, but the workflows around it were built on legacy processes acquired through mergers, which made adoption slow and navigation painful. They've since moved handoff onto Dev Mode to clean things up. Here's how they describe the shift.
Why a Design System Matters
For Hsu, a successful design hits two baseline metrics. First, it follows professional visual principles—proper typographic hierarchy, grid alignment, consistent spacing. Second, the interaction itself is sound: no edge-case loops, no confusing content. The design system is what makes meeting those bars at Crunchyroll's scale possible.
"Design systems enable professionalism and consistency, allowing us to create a user experience that looks and feels the same no matter which device a user is watching or shopping from," says Lin.
Hsu argues that visual glitches, like an off grid or a sudden font change, add up to cognitive load that can push a user away from subscribing. He also frames the system in terms of engineering culture: "There's a popular phrase in engineering called DRY: Don’t Repeat Yourself. Without a design system, we keep repeating ourselves with redundant components."
Shedding the Legacy Workflow
Crunchyroll's history of mergers left the team with process baggage. The previous handoff system relied on Jira workflow triggers that would fire alerts when a feature with a component dependency was released. The automated alerts were meant to loop in the right stakeholders, but Hsu says it was "super convoluted," and time zone dependencies meant no one had the latest thinking. The result was a ton of inconsistency across applications.
Documentation lived exclusively in Zeplin, and it was organized per client—separate systems for iOS, Android, tvOS, and Android TV. Even getting access was a chore. Lin remembers the friction of requesting invites, foraging through branches to find a specific use case, and comparing it against a design from three years prior. "With Dev Mode in our new system, it’s a lot easier for someone to just drop in and get the information they need," she says.
Performance was a frustration too. Loading a single signup flow for a payment type in the old tool could take four to five minutes just to get one artboard on screen. "Then you’d find that it wasn’t the flow you were interested in and continue the hunting and pecking process," Hsu says. That slow parsing was a pain quickly solved by the migration.
The old review process itself was unclear. A designer would post work in an export tool and tag a peer for review, but a reviewer would send it back to "in progress" after commenting. The result: whatever was exported was rarely final. Teams couldn't trust the latest export unless the artboard label had been manually updated to "ready for development."
Lin is pragmatic about the transition. "That’s purely legacy," she says of those old labels and steps. "All 20 designers on the team aren’t following the old process anymore."
Handoff With Dev Mode
Making the switch took some enablement. Designer Keeley Laures created documentation and ran onboarding workshops for developers on how to approach handoff and pull the specs and code they needed.
The team's new handoff ritual is simple: a designer starts a fresh page with the canvas tidied up and labels that page ready for development. The engineer receives a Figma link to just that page and never has to wade through the ideation that led up to it.
"It loads incredibly quickly, which was a huge pain point," Hsu says. "Seat and role assignment has been really easy because anyone who’s an engineer gets a Dev Mode seat."
The loop has also shortened. If there's a discrepancy in technical feasibility, comments live right on the relevant frame. Figma pings participants when they're mentioned, so conversations resolve in context instead of in another tab. "Having it all laid out has been instrumental in making sure that everyone is on the same page about functionality," he says.
There's also a transparency benefit. Depending on the relationship, developers can still view the in-progress work because they have access to the wider file. Lin has seen engineers use that access productively. "They’ve been able to come in and make really good suggestions, or point out things I missed while working through a problem so it can be incorporated into the final handoff version."
The system stays useful beyond engineering handoff: product managers and QA teams both cross-check work in Figma to be sure what's shipping looks and functions as intended.
Complexity by Design
The larger architectural challenge hasn't disappeared. Crunchyroll keeps a foundational layer with separate component libraries living on top of it per client. That complexity is inherited, and Hsu acknowledges there are plenty of one-off components with excessive variants. But he resists letting the legacy dictate the future.
"The thing that I always bring up to people on the team, as well as external partners, is the design system is designed to serve us. We are not supposed to be prisoners of process to this thing that people before us created."
Lin adds that people are at different stages on the journey given how much organizational change they've been through. Some designers still need education on why an upfront time investment pays off down the line. Dev Mode, she notes, is already a helpful bridge. The engineering team can pull the right values and verify exactly which component the design uses. She's also watching Code Connect arrive as a next step, letting engineers access the design system's code right from components.
And what does the design team get from this new generation of tooling? Hsu puts it simply. "Dev Mode makes me think a lot less, and makes my life a lot easier." The team now has the momentum to keep moving the design system forward with modern tools, letting them focus on the fan rather than the cleanup.
