Редизайн сервиса обслуживания клиентов «Россельхозбанка»
Ускорил процессы и пользовательский путь на 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 спринта и экономим около [NDA] тыс. рублей на фичу.