💠 Fractal Design System

Контекст
Фрагментированные UI-компоненты разных команд замедляли релизы и мешали росту продукта.
Задача — создать единую дизайн-систему, которая обеспечит единый визуальный язык и сократит Time-to-Market для всех digital-каналов банка (веб, мобайл, внутренние CRM)

Проблема

• Несогласованность между проектами: разные стили, сетки, отступы, принципы
  
• Высокие затраты времени на ручную сборку интерфейсов
  
• Дублирование компонентов, неконсистентные состояния, ручная верстка
  
• Отсутствие централизованных токенов и документированных UX-паттернов

Решение
Создана Fractal Design System — модульная экосистема из 12 библиотек.
Основные модули:

• 🧩 Core components — базовые элементы и контролы
  
• 📦 Platform components — layout, header, tabbar, containers
  
• 🧮 Service components — форм-блоки и бизнес-логика
  
• 🎨 Light / Dark Colors
  
• 🖼 Icons & Illustrations / Image Library — визуальный язык сервисов
  
• 🧭 UX-Patterns — принципы взаимодействия, описаны в подробных спецификациях
  
• 🔤 Typography & Tokens
  

Среднее время сборки флоу сократилось с 6 часов до 4 часов. Доля релизов с визуальными расхождениями уменьшилась.

Формирование системного дизайна сократило Time-to-Market на 25%, повысило консистентность и стало фундаментом для продуктовых экспериментов (например, кейс с A/B-тестом тарифов)

Влияние на продукт
Fractal используется во всех сценариях Газпромбанк Бизнес Онлайн: от открытия счёта до оформления платёжного поручения.
Благодаря компонентам Fractal удалось быстро запускать эксперименты, такие как оптимизация тарифного шага (см. связанный кейс).

Моя роль

• Сборка архитектуры DS 
  
• Разработка принципов, токенов, сеток и типографики
  
• Настройкаа процесса публикации библиотек и версионирования
  
• Взаимодействие с разработчиками и проверка работы компонентов в StoryBook
  
• Описание спецификаций взаимодействия и UX-паттернов