An Innovative Fusion of UI and Coding
The design system serves as a comprehensive guide for creating standardized UI, offering flexible component variants for constructing product interfaces. Two major innovative methods - atomic design method and component token naming, I contributed to this system to benefit both designers and engineers by streamlining design regulation and reducing long-term maintenance and workload.
Why invest in system design updating?
Unified Pattern For Dynamic Use Cases
Through the establishment of a framework, we can construct a system capable of accommodating diverse dynamic content, while also ensuring necessary guidelines for the content types within specific design patterns.
Levarage Consistency in Design and Development
Employ a uniform strategy and methodology for ensuring component and interaction consistency in similar circumstances and use cases across design and development.
Effortless Long-term in Iteration and Maintenance.
Each layout element synchronizes with other features or products in the ecosystem. As a designer, I can specify variants for various use cases. These elements have individual characteristics with maximum flexibility, making them easy to update alongside the design system.
Chapter 1
Applying the atomic methodology in practice.
My Role: I spearheaded the development of atomic design, collaborating with fellow product designers to collect business use cases and establish rules for creating a layout pattern integrated into the design system.
Result: Extensively Applied in Over 10 Product-Specific Customized Components, serving as a library that seamlessly integrates with the design system library, aligning with business use cases and development deployment.
Reference: Atomic Design
Atomic Methodology On Card Design
Because the Atomic Methodology was not applied to any components, so I led discussions with the design system team on the discussion of the atomic methodology established into component design guidelines. To address this, I organized design workshops with product designers across various products and platforms, introducing the atomic methodology and exploring how to standardize the atomic system. We began with the card component, which is commonly used across different products and platforms.
Atoms
"What are the major elements compositing A CARD?"
Element Category
Major element category helps to define the essential characteristics and parameters of a card.
Interaction
Incorporating interaction as an integral component and anticipating hitboxes for a better user experience.
Dimensions
Setting the layout standard and minimum size for a card while considering accessibility.
User Cases
Integrating diverse use cases from various products while maintaining flexibility to accommodate future needs.
Molecules
"What are the major elements compositing A CARD?"
We began by gathering current and potential card samples from various use cases and products to gain insights into the usage of different types of cards. Subsequently, we conducted an analysis of the elements and grouped them based on similar functionality.
Organisms
"What are the major elements compositing A CARD?"
We began by gathering current and potential card samples from various use cases and products to gain insights into the usage of different types of cards. Subsequently, we conducted an analysis of the elements and grouped them based on similar functionality.
How Does Atom Design Appliy in Pratical Card Use Cases?
Text holder - We began by gathering current and potential card samples from various use cases and products to gain insights into the usage of different types of cards. Subsequently, we conducted an analysis of the elements and grouped them based on similar functionality.
Complex Card With Multi Functionalities
Clinical Science Card with accordion to expand
Simple And Small Card
Billboard card with different status
Large Card With Image
Annoucement card with image - horizontal scroll
Chapter 2
Establishing token naming in the design system.
My Role: As the pioneering designer in charge of token naming for product-specific components, I initiated the process by establishing colour tokens for different modes (dark mode, light mode, and high contrast mode). This aligns with the global token naming guidelines and involves collaboration with fellow product designers and the UI development team.
Result: Effectively implemented colour tokens for various modes by creating a comprehensive colour system for both general components and their variants. This streamlined colour alignment for both designers and the engineering team across various use cases.
Reference: Token Naming