Project Background
The V2.0 design system in SHOPLINE's e-commerce product line, used for the backend management pages of B2B products. It offers features like online store design and order processing and is one of the primary design systems.
However, because the system lacked clear management and usage guidelines, the ulibrary suffered from unclear usage scenarios, broken components, and poor discoverability.This slow down the design process and made it difficult to maintain consistency across projects.
Problem Definition
Problem 1
Undefined component usage scenarios made it difficult for designers to build new pages using the design system.
Without clear usage scenarios, designers had to look at existing pages or ask others verbally to confirm which patterns to use. This increased the risk of inconsistencies across the interface.
Problem 2
Inconsistent component naming and organization made components difficult to located
Designers often had to browse through large sections of the design system file just to find a component, rather than finding it through direct search.
Problem 3
No standardized format for guidelines, reducing reading efficiency.
The component guidelines lack a unified writing standard. Key elements such as basic styles, states, and interaction patterns is incomplete, making it difficult to find comprehensive documentation.
Problem 4
No clear update mechanism caused the design system to fall out of sync with the live product.
Because newly created or updated components were never documented, the design system remained outdated and failed to reflect the actual state of the components.
Design Goals
Improve Efficiency
Restructure the sidebar organization in the Figma file, allowing designers to quickly locate design guidelines and components.
Increase Onboarding Speed
Provide sufficient guidance and instructions to help first-time users quickly understand the design system.
Maintain Quality
Ensure the integrity and accuracy of the design guidelines as they evolve with future updates and modifications.
Solution
Restructure Documentation
To maintain quality and align with designers' habits, components are organized using the following structure in Figma:
Introduction
Provides a clear user manual outlining the design system’s document architecture, along with instruction for creating, maintaining, and updating components.
All Components
Lists all components in the design system so designers can easily browse, reference and duplicate.
Full Guide
Shows the detail guideline for each component, including UI specification and usage scenarios.
Separate Parent and Subcomponents to Ensure Maintainability, Link Components and Guidelines for Cross-Reference
All subcomponents are stored on one page, allowing users to easily find and use the components. The use of subcomponents also helps preserve the integrity of the overall design system.
Links to the storybook and full guide are provided in the top right corner of each subcomponent section, allowing users to access the current component status and usage guideline.
Define a Unified Writing Style and Format
Create a checklist that standardizes components under the following seven fixed headings: Usage, Spec, Content, Layout, Application, Asset, and Components.
Create a Report Form for Real-Time Component Status Updates
Record component issues and assign an owner. Review all pending issues during the weekly meeting and discuss potential solutions.
Key Learnings
The Design System Must Be Scenario-Based and Improve Cross-Role Synchronization
I realized that the design system is crucial for product consistency. Scenario-driven guidelines help designers understand how to use a component, not just how it looks. Moreover, when guidelines and components are scattered across different documents, It slows down implementation and leads to more design inconsistencies.
Another goal of a design system is to improve collaboration across different product teams. Consistent naming affects coding efficiency and designers’ ability to locate components. Poor communication can cause misalignment in component usage, with designers and engineers choosing different components. Therefore, clear syncing and update mechanisms across roles are essential to maintaining the design system and ensuring overall product quality.