IcoPix
+7 999 123-45-67 Обсудить проект
Кейс · Финтех · Иконки и анимация

Кейс: редизайн иконок для банка FutureBank

50 иконок и 20 анимаций, которые привели к росту конверсии на 15% и сокращению времени на написание кода интерфейса. Полный разбор проекта — от анализа до внедрения.

Обсудить похожий проект Смотреть все кейсы
Финтех UI-кит Lottie SVG 2024
Кейс · FutureBank Сетка иконок и анимаций из нового UI-кита банка FutureBank
Бизнес-задача клиента

Почему FutureBank обратился к нам

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

FutureBank — крупный российский банк, обслуживающий более 4,2 миллиона частных клиентов. В начале 2024 года команда продуктовых дизайнеров банка перешла на новую продуктовую архитектуру: интерфейс был разделён на 12 сценариев — от открытия счёта до управления инвестициями. Старая иконочная библиотека (созданная в 2019 году) была собрана из фрагментов разных стилей: часть иконок была обводочной, часть — залитой, часть имела несовместимые сетки и размеры.

Кроме того, банк планировал добавить микроанимации в ключевые сценарии: подтверждение платежей, загрузку данных, переключение вкладок. Для этого потребовалась не просто новая статичная иконочная система, а полноценный UI-кит с анимированными Lottie-композитами, который можно было бы подключить к React-приложению без дополнительной разработки.

Задача, сформулированная директором по дизайну FutureBank: создать единый UI-кит из 50 иконок и 20 анимаций, который будет готов к интеграции в React-фронтенд и сохранит визуальную целостность при масштабировании от 16px до 64px.

Аналитика текущего состояния

Что мы увидели в текущей иконочной системе

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

Мы провели 14 глубинных интервью с пользователями разных возрастных групп (18–65 лет) и проанализировали 8 300 сессий в аналитической системе банка. Результаты оказались показательными:

Стилевое расслоение

Из 120 иконок в старой библиотеке 47% были обводочными, 38% — залитыми, оставшиеся — смешанными. Пользователи не могли предсказать, какая иконка будет залита, а какая — контурной, что снижало скорость навигации в среднем на 1,8 секунды.

Несовместимые сетки

24 иконки были выровнены по сетке 24px, 38 — по 20px, остальные — произвольно. При масштабировании от 16px до 48px часть иконок теряла читаемость: толщина линий менялась непропорционально, а мелкие элементы сливались.

Отсутствие анимации

Ни одна иконка не поддерживала анимацию. В сценарии подтверждения платежа пользователь ждал статичную иконку «галочка» 1,2–1,8 секунды, что создавало ощущение «зависания» приложения. A/B-тест показал, что 11% пользователей в этот момент закрывали вкладку.

Процесс создания

50 иконок и 20 анимаций за 8 недель

Мы разбили проект на четыре этапа: концепция и сетка, черновой дизайн, финализация и анимация. Каждый этап заканчивался синхронизацией с командой FutureBank.

Недели 1–2: сетка и концепция. Мы разработали новую иконочную сетку на базе 24px с шагом 2px и толщиной линии 1,5px для обводочного стиля. Залитые иконки получили внутреннее поле 20×20px. Все иконки выровнены по центру, с чёткими углами и скруглением 1,5px. Финальный стиль — «мягкий минимализм» с акцентом на читаемость при малых размерах.

Недели 3–5: черновой дизайн 50 иконок. Мы сгруппировали иконки по 12 сценариям: счета и платежи (12 иконок), инвестиции (8), кредиты (7), переводы (6), настройки (5), уведомления (4), профиль (4), безопасность (3), поддержка (3), аналитика (3), настраиваемые действия (5). Каждая иконка прошла три раунда ревью: внутренний (IcoPix), с продуктовым дизайнером FutureBank и с UX-исследователем банка.

Неделя 6: финализация и экспорт. После утверждения финальных версий мы экспортировали все иконки в оптимизированный SVG и подготовили компоненты для React. Каждый SVG прошёл через SVGOMG — итоговый вес иконки составил в среднем 1,2 КБ (против 3,4 КБ в старой библиотеке).

Недели 7–8: 20 анимаций в Lottie. Мы создали 20 Lottie-композитов для ключевых сценариев: подтверждение платежа (3 варианта), загрузка данных (2), переключение вкладок (2), успешное действие (3), ошибка (3), прогресс (3), приветствие (1), праздничный эффект (1), переключение темы (1), настраиваемые действия (2). Каждая анимация — от 400 до 1200 мс, с easing-кривой «ease-out» для естественного ощущения завершения действия.

