Как мы «подружили» цифровые продукты холдинга «Финам» с помощью дизайн-системы

644
#Разработка 06 мая 2024
Всем привет! На связи AGIMA. Сегодня расскажем, как мы вместе с командой «Финам» придумали единый визуальный стиль для всех продуктов холдинга и создали UI Kit с набором готовых дизайн-решений. Как бесшовно интегрировать новый стиль в большой компании, зачем вообще нужна дизайн-система и как она может стать фундаментом для развития бизнеса — читайте в статье.
«Финам» — самый крупный финансовый холдинг в России. У компании множество разных цифровых продуктов: от банка до собственного учебного центра. Но у всех этих сервисов не было единства в дизайне.

Назрели две главные проблемы:

  1. Разные продукты «Финам» развивались отдельно и по-разному: не было единства цветов, шрифтов, кнопок, форм и т. д.
  2. При переходах между продуктами (сервисами, сайтами, приложениями) у пользователей не было ощущения, что они находятся в единой экосистеме.
Чем дольше продукты «Финам» развивались параллельно, тем меньше они походили друг на друга. В какой-то момент даже выявились две разных ветки корпоративного стиля: с желтыми элементами и с оранжевыми. Были риски, что в конце концов продукты очень сильно визуально разойдутся и перестанут быть узнаваемыми.
Чтобы привести всё к одному знаменателю и создать для «Финам» его узнаваемое и актуальное лицо, нужен был взгляд извне. Так мы и подключились к проекту.
Нашей общей с заказчиком задачей стало создание дизайн-системы, которая объединит все продукты одним стилем.
Фотография

Наводим порядок в стиле

У нашей команды не было цели придумать что-то принципиально новое. Скорее мы наводили порядок в шкафу, переосмысливали «гардероб» и создавали новый уникальный стиль «Финам». При этом нужно было выдержать баланс между визуальными трендами финтеха и уникальностью бренда.
Сперва мы обратились к брендбуку компании и проанализировали ее существующие дизайн-решения.
Цвет
Основным акцентным цветом сервисов был оранжевый. В палитре он ближе к красному, поэтому кажется агрессивным и затрудняет прохождение позитивных сценариев. К тому же красный — это цвет убытка у брокера, а еще его традиционно используют для отображения ошибок или критических действий.
Фотография

Пример использования оранжевого в интерфейсе приложения «Финам» до редизайна

В итоге мы пришли к желтому цвету. Но здесь тоже нужно было двигаться осторожно, потому что желтый достаточно часто используют в брендинге, в том числе и в финтехе.
Шрифт
Новый шрифт должен был хорошо подходить как для сайтов, так и для мобильных приложений. Выбрали Inter из-за его вариативности и универсальности. Он хорош для чисел, заголовков, подзаголовков, цитат и других текстов. Inter уже использовался в некоторых продуктах «Финам», и поэтому был знаком пользователям.

Приводим продукты «Финам» к единому стилю

Мы разработали несколько дизайн-концепций и вместе с заказчиком выбрали лучшую, проверили ее, внесли правки и запустили работу по редизайну.
Все наши дизайн-решения мы подтверждали данными от конечных пользователей. В этом нам помогли количественные исследования и глубинные интервью, которые «Финам» проводили в своей «Лаборатории клиентского опыта».
Новый дизайн мы применили к пяти продуктам:
  • «Финам.ру»;
  • «Финам-Банк»;
  • учебный центр;
  • мобильное приложение FinamBank;
  • продающие лендинги.

«Финам.ру»

На главной странице сервиса «Финам.ру» появился единый хедер для навигации по всем доступным продуктам. Например, раньше клиент банка «Финам» мог не знать, что у компании есть еще собственный учебный центр с большим набором курсов для инвесторов и трейдеров.
Фотография

Главная страница «Финам.ру»

Теперь, когда пользователь переключается между продуктами «Финам», у него нет ощущения, что он попадает на какие-то отдельные сервисы — он постоянно находится в рамках единой экосистемы компании.
Фотография

Мобильная версия «Финам.ру»

Мобильное приложение банка «Финам»

Мобильное приложение FinamBank — сервис инвестиционного холдинга «Финам» для простого и удобного доступа к банковским продуктам и услугам.
Фотография

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

Учебный центр «Финам»

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

Конструктор лендингов

«Финам» часто запускает лендинги для своих продуктов. Например, нужна страница нового учебного курса с фото преподавателя, планом обучения, отзывами и т. д., или нужно оформить индивидуальный пакет предложений для инвестора — теперь запустить такие страницы гораздо проще.
Чтобы команда не тратила на создание лендингов много времени, мы разработали большую систему блоков и компонентов и поместили их в UI Kit (набор готовых решений). Мы предусмотрели все возможные темы и задачи. Под каждую придумали визуальное решение: шрифты, цвета, кнопки и контрастные экраны.
Фотография

