Cross-Border E-commerce Design System
🏆 Project Highlights
Built a scalable, multi-tiered Design System from scratch.
Developed 400+ components and 200+ variables.
4x increase in design-to-development efficiency.
Authored the System Governance Handbook and Implementation Guide.
🚀 Project Vision
To establish a "Single Source of Truth" that ensures Consistency, Efficiency, Scalability, Collaboration, and Sustainability.
Category
Design System
Role
Design System Architect & Lead Designer
Timeline
2025/01 ~ 2026/02
Tools
Figma、Notion、Gemini
🧗 Challenges
Fragmented styles across 8 different service platforms.
Massive technical debt: inconsistent components and messy file structures.
Aligning cross-functional consensus (Design, PM, Engineering).
🔍Situation
When I joined, the Figma files were virtually unmanageable despite the product being live.
The Chaos: Scattered components, missing master files, and a total lack of Auto Layout.
The Risk: High maintenance costs and increasing design debt with every new feature.
🔍Situation
When I joined, the Figma files were virtually unmanageable despite the product being live.
The Chaos: Scattered components, missing master files, and a total lack of Auto Layout.
The Risk: High maintenance costs and increasing design debt with every new feature.
📝 Task
My mission was to re-architect the design ecosystem to ensure the product could scale without losing quality or speed.
📝 Task
My mission was to re-architect the design ecosystem to ensure the product could scale without losing quality or speed.
⚡ Action
Step 1 — Dual-Layer Architecture
I designed a Two-Tier System to balance global consistency with local flexibility:
Core System: Global tokens and foundational components (Buttons, Labels, etc.).
Project System: Platform-specific styles and unique business modules.
Result: 8 platforms share a unified DNA while maintaining their unique service identities.
⚡ Action
Step 1 — Dual-Layer Architecture
I designed a Two-Tier System to balance global consistency with local flexibility:
Core System: Global tokens and foundational components (Buttons, Labels, etc.).
Project System: Platform-specific styles and unique business modules.
Result: 8 platforms share a unified DNA while maintaining their unique service identities.
Step 2 — Audit & Structural Hierarchy
I reclassified the library into three levels: Tokens → Components → Modules.
The Struggle: Reconciling 2-3 conflicting versions of the same element from legacy files.
Process: Cross-referenced live products and collaborated with engineers to define the "Final Truth."
Step 2 — Audit & Structural Hierarchy
I reclassified the library into three levels: Tokens → Components → Modules.
The Struggle: Reconciling 2-3 conflicting versions of the same element from legacy files.
Process: Cross-referenced live products and collaborated with engineers to define the "Final Truth."
Step 3 — Scalable Iconography
Moved from a static icon set to a Smart Icon Wrapper system.
New Workflow: Used a standardized Wrapper to control sizing and Instance Swapping.
Impact: Reduced maintenance overhead and made the icon library infinitely expandable.
Step 3 — Scalable Iconography
Moved from a static icon set to a Smart Icon Wrapper system.
New Workflow: Used a standardized Wrapper to control sizing and Instance Swapping.
Impact: Reduced maintenance overhead and made the icon library infinitely expandable.
Step 4 — Governance & Documentation
A system is only as good as its rules. I created:
Governance Handbook: Rules for updates, version control, and contribution flows.
Implementation Guide: Onboarding for new designers and developers to sync with the library.
Step 4 — Governance & Documentation
A system is only as good as its rules. I created:
Governance Handbook: Rules for updates, version control, and contribution flows.
Implementation Guide: Onboarding for new designers and developers to sync with the library.
Step 5 — Cross-functional Alignment
Facilitated workshops with PO, PM, and Engineering to reach a "Four-Way Consensus."
The Shift: All future iterations are now "System-First," minimizing communication friction.
Step 5 — Cross-functional Alignment
Facilitated workshops with PO, PM, and Engineering to reach a "Four-Way Consensus."
The Shift: All future iterations are now "System-First," minimizing communication friction.
✨ Result
400+ Components | 200+ Variables.
400% boost in production speed.
Successfully transformed a "design disaster" into a high-performance design ecosystem.
✨ Result
400+ Components | 200+ Variables.
400% boost in production speed.
Successfully transformed a "design disaster" into a high-performance design ecosystem.
🌱 Reflection
Coming from an Industrial Design background, this project reinforced my belief that "Aesthetics are the baseline; Utility is the goal." Designing a single page is easy; designing a system that supports thousands of pages while remaining manageable is where the true challenge—and the true value—lies.
🌱 Reflection
Coming from an Industrial Design background, this project reinforced my belief that "Aesthetics are the baseline; Utility is the goal." Designing a single page is easy; designing a system that supports thousands of pages while remaining manageable is where the true challenge—and the true value—lies.
See more works：)
E-commerce
Cross-Border E-commerce Platform Launch
Established a new service platform while ensuring a seamless extension of the corporate UI identity.
E-commerce
Cross-Border E-commerce Platform Launch
Established a new service platform while ensuring a seamless extension of the corporate UI identity.
E-commerce
Cross-Border E-commerce Platform Launch
Established a new service platform while ensuring a seamless extension of the corporate UI identity.
Game
Petlans
A cross-border, multi-disciplinary collaborative project focused on SDGs.
Game
Petlans
A cross-border, multi-disciplinary collaborative project focused on SDGs.
Game
Petlans
A cross-border, multi-disciplinary collaborative project focused on SDGs.
