Do You Have the Building Blocks to Scale?

A Design System is the foundation for a scalable digital enterprise, yet few companies have implemented it. To level up, this system is a must-have.

Imagine two toy houses. House A is constructed of wood and glue. House B is constructed from LEGO pieces. Later, you decide you want to do a complete makeover of the layout, and you would also like to add a little shed in the yard. This is quite an undertaking with the house made of wood but relatively easy with LEGOs.

Most websites and apps are analogous to a house made of wood and glue. They are somewhat rigid. Any additional change or modification often requires significant work from scratch. To address this problem, Design Systems have been developed to create reusable and scalable digital components. While most companies lack a Design System, this approach is quickly becoming the standard operating model among leading tech companies like Airbnb, Salesforce, and Uber. In these companies, the system serves as a single source of truth for product, design, and engineering teams to improve workflow productivity and reduce communication ambiguity. In this article, I will touch upon four common questions related to Design Systems.

What is a Design System?

A Design System is a combination of pattern libraries, style guides, and more. It is a collection of reusable user interface (UI) elements that can be assembled in different variations (like LEGO pieces), following explicit usage and interaction guidelines. The Design System is not just a repository of UI components that can be accessed and assembled. It also contains thorough documentation to provide context, direction, and principles. In addition, it explains how and why these components should be assembled in a particular manner.

Some popular examples of Design Systems are; IBM’s Carbon, Spotify, GOV.UK and Shopify’s Polaris.

What are the Options for Design Systems?

Of course, you can build an entirely custom Design System. It maximizes the user experience and user interface (UX/UI) flexibility but costs more time as a tradeoff because you will need to set all the rules from the ground up.

You can also choose a strict or loose off-the-shelf system.

Strict System

A strict system (e.g., Material.io) comes with a comprehensive and detailed principle, styles, and best practices. It saves a lot of guesswork; it also allows for minimal customization.

Loose System

Material UI, which uses Facebook’s React framework and has a naming convention and the visual are very similar to Material.io, is a type of loose system. They allow more freedom for experimentation for both designers and developers.

How Can Enterprises Benefit from a Design System?

I have worked in product teams across several enterprises and large companies. Here are some of the pain points I often hear:

• Designers find quality assurance testing (QA) a tedious task
• Designs find pixel-pushing production a time-consuming task
• Developers find it problematic when they receive inconsistent mockups and have to guess the specifications
• Developers do not want to get requirements that are not technically feasible
• Product managers would much rather have the team build new features to enhance the experience than pay off design debt

By implementing a Design System, we can:

Reduce design and development debt.

Non-reusable components and inconsistent styles will often lead to an accumulation of efforts requiring significant rework. In other words, known as design and development debt. A Design System can help alleviate this problem across the organization by having a system of reusable assets and a single source of truth to set standards.

Facilitate a collaborative and communitive culture.

It was not until I started developing a global Design System for my client that I realize other organizational teams had built components that can be reused for our project.

There was absolutely no reason to have two types of dropdown menus for the same purpose, only slightly differing in user experience (UX) patterns. Several teams often work on a single product or several digital products under the company umbrella in large organizations. A Design System can serve as a bridge between groups; therefore, it helps build components with good reusability.

Reduce repetitive work and decrease time to market.

Having highly reusable components in a central repository, complemented with clearly documented rules and guidelines, can reduce the time spent on visual QAs and technical tasks. Designers and developers can use their time for more meaningful tasks. Combined with agile practice, it would increase the potential for a faster product release.

How to Build an Effective Design System Team Within an Organization?

An effective Design System evolves and iterates with the company over time. The common mistake is seeing a Design System as a one-off project instead of a product with ongoing iterations. Multiple teams within an organization will use the Design System. Naturally, the needs will continuously evolve to customers’ and stakeholders’ requirements. The system must be nurtured and maintained. To facilitate ongoing maintenance, a core team should be established to work collaboratively with stakeholders, just like it would for any product. The core members should include but not be limited to:

• Design (UX/UI/Visual)
• Engineering (front-end or full stack)
• Product Management

The team may also occasionally need content strategists or specialists.

In conclusion

Design Systems are not a nice-to-have; they are required in order to scale. The organization made of wood and glue will find itself deploying its resources towards duplicative efforts to renovate without a cohesive plan, resulting in lost time and increased cost. On the other hand, organizations built with LEGOs will see their resources deployed efficiently with a focus on a cohesive customer experience that also adapts and iterates at the speed this hyper-digital market demands.