Design System: How we reduced the Time-to-Market and improved the product UX

Interaction design, Design leadership, Colaboration

Meta is a mental-health service. It is a marketplace where clients find psytherapists. Smart algorithm allows our service to offer specialists who will best cope with a request. The client then selects an appropriate specialist and arranges a meeting.

I joined Meta in the fall of 2020. We were at the seed stage — testing product ideas, business model, audience segments and product scenarios.

In the summer of 2021, we received the first investment and switched to scaling the main product — matchings of psychotherapists and clients.

At the stage of testing product ideas, we spent a lot of time developing a lot of zero-code solutions. There were several outsourcing development teams who worked with the product. We held the frontline on two libraries. As a consequence, styles, components, and controls were not standardized in either design or code.

There were no standards in the use of font typefaces and their styles, button sizes and other elements of shapes, indents and colors.

4 typefaces and 4 black options were used in different parts of the service

We decided to implement a design system in order to create a better product faster. I initiated the implementation, and I led the development from the design team side. The business objectives we have set for the design system are:

• to reduce time for product design/features;
• to simplify the transfer of layouts to development;
• to reduce testing time;
• to standardise UI;
• to standardise the logic of the interface;
• to reduce training time for new designers and developers;
• to optimize skill allocation: focus more on UX and product creation rather than UI;
• to reduce design debt and fix UX bugs.

Together with the front-end engineer, we conducted an internal audit of current decisions: we compiled a set of all elements, indents, colors, sizes and typography. Then we have brought it to a unified system.

We moved step-by-step. The design team described the rules of behavior and interaction of elements. The development team gradually introduced elements into the product.

The common header on all pages is the first component we have implemented in the product. It helped us check the implementation, identify errors and improve the process.

We have received a single resource for designers and developers — a page with documentation of a set of components in the code.

We have reduced Time-to-Market of new features. According to our front-end engineer, we have ran the first feature after launching the design system 30% faster than if we had run it without.

We have improved product UX: reduced design debt and fixed UX bugs.

We store the components of the design system in the storybook

A design system is not a set of sketched elements in a figure, it is a set of components in code.

The design system is not equal to the UI-kit. First of all, this is a set of rules for the use and interaction of elements, rules and logic implemented in the code.

You need to start interacting with the developer at the earliest stage. Developers understand the benefits of using the design system more than other team members.