Технические детали

Экспорт в SVG и Lottie: как устроена интеграция

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

SVG-экспорт. Все иконки выгравированы в едином SVG-контейнере с viewBox="0 0 24 24". Линии используют stroke="currentColor", что позволяет менять цвет иконки через CSS-переменную без пересборки. Никаких лишних path-элементов: каждая иконка содержит от 2 до 6 path-команд. Мы также подготовили sprite-файл (иконки.svg) — единый SVG со всеми 50 иконками, который можно подключить через <use> и получить экономию на HTTP-запросах.

Lottie-экспорт. Анимации выгравированы через After Effects → Lottie Bodymovin → оптимизация через lottie-squash. Средний размер одного Lottie-файла — 18 КБ (против 64 КБ в GIF). Все анимации используют transform-свойства (translate, scale, rotate, opacity) и не требуют рендеринга пикселей, что обеспечивает 60 FPS даже на устройствах среднего класса. Мы подготовили 20 JSON-файлов и React-компонент <LottieIcon />, который принимает props: name, size, autoplay, loop.

Документация. В Figma-файле UI-кита мы задокументировали все токены: цвета, размеры, сетки, состояния (default, hover, active, disabled, loading). Для разработчиков — отдельный раздел с примерами кода на TypeScript, таблицей соответствия иконок и сценариев, и чек-листом интеграции Lottie.

50 SVG-иконок

Средний вес — 1,2 КБ. Sprite-файл — 48 КБ. Все иконки используют stroke="currentColor" и viewBox="0 0 24 24". Готовы к подключению через <use> или как отдельные компоненты.

20 Lottie-анимаций

Средний размер — 18 КБ. Длительность — 400–1200 мс. Easing: ease-out. Совместимы с lottie-web и React-Lottie. Поддерживают 60 FPS на устройствах среднего класса.

UI-кит в Figma

Токены, компоненты, состояния, документация для разработчиков. Примеры кода на TypeScript. Чек-лист интеграции. Передача команде FutureBank за 1 день после финального ревью.

Результат

Рост конверсии на 15% после внедрения

Через 6 недель после полного внедрения нового UI-кита в мобильное и веб-приложение FutureBank команда банка зафиксировала значимое улучшение ключевых метрик.

+15%
Рост конверсии в успешный платёж
−1,4 с
Среднее время на подтверждение платежа
−62%
Снижение веса иконок (SVG)
−71%
Снижение размера анимаций (GIF → Lottie)

Дополнительные результаты: время на написание кода интерфейса сократилось с 3,5 часов до 1,2 часов на новый сценарий (за счёт готовых React-компонентов и токенов). Число обращений в техподдержку по вопросам «непонятная иконка» снизилось на 80%. NPS (Net Promoter Score) в мобильном приложении вырос с 42 до 51 за два месяца.

Отзыв клиента

«Команда IcoPix не просто нарисовала иконки — они выстроили систему, которая работает»

Мы ожидали получить красивый набор иконок. Вместо этого получили полноценную дизайн-систему с документацией, готовыми React-компонентами и Lottie-анимациями, которые подключились к приложению за два дня. Через месяц после внедрения конверсия в платёж выросла на 15% — это лучший результат среди всех наших дизайн-инициатив за последний год. Команда IcoPix — надёжный партнёр, к которому мы вернёмся для следующего этапа развития платформы.

Алексей Морозов
Директор по дизайну, FutureBank

Обсудить похожий проект Смотреть другие кейсы
Дополнительно

Частые вопросы о проекте

8 недель. Недели 1–2 — аудит и сетка, недели 3–5 — дизайн 50 иконок, неделя 6 — финализация и экспорт, недели 7–8 — анимация и Lottie-экспорт. Проект был сдан в срок, без переносов.
4 человека: арт-директор (вёл концепцию и финализацию), два иконочных дизайнера (по 25 иконок каждый) и motion-дизайнер (20 анимаций). Синхронизация с командой FutureBank — 2 раза в неделю, по 60 минут.
Да. Токены, сетка и стиль иконок универсальны. Для корпоративного сегмента или нового продукта достаточно добавить 20–40 иконок в существующую библиотеку, не меняя базовых параметров. Мы готовы провести такой доп. этап за 2–3 недели.
Аудит текущей библиотеки, разработка сетки и концепции, дизайн 50 иконок, 20 Lottie-анимаций, экспорт в SVG и Lottie, React-компоненты, Figma-UI-кит с токенами и документацией, три раунда ревью. Все правки в рамках утверждённого объёма — включены.