Building the Design System at Severstal. Part 1: Competitor Analysis and the Path to the Ideal Solution

Introduction

Hello everyone! My name is Ivan, and I lead the "Design and Client Service" group at Severstal Infocom. For almost a year now, we've been developing our own multi-brand design system. Our goal is to create a platform that provides Severstal with the necessary flexibility and independence from third-party vendors in the development of digital products, which is especially relevant given the current trend towards import substitution in Russia.

In recent years, design systems have become an integral part of creating digital products both in Western markets and in Russia. They allow for the unification of design and improve interaction between developers, designers, and other participants in the process.

It's a big story, and I'll tell it in three parts.

• In the first part (this one), we'll share how we came to develop our own design system, discuss the prerequisites and reasons, look at the competitor solutions that inspired us, and talk about our optimal design system configuration and the results we're aiming for.
• In the second part, we'll look under the hood of our design system and show the solutions we've arrived at. We'll examine the component base and discuss the capabilities implemented through tokens.
• In the third part, we'll share the results of implementing the design system, estimate the approximate effect, and show how projects built on its basis look.

Prerequisites

We faced a problem: a large number of products with different UI kit solutions. Even systems that were adjacent to each other on a dispatcher's screen at the plant differed, creating a sense of untidiness and inconsistency. Each project had its own design approaches: the color palette varied significantly, the dark theme was implemented differently, and each, to some extent, deviated from branding standards and the unity of style and user experience.

The vast number of projects developing decentrally and following their own rules negatively affected the perception of our systems, creating an inconsistent overall impression, even though each system performed its tasks for users.

In addition to design differences, the development stack also varied, increasing desynchronization: some projects were on Vue, others on Angular, and others on React.

This state of affairs couldn't continue indefinitely; the presence of this problem increased future costs and technical debt for all our projects.

Goals of Creating the Design System

We started by defining goals and forming a range of problems that we could solve using a design system. Our main task was to organize the development of a technically advanced design system in a short time and within a reasonable budget, which would allow us to:

• Reduce development time.
• Adopt a unified frontend stack - React.
• Create a visual standard for all digital products in accordance with the company's brand book.
• Optimize the designers' workflow for quick work with components, especially with adaptives.
• Develop a visual standard for the dark theme (which was not initially provided in the brand book).
• Establish an optimal pipeline of interaction between developers and designers and create conditions under which the designers' work could autonomously influence the design system with minimal effort from development.
• Create a flexible and universal system that could adapt to other corporate styles, such as those of our partners or subsidiaries.

Starting Development

After defending the design system project before management, we formed a team to combat the forces of chaos:

• Project Manager
• Lead Designer
• Lead Frontend Developer
• 2 Designers
• 2 Frontend Developers

Market and Competitor Analysis

Armed with our objectives, we set out to analyze current market offerings. Considering the complexity and scale of the task, we identified Ant Design, Atlassian, and Carbon Design System as our main competitors, while also keeping an eye on colleagues in the domestic market.

In the Western Market:

1. Ant Design (Alibaba) - is an extensive design system from Alibaba, which we've worked with multiple times. It provides a rich set of ready-made components and tools for creating web applications. Its strong point is high modularity and the ability for deep customization, allowing it to be adapted to a wide range of projects. However, the abundance of features can complicate initial learning, and sometimes time is spent configuring components for specific requirements.
2. Atlassian Design System - underpins products like Jira and Confluence. It aims to enhance productivity through interface consistency and offers well-thought-out documentation with real-world examples. Its focus on teamwork and user interaction is a plus. However, the system is heavily integrated with Atlassian's own products, which can create challenges when adapting it for third-party projects.
3. Carbon Design System (IBM) - Carbon by IBM is one of the most detailed and comprehensive design systems, covering both visual elements and interaction patterns. Its advantages include strict standards, extensive documentation, and attention to accessibility. This makes it a reliable choice for large corporate projects. But due to its complexity, implementing Carbon can require significant resources, which isn't always justified for smaller or faster projects.
4. Salesforce Lightning Design System - This system ensures interface uniformity within the Salesforce ecosystem, offering a set of components for creating scalable and accessible applications. Integration with Salesforce products is a big plus for developers within this ecosystem. However, for projects outside of Salesforce, its applicability may be limited, and components may not fully meet the requirements of other business environments.

In the Russian Market:

1. NLMK - The NLMK design system was created to unify components and enhance the efficiency of digital product development within the company. It's well-adapted to the specific business processes of the metallurgical industry. However, its narrow focus and limited availability make it less suitable for use outside the NLMK context.
2. Rosatom - Rosatom's system focuses on reliability and interface consistency, considering the industry's high safety requirements. This ensures stability and predictability in the user experience. But such strict standards might be excessive for other sectors where more flexibility is needed.
3. Rostelecom - Rostelecom's design system aims to improve user experience by unifying the interfaces of the company's products. It includes modern UI/UX solutions and takes into account the organization's scale. However, a lack of public documentation can make it difficult for external developers to study and apply.
4. Consta - Gazprom Neft's system is designed to create efficient interfaces in the energy sector. It considers corporate style and the industry's specific requirements. Limited openness and specialization make it less suitable for external projects.
5. Kontur - Kontur's design system aims to increase development efficiency and improve user experience. Its advantages include good documentation and practical orientation. However, there may be excessive specialization for the company's own services, which could require adjustments for other projects.
6. Mail.ru Group - The Mail.ru Group design system ensures interface unification within the company's ecosystem. Its strengths are scalability and adaptability to different products. But limited public information and documentation can create challenges when trying to study and use it outside the company.

Conclusions from Competitor Analysis

• Tokens and Synchronization with Development. We noticed that many systems don't pay enough attention to effective linkage between design and code. We want to implement design tokens with the ability to synchronize with development. With the advent of Local Variables in Figma, this has become more feasible—now we can store key values like colors, fonts, spacing sizes, and principles of their scaling in adaptives in one place and automatically update them both in design and in code.
• Atomic Design by Brad Frost. The ideas of atomic design have already inspired many design systems, and ours is no exception. Components are built from simple to complex—from atoms to molecules and organisms. This approach ensures consistency and predictability, as well as simplifies scaling and system maintenance in the long term.
• Flexibility and Variability of Components. We understand how important it is to have components that can adapt to different usage scenarios. Our goal is to create flexible and customizable components that can be easily modified without disrupting the overall structure and style.
• Human-Centered Design Approach. We want our design system to be not just a set of rules and components but a living tool that makes life easier for designers and developers. This means accessible and understandable documentation, real-world examples, and open dialogue within the team for continuous system improvement.

Having studied existing design systems, we realized that to create an effective system of our own, it's important for us to:

• Integrate with Modern Tools. Use the capabilities provided by Figma and other modern tools to simplify the development and updating process of the system.
• Balance Standardization and Flexibility. Standards are important for consistency, but excessive rigidity can hinder innovation. Our system should maintain a unified style while allowing for creative approaches.
• Focus on Team Needs. Consider the real needs and workflows of our team so that the system becomes an organic part of daily work rather than an additional burden.

Thank you for reading to the end! In the next parts, we'll delve into the implementation of our design system, showcase the component base, and share the results of its implementation. See you soon!