TD;DR

As I wrote in this article, a design system is a toolbox for your development team. Inside that toolbox, we will have many interface components to be used and reused across the organization's interfaces.

These components are built(design and code) as abstract prototypes with robustness and flexibility in mind so they can work on multiple scenarios.

The Bad news of this approach is that these components are harder to build, requiring more time to design, develop and test.

The good news is that once a component is finished, chances are they won't change anytime soon and will be used and reused in multiple instances and applications without much regard for how it works internally.

Full Explanation

A design system helps teams work together more efficiently by providing tools for standardizing the way they create products. It reduces the time spent on communication between stakeholders, designers and developers. It also allows teams to focus on solving problems rather than reinventing the wheel every time they start a new project.

A quick example, let's assume an organization has a solid component for a button. Besides choosing the label and action for the button, you could also choose which element will be used an <button> or <a>, you could also choose a function to fire or an url when it is clicked. You could choose the brand's colors and if you'd like to have an icon (before or after the text), and obviously, choose the icon itself. All this is controlled via a mini API for the button.

From this point, every single button your developers need to add a given interface will use this component. It means they will never need to work on a button ever again. Once you provide them with a Card component that works on a wide variety of scenarios, they will streamline their work bit more, not worrying about new cards, and then a few form controls, a header, a footer, a complete contact form. Got the idea?

A design system will make interface production exponentially easier to develop. For each component added to the design system, fewer components will need to be custom developed for each application. It has the potential to make each subsequent interface increasingly faster to build, freeing up the developer workforce to do other things.

The most obvious upside of this process is delivering more features faster and burning through your backlog quicker.

Another often overlooked upside is to reduce the cost of opportunity for product teams. It becomes much easier and faster for a small team to put together prototypes and test ideas in the wild. Even though this advantage is tough to measure, there is a real benefit in quickly testing ideas and assumptions for new products and features.

Most people highlight the Design System benefits for large corporations, which indeed are super clear. Maintaining multiple websites and apps, and having components working across these products will save hundreds of work-hours for the teams.

It is important to highlight that it would work really well for small organizations too, allowing them to test ideas significantly faster and with fewer resources.

Here are some of the advantages of using a design system:

Faster development - because you don’t have to re-invent the wheel each time you start a new project, you can save time by leveraging what has already been built

Cheaper iterations - because your team can reuse patterns and components that have already been tested in production environments, you will be able to iterate faster and more cheaply

Shorter backlogs - because your team can pull from an existing library of proven solutions, it will take less time for each team member to solve interface issues.

Faster Onboarding - because with a standardized component library and a comprehensive documentation, a new hire will be able to be effective earlier.

Conclusion

A design system is an investment. It pays out in the medium to long terms. If you expect your online presence to grow or branch out into multiple websites, a design system is a sensible investment.