[Case 04]
U-NEXT illustration System
VOD Service
U-NEXT illustration System
A modular illustration system designed for scalability, consistency, and cross-team customization
My Impact
Designed and illustrated a modular illustration system in Figma, enabling scalable customization through component-based architecture while maintaining visual consistency.
[Industry]
Video on Demand
[My Role]
Lead Designer
Illustrator
[Timeline]
2021
A quick overview
[Background]
I originally created a set of illustrations for product onboarding.
After the launch, the marketing team reached out and asked whether I could create additional illustrations for their own use cases.
Even with graphic designers on the marketing team, creating or modifying illustrations still required:
Repeated back-and-forth
Manual redraw for minor adjustments
Context-specific assets that couldn’t be reused elsewhere
Instead of producing more one-off illustrations, I began exploring how illustration could be treated as a product system, not a static deliverable.
[Approach]
What if illustration worked more like UI components?
If a guideline and component-based structure existed, not only designers but also non-designers could assemble and export illustrations for:
App surfaces
Marketing websites
User emails
Internal presentations
This idea became the foundation of the modular illustration system.
Character design guidelines
[System Structure]
I broke down each illustration into structured layers based on how illustrations are naturally constructed.
Base elements: Figure, objects, background, elements.
Sub-components, ie:
Head → hair style, hair color, head direction, skin color
Each element was designed as an individual Figma component, allowing parts to be swapped without affecting the overall composition.
[Guideline]
Assembly Flow
To make the system accessible even to non-designers, I designed a clear assembly flow.
The intended usage followed a simple sequence:
Select a character
Choose a viewing scenario
Add functional or content elements (e.g. genre icons)
Apply a background
By following this flow, users could generate visually consistent illustrations tailored to specific needs, without manual illustration work.
[Application Example]
Try drag around and assemble your illustration ：）
Japanese Film
Thank you
International Film
Thank you
Foreign TV Series
Thank you
Documentary
Thank you
Anime
Thank you
Korean Drama
Thank you
Japanese TV
Thank you
Kids
Thank you
Japanese Film
Thank you
International Film
Thank you
Foreign TV Series
Thank you
Documentary
Thank you
Anime
Thank you
Korean Drama
Thank you
Japanese TV
Thank you
Kids
Thank you
