Design Systems: How to Make Sure Yours is Realistic for Your Organization

What is a Design System

Design systems have many definitions, but in the simplest terms, it is a set of deliverables that are composed of both tangible and intangible elements.

• Tangible: patterns, components, tools for designers and developers, style guidelines.
• Non-tangible: brand value, mindset, shared values and beliefs.

The point of a design system is to help facilitate the work of the creative team (including designers and developers); therefore, the system must work for those who will use it (the team). The goal is to provide design languages that enable knowledge to be easily transferred from one team to another.

Most design systems usually contain both style guides and pattern libraries.

• Style guide: focus on the use of graphic styles (colour, fonts, illustrations).
• Pattern library: focuses on the use and integration of functional components.

Design systems encompass the general knowledge shared between company departments (such as designers and developers). Design systems provide solutions to design problems that various teams regularly face through the use of design patterns that smooth out the entire design and development process.

The Stages of a Design System

Creating a design system is a long process that can be broken down into five main stages, as outlined by the Design System maturity index, created by Marcelo Somers and John Gully.

Stage 1: Inconsistent

• No design system in place.
• The organization has not yet attempted to unify a single UI paradigm.

Stage 2: Static

• PDF or Wiki of brand guidelines is established.
• This stage typically takes place when organizations hire an outside agency for their branding work. The agency will deliver a PDF which the organization will use as a guideline for every future application they build. However, this strategy can be problematic because the branding work is static and non-evolving, meaning it is unable to fulfill the long-term needs of a growing company/organization. 

Stage 3: Manual

• UI-kit and component-library with code examples are established.
• This stage reflects some reality of the application you are building as your pattern libraries can showcase some live examples and snippets of code that developers will use in the future. 
• This stage, however, is still just a form of documentation that must be manually updated to ensure synchronicity with the production of applications.

Stage 4: Automatic

• Component-library is automatically compiled into the code of the website. 
• Creating an automatic pattern library requires the coordination of the whole organization, as multiple applications will be using the same codebase. If changes need to be made to the codebase, it will likely have implications on all the applications that use it.
• This is the stage where the manual documentation of stage 3 becomes automated to sync with the production site. For this to happen, the following requirements of an automatic design system must be fulfilled:

1. The pattern library and production applications must both have access to the same UI code. 
2. As part of your application’s build process, the UI code must be downloaded from a remote location.
3. UI code must be versioned so various applications can be tied down to the design system at different stages.
4. Live examples in the UI code must be automatically updated with new changes.

Stage 5: Governed

• The pattern library process is completely integrated into your organization.

Creating a Design System that fit your organization

When creating a new design system, many look to the top design systems currently available, such as Google Design, Shopify, Apple, etc. What many fail to realize is that the design system used by the largest tech companies is often out of reach for smaller-scale companies, simply because companies like Google and Apple have a nearly unlimited amount of resources (money, time, maintenance team) to pool into their design systems. While these systems are impressive, they are often not realistic for an average-sized company, nor are they necessary.