Конструктор иллюстраций ВТБ Онлайн: как создавать визуальные истории с помощью ассоциативных конструкций

Главное о кейсе

Конструктор иллюстраций ВТБ Онлайн — внутренний инструмент, который объединяет банк графических элементов, иконок и 3D-объектов в единую систему.

С его помощью любой сотрудник без специальных навыков рисования может создавать готовые иллюстрации всего за несколько минут, как из «визуальных кубиков LEGO», не нарушая стилистику бренда.

Такой подход позволяет:
• обеспечить быструю сборку иллюстраций в едином стиле;
• сохранить целостность визуального языка ВТБ Онлайн и удобство его обновлений;
• повысить эффективность работы команд и скорость выхода новых коммуникаций.

Результаты

В результате нашей работы мы достигли значительных успехов:

- Создано более 3000 уникальных иллюстраций за год.
- Используется 100+ команд банка ежедневно.
- Ускорение процесса создания иллюстраций — на 87%.
- Рост визуального контента в CRM-коммуникациях — в 2 раза.
- Уровень удовлетворенности внутренних команд — 95% опрошенных считают инструмент полезным.

Кроме того, мы обновили часть библиотек команды CRM, что позволило повысить эффективность и качество обслуживания клиентов. Все эти шаги способствовали созданию более привлекательного и современного интерфейса, который отвечает потребностям наших клиентов.

Как проект изменил жизнь пользователей

Влияние на пользователей

1. Новое восприятие приложения.
Внедрение новых иллюстраций в интерфейс приложения ВТБ стало важным шагом в обновлении пользовательского опыта. Команда дизайнеров и разработчиков тщательно проанализировала текущие элементы интерфейса и определила, какие визуальные акценты могут улучшить восприятие приложения.

Новые иллюстрации были интегрированы в ключевые разделы, такие как главная страница, меню и разделы с услугами, что позволило сделать интерфейс более привлекательным и интуитивно понятным. При этом особое внимание уделялось гармонии цветов и стиля, чтобы новые элементы органично вписывались в существующий дизайн.

В результате пользователи получили более современный и дружелюбный интерфейс, который способствует лучшему взаимодействию с приложением.

2. Повышение лояльности и вовлеченности.
Иллюстрации, созданные в конструкторе, нашли широкое применение в ВТБ Онлайн, включая CRM-рассылки, спецпроекты и продуктовые иллюстрации.

Эти визуальные элементы значительно улучшили восприятие информации и повысили привлекательность предложений для клиентов. Сообщения стали более запоминающимися и информативными, что способствовало лучшему вовлечению аудитории.

3. Укрепление бренда в глазах клиентов.
Конструктор иллюстраций стал частью ДНК цифрового продукта ВТБ Онлайн. Он помогает сохранять визуальную консистентность и узнаваемость бренда в любом контексте:
от баннеров в приложении до e-mail-рассылок и спецпроектов.

Мы не просто создали инструмент — мы создали язык визуального общения, доступный каждому.

Бизнес-задача и ее решение

Конструктор иллюстраций в ВТБ Онлайн
Перед нами встала задача найти такое решение, чтобы в короткие сроки наладить процесс выпуска новых функций, улучшить скорость разработки и загрузки ВТБ Онлайн. Этим решением стал переход на конструктор иллюстраций.

Этот инструмент обеспечивает создание высококачественных иллюстраций всего за несколько минут благодаря простому интерфейсу и возможности выбора из заранее подготовленных элементов.

Пользователи могут выбирать готовые элементы, такие как иконки, фигуры, текстовые блоки и фоны, и комбинировать их так, как им нужно, не нарушая целостности общего визуального образа.

Как появилась идея
Ранее иллюстрации создавались с нуля, что делало процесс длительным и трудоемким. Эти изображения часто были плоскими и разношерстными, не соответствуя единому стилю компании.

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

Реализация конструктора

Команда преобразовала коллекцию графических элементов в интуитивно понятный конструктор иллюстраций, который значительно упрощает процесс создания уникальных изображений в стиле ВТБ Онлайн.

В отличие от старой системы, где каждый элемент приходилось отрисовывать заново, новый конструктор позволяет пользователям легко выбирать необходимые компоненты из обширной библиотеки и комбинировать их в единую композицию.

Это не только экономит время, но и снижает риск ошибок, так как специалисты могут сосредоточиться на креативной части работы, не отвлекаясь на технические детали.

Про эффект

Мы разработали конструктор иллюстраций, который стал незаменимым инструментом для банка, а также создали гайды по визуальному стилю и процессам команды, что обеспечило единообразие и качество в нашей работе.

Было:
• Иллюстрации создавались вручную, что занимало дни.
• Разные команды использовали несовместимые визуальные стили.
• Сложно было поддерживать единую айдентику ВТБ Онлайн.

Стало:
• Иллюстрации собираются за минуты.
• Единый визуальный язык во всех коммуникациях.
• Визуальный контент стал не просто инструментом — а частью цифровой культуры банка.

Крафт (мастерство), реализация, технические детали

В 2025 году проект вышел на новый уровень. Мы создали плагин для Figma и Pixso, который сделал работу с иллюстрациями ещё удобнее.

Интерфейс плагина интуитивен:
• категории элементов (деньги, карты, CRM, спецпроекты, персонажи),
• поиск по ключевым словам и тегам,
• предпросмотр и добавление элемента в один клик.

Система автоматически подстраивается под выбранный стиль и тип проекта — будь то CRM-коммуникация, баннер в приложении или спецпроект.

При этом сам Конструктор доступен прямо внутри рабочих инструментов:
• встроенный поиск по тегам,
• фильтрация по категориям,
• предпросмотр миниатюр элементов,
• автоматическое обновление библиотеки (новые элементы появляются сразу после добавления в облачное хранилище).

Благодаря этому работа с иллюстрациями стала не просто быстрой — она стала интерактивной, гибкой и масштабируемой.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Обновление чат-бота ВТБ
С помощью конструктора иллюстраций мы обновили чат-бота, который стал не только функциональным помощником, но и ярким маскотом, отражающим дух компании. Новая версия чат-бота получила современный дизайн, улучшенные возможности взаимодействия и более человечный подход к общению с пользователями.

Благодаря обновлениям бот теперь способен не только отвечать на стандартные вопросы, но и предоставлять персонализированные рекомендации, что делает взаимодействие более увлекательным и эффективным.

Обновленный маскот стал символом дружелюбия и доступности сервиса, что положительно сказалось на пользовательском опыте и удовлетворенности клиентов.

Прочая информация о кейсе

Скриншоты

Видео