ФРКК — канал, через который 14 000 сотрудников сети по всей России работают с юр. лицами: продают продукты, обслуживают клиентов, ведут бэк-офис, например, работают с лидами.
ВТБ. Как мы сделали лучшую омниканальную платформу для СМБ, которая упростила работу сотрудников и помогла увеличить продажи на треть
Задача
Разработать инструмент для сотрудников сети продаж СМБ для оперативного управления продажами и обслуживания юр.лиц в новой омниканальной архитектуре в рамках цифровой трансформации.
Моя роль:
- Сформировать вижн будущей платформы в омниканальности. Приземлить до дизайн-стратегии.
- Построить команду и оргструктуру дизайнеров канала и сформировать среду для роста команды.
- Залидировать проектирование канала и интеграцию продуктов СМБ.
Было до 2020 г. Пример типичного интерфейса для обслуживания юр.лиц.
Как была построена работа с дизайном
Найм и развитие
- Дизайнер — рисовальщик макетов.
- Не выстроен найм и онбординг дизайнеров.
- Не было понятной зоны развития дизайнера в командах.
Дизайн-система
- Вместо единой дизайн-системы набор разных UI-китов на разном стеке: React, Angular.
- Не было гайдлайнов для проектирования интерфейсов.
- Не было системного ревью интерфейсов и контроля вывода в прод.
Discovery
- Исследование – продажа решения, а не фиксация проблематики.
- Прототипы не трестировались на пользователях.
- Не было дизайн-долга, поэтому проблемы копились и не исправлялись системно.
Бизнес-стратегия
Дизайн-стратегия
Годовое планирование
Демо стрима
Дизайн-стратегия
Годовое планирование
Демо стрима
Дизайн-стратегия
Исследования
База исследований
Запуск исследований
Методы исследований
Запуск исследований
Методы исследований
Дизайн-система
Для дизайнеров
Для разработчиков
Для разработчиков
Гайдлайны
Гайд для команды канала
Гайд для встраивания микросервисов
Единое пространство в Figma
Гайд для встраивания микросервисов
Единое пространство в Figma
Процессы
С чего начать проектирование
Дизайн-ревью
Развитие дизайнеров
Найм
Дизайн-ревью
Развитие дизайнеров
Найм
Дизайн-стратегия: создать бесшовный клиентский опыт, чтобы пользователи думали, что работают в одном инструменте, а на самом деле это 80+ приложений
Оргструктура для реализации стратегии в СМБ
Исследования: проанализировали
больше 100 пользовательских сценариев
и выделили ключевые проблемы для
основных ролевых групп
Когда клиент присылает документы
в формате JPG,
Хочу быстро сразу загрузить его
Чтобы не делать дополнительных действий
и не тратить время на ручное пересохранение.
Как сейчас: Нужно скачивать JPG, сканировать или использовать сторонние инструменты для пересохранения в PDF, что занимает время и отвлекает от основной задачи.
в формате JPG,
Хочу быстро сразу загрузить его
Чтобы не делать дополнительных действий
и не тратить время на ручное пересохранение.
Как сейчас: Нужно скачивать JPG, сканировать или использовать сторонние инструменты для пересохранения в PDF, что занимает время и отвлекает от основной задачи.
Когда я нахожусь внутри задачи по клиенту,
Хочу сразу перейти в нужное приложение уже с выбранным ЮЛ и представителем,
Чтобы не тратить время на повторный поиск и выбор клиента.
Как сейчас: Система не передаёт контекст, и приходится повторно выбирать клиента вручную — это отнимает 1−2 минуты на каждое действие.
Хочу сразу перейти в нужное приложение уже с выбранным ЮЛ и представителем,
Чтобы не тратить время на повторный поиск и выбор клиента.
Как сейчас: Система не передаёт контекст, и приходится повторно выбирать клиента вручную — это отнимает 1−2 минуты на каждое действие.
Собрали единую схему работы сотрудников.
Провели аудит всех интерфейсов и зафиксировали пользовательские пути и интерфейсные ГЭПы в единой таблице.
Это позволило:
- Быстро согласовать с ТОП-менеджментом приоритеты и фронт работ в рамках обновлённой стратегии.
- Создать наглядный инструмент для синхронизации команд и системного управления дизайн-долгом.
- Приоритезировать бэклоги команд и направления discovery.
Облегчили UI, закрыли ГЭПы и улучшили метрики,
внедрили новую дизайн-систему. Об этом далее...
внедрили новую дизайн-систему. Об этом далее...
В рамках развития дизайн-стратегии
провели первый масштабный редизайн
- Упростили навигацию
- Упростили выбор периодов
- Сделали кнопки понятнее
Управление продуктовым портфелем
- Перевели все блоки на модульную структуру
- Сделали тексты понятнее
- Сделали отображение продуктов клиента удобнее и вывели быструю кнопку для оформления каждого продукта.
Карточка юридическлго лица
Результаты редизайна: мониторинг показателя удовлетворенности 2022-2023
Метрика удволетворенности – целевая метрика дизайна
Дизайн-система: сначала сильно ускорила разработку новых сервисов, но потом
не успевала паттернизировать работу
с организмами для разных каналов
Все команды подключались к общей дизайн-системе, но из-за большого числа частных кейсов команда ОДС не успевала — или не бралась — за нужные компоненты.
В результате продуктовые команды начали создавать кастомные решения. Это привело к дублированию — появилась вторая библиотека, которую сложно было поддерживать.
При обновлениях дизайн-системы кастомные компоненты не обновлялись, и находить их вручную было почти невозможно
В результате продуктовые команды начали создавать кастомные решения. Это привело к дублированию — появилась вторая библиотека, которую сложно было поддерживать.
При обновлениях дизайн-системы кастомные компоненты не обновлялись, и находить их вручную было почти невозможно
Пример компонента таблицы из дизайн-системы.
При проектировании старались учесть все сценарии разных каналов и микросервисов. В итоге компонент все равно качтомизировали под себя, так как он не удволеторял сценарию.
При проектировании старались учесть все сценарии разных каналов и микросервисов. В итоге компонент все равно качтомизировали под себя, так как он не удволеторял сценарию.
У каждого канала своя ветка от общей дизайн-системы. Оптимизация процесса интеграции и новая ДС сократили Time to Market в 2,5 раза.
При этом мы развивали кросс-взаимодействие с каналами. Например, сделали общую форму заполнения паспортных данных во всех UI-китах.
При этом мы развивали кросс-взаимодействие с каналами. Например, сделали общую форму заполнения паспортных данных во всех UI-китах.
Гайдлайны: регулярно проводили чек‑апы на понятность гайдлайнов: обновляли формулировки, добавляли примеры и конкретику. Это помогало командам быстрее разбираться в процессах без лишних вопросов
Все в кучу: разработка, деплой и часть требований к дизайну. Доступ только из внутреннего контура и очень сложно разобраться что к чему, особенно новичкам.
Выстроили поэтапный онбординг дизайнеров: краткие слайды с ответами на базовые вопросы, подробные гайдлайны и сценарии для проектирования. Все доступно прямо из фигмы и помогает не только дизайнерам, но и продактам, бизнес-аналитикам и разработчикам.
Как встроили дизайн‑ревью в процессы команды
Вместо точечного контроля макетов мы выстроили сквозной процесс проектирования и внедрения интерфейсов. Всё начиналось с заявки на интеграцию, где команды указывали для каких ролей создаётся сервис, какую задачу он решает и его ключевой функционал.
Следующий этап — согласование CJM. Только после его утверждения команда приступала к проектированию макетов. Это помогло сфокусироваться на решении задачи, а не просто на "отдаче макетов".
В 2022 году мы упростили процесс, объединив заявки, артефакты и согласования в единый поток. Это синхронизировало девопсов, саппорт, лида дизайна и продукт-оунера интеграций — в результате мы повысили пропускную способность релизов и сократили time to market.
Дополнительно мы ввели понятие дизайн-долга: некритичные баги и улучшения фиксировались в акте приёмки с указанием даты или спринта исправления. Это дало системный способ улучшать интерфейсы без торможения запуска.
Следующий этап — согласование CJM. Только после его утверждения команда приступала к проектированию макетов. Это помогло сфокусироваться на решении задачи, а не просто на "отдаче макетов".
В 2022 году мы упростили процесс, объединив заявки, артефакты и согласования в единый поток. Это синхронизировало девопсов, саппорт, лида дизайна и продукт-оунера интеграций — в результате мы повысили пропускную способность релизов и сократили time to market.
Дополнительно мы ввели понятие дизайн-долга: некритичные баги и улучшения фиксировались в акте приёмки с указанием даты или спринта исправления. Это дало системный способ улучшать интерфейсы без торможения запуска.
Как развивали дизайнеров
Для усиления продуктового подхода мы запустили внутреннюю школу дизайна — она стала онбордингом для новых сотрудников и акселератором для прокачки ключевых навыков. Это был первый шаг в развитии продуктовой культуры.
В 2022 году фокус сместился на рост мидл-дизайнеров. Цифровая трансформация банка требовала уверенных софт-скиллов: умения презентовать, отстаивать решения и брать инициативу.
Мы внедрили карту компетенций, добавив в неё параметр Big Thing — участие в амбициозных эпиках, включённых в квартальное и годовое планирование. Big Thing стал важным индикатором роста и развития soft skills: лидерства, коммуникации, самостоятельности.
Ключевой метрикой стал рост публичных активностей дизайнеров — выступлений на демо и защитах перед вице-президентами. Эти показатели выросли в несколько раз.
В 2022 году фокус сместился на рост мидл-дизайнеров. Цифровая трансформация банка требовала уверенных софт-скиллов: умения презентовать, отстаивать решения и брать инициативу.
Мы внедрили карту компетенций, добавив в неё параметр Big Thing — участие в амбициозных эпиках, включённых в квартальное и годовое планирование. Big Thing стал важным индикатором роста и развития soft skills: лидерства, коммуникации, самостоятельности.
Ключевой метрикой стал рост публичных активностей дизайнеров — выступлений на демо и защитах перед вице-президентами. Эти показатели выросли в несколько раз.
