Редизайн сервиса обслуживания клиентов «Россельхозбанка»
Ускорил процессы и пользовательский путь на 26%, дизайн-система и шаблоны для процессов помогли выводить функционал/фичи среднем на 2 раза быстрее в промышленную эксплуатацию.
Период
Команда
за весь период
Роль
Пользователи
Технологии
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
- Устаревший монолитный фронтенд.
- Жесткие дедлайны.
- В команде разработки был я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
- Продал решение по реализации своей библиотеки компонентов на основе open source дизайн-системы.
- Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
- Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
- Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
- Разработать единую дизайн-систему.
- Запустить все новые продукты на ней.
- Провести редизайн текущих продуктов.
- Набрать и обучить команду дизайнеров.
Что сделано:
- Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
- Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
- 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
- Figma + Storybook — синхронизация дизайна и кода («design = code»).
Эффект:
- На 38% меньше ошибок при тестировании новых функций.
- Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
- Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
- Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
- Обучение команды — ежедневные ревью, пятничные воркшопы.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны. Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Итоги
- Гибкий и удобный продукт — сократилось время обучения сотрудников.
- Единая дизайн-система — используется в нескольких внутренних сервисах банка.
- Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем от 500 тыс. рублей на фичу.