approach / Strategy

Design System

The design system is the key tool when developing a visual part of the product. It makes sense to create design system from day 1 when working on a large-scale application with several teams involved. Having a design system makes the workflow more consistent. At the same time, it comes as a single source of truth for all team members, which ensures alignment between Product Managers, Designers, and Developers.

Why use the design system

Having a design system allows teams to do the following:

  • Deliver a unified cross-platform (Web, Android, iOS) experience that improves familiarity and clear navigation that lets users get to where they need faster. It helps teams to keep all functions and features on all screens relative to the major app as well as achieve the overall product design consistency.
  • Create a design-oriented workflow featuring a system of ready-to-use components that can be reused at different stages of the development process.
  • Establish the application identity and extend it across different devices.

What if there is no design system

When teams do not have a clear design system, their work is more tactically oriented. It means that the strategic direction of the product development is missing.

For instance, when developing a specific screen layout, team members start thinking locally and ignoring the existing application and what is already available in the codebase. As a result, we have a less scalable approach to frontend and UI development.

It inevitably leads to increased technical debt and time wasted on developing components that cannot be reused in the long run. As a result, teams see the degradation of the code quality, which makes it harder to maintain. Having a design system, allows teams to establish a scalable approach with a set of reusable components.

How to develop a design system

There are several ways to develop the design system. The key steps involve:

  1. Design leads with engineering leads discuss the visual language and standard with product managers.
  2. Once they have agreed on the solution, designers create a set of components in Figma.
  3. The Figma layout serves as a single south of truth on all stages of the front-end development.
  4. A product manager introduces user stories to the front-end team as a crucial part of the feature development process.
  5. Based on those stories, developers create a one-time function (like multi-select) that can be later reused on other screens and expanded across different platforms (desktop or mobile).

When to skip design system

Do not start with design system when working on smaller initiatives and pre-product/market fit. As at that stage you'll have way too many back and forth.

However, it is vital in the case of full-scale development with several teams involved as it helps to keep designers, developers, and product managers aligned having a single source of truth.