Cabin X Design System
A comprehensive retail design ecosystem for DMALL, supporting 100+ modules across 6 major business lines. By engineering a scalable design-to-code pipeline and multi-theme logic, I reduced development cycles by 50% while ensuring a unified experience for millions of users.
This system is not just a UI library; it is a unified way of working that bridges Product, Design, and R&D.
Project Overview
As the Lead Designer, I spearheaded the architectural design and full-lifecycle management of the DMALL Retail Design System. This ecosystem serves as the foundational infrastructure for over 100 system modules across 6 major business lines, including Logistics, Supply Chain, Store Operations, and Finance. Over five years, the system has empowered a cross-functional team of 700+ developers and 200+ product managers.
Key Contributions
1. Multi-Theme Architecture & Design Tokens
I engineered a flexible three-tier style variable system (Color Palette, Common Styles, and Component Tokens) to support multi-theme requirements.
Automated Pipeline: Implemented a Figma-to-Code workflow where design tokens are exported as
token.jsonand automatically parsed into CSS, ensuring perfect synchronization between design and production.Scalable Support: The architecture provides seamless support for both PC and Mobile platforms, catering to diverse retail scenarios from web-based back offices to handheld warehouse devices.
2. Standardized Interaction Patterns & Templates
Beyond basic UI components, I established a library of Retail Design Patterns to solve recurring complex business problems.
High-Level Abstraction: Standardized interaction models for batch editing, multi-packaging entry, and complex data filtering.
Efficiency at Scale: Provided a suite of page templates for list views and dashboards, enabling different teams to innovate within a unified framework while reducing redundant development efforts.
3. System Governance & Evangelism
I led the organizational shift toward a design-system-centric culture.
Knowledge Management: Curated a knowledge base of 100+ high-quality documents covering component usage and case studies.
Community Contribution: Established a contribution mechanism that encourages team members to optimize and expand the system, ensuring its long-term sustainability.
Before & After
Empowered by the design system, the product interface has evolved from a collection of fragmented, siloed pages into a unified, cohesive experience with strong brand recognition.
Final Impact (The Results)
50% Reduction in Time-to-Market: Significant acceleration in delivery cycles. For instance, the EMEA official site launch was completed in just 3 weeks.
Operational Excellence: Enabled rapid global configuration of products for different merchants through a unified abstraction of components and systems.
Quality Consistency: Drastically reduced UI/UX inconsistencies and development bugs across thousands of pages by enforcing standardized components and logic.
Organizational Empowerment: Trained 200+ stakeholders through internal workshops and external evangelism, elevating the design maturity of the entire organization.