[Design System] Every project begins with a plan…

We recognized early on that this would be a long-term endeavor, especially with numerous stakeholders involved and impacting the entire existing system. Therefore, a well-defined plan is essential to maintain focus.

Firstly, it’s important to acknowledge that not every project requires a design system

Constructing such a comprehensive system demands significant time, effort, and manpower.

Illustration of Design System complexity (source: https://rangle.io/blog/the-six-pieces-of-a-design-system)

Before diving in, consider the following factors to determine if a design system is necessary:

• Product complexity: Does your product cater to multiple user groups, industries, or platforms? Is there a need for cohesive branding, style, and component usage across platforms?
• Team size: Are there multiple teams of developers and designers overseeing the project? Is there a need for alignment on brand, style, and component usage?
• Product longevity: Is your product intended for long-term use and maintenance? As mentioned, the design system is created to maintain the product so that future modifications will become easier.

Initially, you may not have answers to all these questions. Begin by implementing design guidelines on a small scale and gradually transition to developing a comprehensive design system as needed.

Four Key Objectives

This stage encompasses four key steps:

• Establish component libraries
• Collaborate with teams and relevant stakeholders
• Develop a branding playbook
• Enhance and implement the new design system across products

Break Tasks into Manageable Pieces

Once the destination is clear, the next step is to identify the necessary actions to reach those goals:

1. Establish component libraries:

• Determine the number of libraries required and break down the tasks necessary for their development.
• In the initial phase, focus on building at least three structural layers: foundation, core components, and product-specific components.

Library structure by My Nguyen

• Additionally, maintaining a repository of current designs and product deliveries provides an overview for designers, project managers, and stakeholders alike (which is called Master file)

The Master File’s Order Process within the Merchant App

However, introducing new elements doesn’t mean scrapping existing ones entirely. It’s about improving the current system rather than starting from scratch. Researching and synthesizing existing design patterns are crucial.

2. Collaborate with teams and relevant stakeholders:

• Implementing a large-scale system comes with its challenges. Regular updates and progress reports with relevant parties allow stakeholders to anticipate and contribute ideas for system development. Effective communication and alignment among team members regarding capabilities, challenges, and implementation feasibility are paramount.
• Identify stakeholders directly involved in the design system change, such as product designers, engineers, and product managers.
• Involving engineers in the implementation process early on can help minimize last-minute modifications.

3. Develop a branding playbook:

• This phase can be initiated at the outset or integrated at any stage of design system implementation. Early adoption helps minimize future revisions. However, the timing of work phases largely depends on team availability and resources.
• Identify relevant tasks and stakeholders involved in building the branding kit, such as Design Center and Graphic Designers.
• While design systems aim for stability, branding remains adaptable to changing needs. Hence, organizing and connecting components effectively prepares for future adjustments.
  For instance, defining color tokens allows for swift updates across components, reducing time spent searching for specific elements.

Example of color token

In summary, a robust design system foundation eases the process of branding changes, minimizing technical disruptions.

4. Enhance and implement the new design system across products:

• This phase caters to two main users: designers and engineers:
  Designers will integrate the new set of components into existing and future designs, requiring different features, usage guidelines, and the addition or removal of elements.
  Engineers will organize and implement the system, considering technical requirements and feasibility.
• Tailor the design system to meet the diverse needs of these user groups, ensuring continuous refinement and improvement.
• Break down workflows and features, plan their implementation, and monitor project progress, utilizing tools like Jira to facilitate discussions and track milestones.

Utilize Jira tasks for project management

A Comprehensive Planning Approach…

In essence, while it may seem daunting at first, clarity of tasks simplifies the process, leaving only the courage to embark on the journey.