To improve efficiency, speed up onboarding, and ensure integrity and accuracy by redesigning the design system architecture, rebuilding components, and reviewing usage scenarios.
Identified 5 usability issues, proposed a new design system architecture and team maintenance approach, and defined 45 components with related guidelines.
Currently, the design components and guidelines are scattered across various design system files and design drafts. Many components, after being migrated from Sketch, were broken and required rebuilding.
The design system was implemented in SHOPLINE's e-commerce platform V2, with ongoing discussions and iterations held during internal weekly meetings.
Project Background
The redesigned system is 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.
Currently built in Figma, the system is widely used by designers and engineers, playing a crucial role in maintaining UI/UX consistency. However, due to the lack of comprehensive management and usage guidelines, and the fact that some components were transferred from Sketch, there are issues such as unclear component usage scenarios, broken Figma components, and difficulty in locating elements, reducing efficiency and disrupting design consistency.
Problem Definition
Problem 1
When designers need to plan new pages, the lack of defined usage scenarios makes it difficult to determine which components to use (e.g., when to use a Secondary Button) or which guidelines to follow (e.g., spacing between primary and secondary headers). As a result, designers must refer to previously launched pages or consult with others, increasing the risk of inconsistency across the interface.
Problem 2
Inconsistent naming and missing components make it impossible to search for the needed elements. Combined with unclear usage scenarios, designers must return to the main design system file each time they need to find components.
Problem 3
The current design system uses both component- and guideline-centered filing, resulting in content duplication. For example, a document named Flow contains interaction patterns for all components (e.g., menu bar interactions) while also having separate pages that record component specifications (e.g., menu bar color guidelines), leading to partial overlap across different pages.
Problem 4
The guidelines for component pages lack a unified writing standard. In addition to missing usage scenarios, key elements such as basic styles, states, and interaction patterns are incomplete, making it difficult to find comprehensive guidelines in the documentation.
Problem 5
The components in the product can be categorized into four versions: V2 original, engineer-created, designer-created, and other UI kits. These versions lack clear communication and update mechanisms, resulting in the V2 design system becoming outdated as it fails to update components and guidelines in a timely manner.
Design Goals
Restructure the sidebar organization in the Figma file, allowing designers to quickly locate design guidelines and components.
Provide sufficient guidance and instructions to help first-time users quickly understand the design system.
Ensure the integrity and accuracy of the design guidelines as they evolve with future updates and modifications.
Solution
To maintain quality and align with designers' habits, components are organized using the following structure:
All subcomponents are stored on the All Component page, allowing users to easily find and use the needed 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 resolve usage questions.
Similarly, the full guide page also includes links to the storybook and all component page, enabling users to return to the all component page after reading the guidelines, avoiding direct modifications to the master component.
Create a checklist that standardizes components under the following seven fixed headings: Usage, Spec, Content, Layout, Application, Asset, and Components. Each heading must have specific content written under it.
Record component issues and assign relevant personnel for resolution; regularly review pending component issues in weekly meetings and discuss solutions.
Key Learnings
Through this project, I realized that the design system is crucial for product consistency. If the design system is not based on scenario-driven guidelines, it will merely function as a component library without providing practical implementation references. Additionally, when guidelines and components are scattered across different documents, it increases implementation time and exacerbates inconsistencies in product design.
Different roles have different needs for the design system. Consistent naming affects coding efficiency, designers' ability to locate components, and testing efficiency. Ineffective communication can lead to misalignment in component usage, where designers and engineers might use different components. Therefore, synchronization and update mechanisms across roles are essential for maintaining the design system, which is not only important for designers but also critical for ensuring product quality.