В 2022 году
РоссельхозБанк
столкнулся с растущей потребностью в быстром запуске новых внутренних продуктов. Сходу получалось неочень:
Сотрудникам приходилось иметь дело с тем, что каждый продукт в системе выглядел и работал по-своему. 
А процесс создания новых
интерфейсов был медленным,
несогласованным между
разными подразделениями.
Подготовка
Вместо того чтобы потратить уйму часов обсуждений стиля, а потом на разработку базовых компонентов ещё полгода, мы пошли другим путём.
На старте с командой фронтенд-разработки проанализировали существующие решения и выбрали IBM Carbon Design System как основу.
Это нам позволило:
не изобретать велосипед, использовать проверенные паттерны
быстро начать внедрение, параллельно работая над кастомизацией
Внедрение
Пилотным проектом стала «Ипотека». Самый сложный и долгоиграющий процесс.
Использовали только готовые компоненты IBM Carbon
Параллельно адаптировали и дополняли дизайн-систему под специфику банка
Этап 1
→ Фундамент
Спроектировали библиотеку базовых компонентов в Фигме. Сюда также влетела система токенов для цветов, отступов и типографики. 
Определились, как мы видим Сторибук и что для этого нужно. Задокументировали и выкатили текущие компоненты.
Этап 2
→ Масштабирование
Посмотрели на результаты в прошлом. Произвели работу над ошибками и выделили то, в чём у нас был успех:
Запустили первые проекты на новой
системе
Сократили время разработки типовых
форм и функциональных блоков до 1 спринта
Начали подключать
команды из разных подразделений
Задумались и реализовали первые шаблоны — это были типовые банковские операции, а также простые страницы под справочники.
Ключевыми решениями стали:
Атомарный подход к дизайну компонентов
Создание инструкций и спецификаций для команд
Интеграция с существующими процессами разработки
Этап 3
→ Оптимизация ресурсов
В течении месяца путём созвонов тестили решение на небольшой группе
аналитиков
— дизайнер, в части простых форм, совсем не нужен.
За два года удалось внедрить
дизайн-систему в 4 ключевых подразделений банка
Hill mobile version
За два года удалось внедрить дизайн-систему в 4 ключевых подразделений банка
Сложности и их решение
Никто не хотел менять привычные
процессы работы
Действовали через демонстрацию конкретных результатов: показывали, как другие команды ускорили разработку в несколько раз, проводили воркшопы, где разработчики могли на практике оценить преимущества новой системы.
Некоторые продукты использовали
устаревшие технологии и библиотеки 
Решили эту проблему, создав набор адаптеров, которые позволили новым компонентам корректно работать в старых проектах.
Было множество рабочих интерфейсов,
отдельных форм и целых процессов, которые
нельзя было единовременно переписать
Разработали поэтапный план миграции, позволивший постепенно переводить продукты на новую систему без риска нарушить текущую работу.
Бизнес-ценность
Внедрение дизайн-системы принесло ощутимые результаты в нескольких направлениях.
Каждый новый проект
экономит банку от 500 000 Р
за счёт сокращения времени разработки с 5-6
до 1-2 спринтов.
Стандартизация процесса
Все решения задокументированы в дизайн-системе. 
Компоненты протестированны — меньше ошибок в интерфейсах
80% всех используемых компонентов в новых проектах берутся из дизайн-системы без изменений
Масштабируемость решений
Мы не начинаем каждый процесс с нуля – у нас есть готовая библиотека компонентов, типовых
форм и отдельных страниц.
Сейчас с системой одновременно работает около 6 000 сотрудников банка, а в пиковые нагрузки это число уже переваливает за 10 тысяч.
Этот кейс незакончен, работа по нему ведётся ежедневно
Работаем над:
Презентуем
Экспериментируем
Работаем над:
Расширением библиотеки компонентов
Интеграцией с другими системами банка
Развитием инструментов автоматизации
Обучением новых команд
а что ещё?
обновления за Март:
— Продал ресурс своей команды дизайнеров в смежный Блок.
обновления за Январь—Февраль:
— Презентовал дизайн-систему нескольким департаментам Банка;
— Внедрил, где мог, протоколирование встреч: теперь записывать всё вручную необязательно;
— Совместно с лидом фронт-разработки увеличили скорость загрузки в 2 раза: по компонентам оптимизировали рендеры и внедрили ленивую загрузку, сократили количество сетевых запросов.