You need a design system

In recent years, user expectations for UX have increased dramatically.

This is particularly evident in the case of Google Maps. When Google Maps first launched, its interface was relatively simple and had minimal user interactions.

Google Maps in 2012

Over time the interface has become much more complex, exposing a wide range of features and functionality.

Google Maps in 2022

This increase in complexity is representative of the broader trend of modern applications. More people have become accustomed to using high-quality, intuitive, and easy-to-use digital products. Users have come to expect similar levels of excellence from all of the applications and websites they use.

Simply put, a large amount of the complexity of modern applications has shifted to the frontend. This has put pressure on developers and designers to create user experiences that are not just functional, but enjoyable and engaging.

Companies need powerful tools to build UIs that match users' expectations. Enter the design system. At it's core, a design system is a showcase of the functionality and style of UI elements that are used by your organization.

How does this tackle the complexity problem described above? Complexity can be a vague concept, so let's get a good working definition first. Let's say that a complex object is one that can be in many possible states. Dall-E Complex Object When a UI component can be in many different states across an application or multiple applications, it can be difficult to understand and predict its behavior. This can make it difficult to make changes to the component without introducing bugs or breaking existing functionality. To avoid this, a developer needs to learn about the different states this component can be in.

Let's look at a UI component that allows users to select a specific date. Datepicker This date picker has many different states, such as a calendar view that allows users to select a specific date and a text input mode that allows manual entry. This date picker also exposes other functions, such as the ability to select a date range, or to specify minimum and maximum dates that can be selected. Datepicker States A design system would enable a developer to easily instantiate this complex component in each of the relevant states. She can make a change and verify it's effect across the component states in one place. This can increase the velocity of your whole team, not just the frontend developers. Properly architected, a design system can be continuously deployed, allowing engineering, design, and product to rapidly iterate through a creation, demo, and refinement cycle.

The next step up from a design system is to have it create and publish your UI components to a shared repository. This allows other developers to leverage the design work that has already been done, without having to worry about implementing UI components from scratch.

Component Libraries

The existence of popular UI libraries like MUI and Bootstrap highlights the fact that many developers don't want to spend a lot of time thinking about UI. They want to focus on other aspects of the application, and be able to quickly and easily incorporate high-quality UI components without having to worry about the details.

By publishing your UI components to a shared repository, you can unblock these developers and allow them to easily use the design work that has already been done. This can save them time and effort, and ultimately help your team move faster and be more productive.