Варианты блоков, из которых можно собирать лендинги.

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

Какие проблемы снимает UI Kit

  • Экономит время команды: не нужно придумывать и создавать элементы с нуля.
  • Упрощает согласования макетов. Как должен выглядеть той или иной баннер? Как его расположить? Какой использовать цвет? Всё это уже решено в UI Kit.
  • Новым членам команды не нужно долго погружаться в продукт.
Проверять гипотезы, создавать и запускать отдельные страницы и целые продукты стало гораздо проще и быстрее.
Мы проделали огромную работу при создании этого инструмента, и мы уверены, что он станет незаменимой помощью для талантливых дизайнеров «Финам». Наш UI Kit не только способствует унификации визуальной коммуникации с пользователями, но также предоставляет широкий арсенал визуальных элементов, гармонично сочетающихся между различными цифровыми продуктами.


Мы уверены, что это поможет командам «Финам» продолжать развивать и создавать удивительные и полезные продукты, находясь на передовой в мире финансов и технологий

Фотография

Дмитрий Курамшин

Директор по бизнес процессам AGIMA

«Мы проделали огромную работу при создании этого инструмента, и мы уверены, что он станет незаменимой помощью для талантливых дизайнеров «Финам». Наш UI Kit не только способствует унификации визуальной коммуникации с пользователями, но также предоставляет широкий арсенал визуальных элементов, гармонично сочетающихся между различными цифровыми продуктами.
Мы уверены, что это поможет командам «Финам» продолжать развивать и создавать удивительные и полезные продукты, находясь на передовой в мире финансов и технологий».

Создание дизайн-системы

В итоге мы собрали набор правил, которые помогут командам «Финам» поддерживать единство дизайна всех диджитал-продуктов.
В нем объединили все аспекты цифрового дизайна:

  • стили типографики и палитры цветов;

  • принцип построения иконок;

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

Навигация по содержанию всех компонентов дизайн-системы.

К компонентам добавили рекомендации по использованию в разных разрешениях:
Фотография

Фотография

Фотография

На демонстраницах показали, как работает каждый компонент системы:
Фотография

Безусловно, единая дизайн-система облегчает жизнь. Набор элементов из UI Kit наша техническая команда перевела на токены и перенесла в две больших библиотеки для дизайнеров и разработчиков. Сейчас мы можем легко и быстро собрать и выпустить любой макет.


Кроме того, мы стали выглядеть элегантно и более профессионально, нам доверяют, и новый стиль на это качественно повлиял. Результаты A/B-тестов показали, что на новый дизайн пользователи реагируют гораздо лучше. У нас повысились показатели узнаваемости, вырос органический трафик по всем продуктам. Конечно, это всё совокупность факторов и плоды большой и разной работы. Но можно сказать точно, что новая дизайн-система стала пазлом, которого нам не доставало. Картина сложилась.

Фотография

Екатерина Лисецкая

Креативный Директор "Финам"

Бонус: два совета, как интегрировать новый дизайн, не шокируя пользователей

Совет № 1:
К созданию новой версии дизайна мы подошли после ряда исследований. У нас в компании есть «Лаборатория клиентского опыта», и на первом этапе проекта в рамках «Лаборатории» мы провели интервью с нашими клиентами: узнали их потребности, чего им не хватает, что нравится.


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

Фотография

Екатерина Лисецкая

Креативный Директор "Финам"


Совет № 2:
Дизайн сервисов «Финам» меняется постепенно. Команда дозированно вводит новые интерфейсные элементы и не на всех продуктах сразу. Так пользователи успевают привыкнуть к новшествам.


А если редизайн происходит резко, то нужна опция отката на старую версию. У нас был проект редизайна сайта «Комсомольской правды» с гигантскими цифрами посещаемости по России. Мы запустили новый дизайн как раз с возможностью откатиться на старый. И всё равно получили волну негативных комментариев. Мы их, конечно, собирали и анализировали, но по большей части это было обыкновенным неприятием нового. И это нормально. Поэтому какое-то время еще можно было пользоваться старой версией сайта, но потом ее отключили. В итоге после редизайна у заказчика сильно выросла конверсия, глубина просмотров и общая посещаемость.


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

Фотография

Дмитрий Кожевников

Арт-директор AGIMA

Результаты

  • Вместе с командой «Финам» создали единый визуальный стиль компании и обновили дизайн ее цифровых продуктов.
  • Разработали четкое пособие для создания новых продуктов в единой стилистике, наполнили его новыми элементами и собрали всё в UI Kit.
  • Проект получил награду Tagline 2023 — крупнейшей Digital-премии в Европе.
Еще больше иллюстраций и деталей проекта найдете в кейсе на нашем сайте и на Behance.

Контент-хаб

0 / 0
+7 495 981-01-85 + Стать клиентом
Услуги Кейсы Контент-хаб