Scalable Design System for Industrial Digital Products

IndustrialTech

UX/UI

Design System

For whom

Gazprom Neft and Zyfra are key players in industrial digitalization. Their digital industrial platform brings together dozens of products for production automation, process control, and real-time decision-making.

Problem

Before the project, the companies faced several systemic problems:
‍

No unified visual language across products
Difficult module integration inside the digital ecosystem
Excessive budgets: +100-120% for design and development
High support costs:
+30-40% for improvements and updates
Mismatch with HMI and GOST ergonomics and accessibility standards

Goal and Tasks

Create a scalable, unified industrial design system tailored to industrial solutions and implement it across the product ecosystem
‍

Analyze UX/UI solutions across all key digital products
Align visuals and functionality with GOST and HMI standards
Create a unified component library in design and code
Reduce the cost and time of developing new interfaces
Support scalability and quality in a growing ecosystem

Approach

Implementation stages:
‍

Strategy and principles
‍
Defined the goals, philosophy, and principles of the future system.

Research and audit
‍
1. Workshops with designers, developers, and product teams
‍
2. Reference gathering and analysis of existing solutions
‍
3. Study of HMI, GOST, and ISO standards for visualization and UX

Planning
‍
1. Creating a list of components and UX patterns
‍
2. Prioritization by business importance
‍
3. Roadmap alignment with leadership

Team formation
‍
A dedicated product team was formed, bringing together designers, frontend developers, architects, and analysts.

Design and Development

Key steps:
‍

A unified frontend stack and data visualization approach were selected and approved
Grid systems, spacing, typography, and color palette were aligned
Atomic components and basic controls were developed

Next by priority:
‍

Frequently used UX patterns
Calendar elements, sorting, and filters
Various data visualization modules

Technical implementation:
‍

A sandbox and component showcase were implemented
Documentation and guidelines were created
Existing products were tested against the new system in Figma

After the MVP was created, company leadership decided to:
‍

Complete the system to its target state in two additional phases
Gradually roll it out to all new digital products
Partially integrate it into existing solutions while preserving backward compatibility

The process required deep synchronization across IT teams and even affected role restructuring in several departments.

Results

Budget savings:

65%

Savings on
UX/UI design

35%

Savings on
frontend development

Doubled speed of creating MVPs and other products on PRIZM

Technical impact:

💸

Product support became cheaper

by ~30-40%

💎

Significantly improved

solution scalability

🖥

Eliminated fragmentation
(the "solution zoo")

in design and code

🚀 Strategic impact:

⏱️

Increased the speed of digital product delivery

and digital transformation

🤝

Ensured visual and technical consistency across

80+ digital solutions

💼

Increased trust in products inside the corporation

and improved user experience quality

Highlights

The design system is open under the MIT license
Presented at key industrial and developer conferences in Russia
Became a design benchmark for corporate digital solutions

Conclusion

We did more than unite design and code — we created a foundational system for large-scale industrial digitalization.

Prizm became a key asset that accelerates development, simplifies support, and sets standards for years ahead.