В 2022 году
РоссельхозБанк
тратил по 5-6 спринтов только на реализацию фронт-части продукта.

Сегодня мы выпускаем то же самое за 1-2 спринта и экономим около 500К рублей на фичу!



Поехали! У нас было два джуна, разраб, 99% продуктового легаси, пол-подрядчика и 2 квартала.

Ну, красота же!

OLD EFR

Сходу выявили:
Сотрудникам приходилось иметь дело с тем, что каждый продукт в системе выглядел и работал по-своему.
А процесс создания новых
интерфейсов был медленным,
несогласованным между
разными подразделениями.

Сформировали проблемы:
Начали подготовку
Вместо того чтобы потратить уйму часов обсуждений стиля, а потом на разработку базовых компонентов ещё полгода, мы пошли другим путём.
На старте с командой фронтенд-разработки проанализировали существующие решения и выбрали 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 раза: по компонентам оптимизировали рендеры и внедрили ленивую загрузку, сократили количество сетевых запросов.