Design System Architecture Design and Organization

Purpose

To improve efficiency, speed up onboarding, and ensure integrity and accuracy by redesigning the design system architecture, rebuilding components, and reviewing usage scenarios.

Challenge

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.

Production

Identified 5 usability issues, proposed a new design system architecture and team maintenance approach, and defined 45 components with related guidelines.

Outcome

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 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.

Through interviews with designers across the company, I analyzed their workflows and needs and identified ==four key issues.==

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.

Based on the goals, I provided a comprehensive solution covering ==guideline creation, component organization, and maintenance updates.==

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.