Как мы «подружили» цифровые продукты холдинга «Финам» с помощью дизайн-системы
Всем привет! Я Дима Курамшин, директор по бизнес-процессам в AGIMA. Сегодня расскажу, как мы вместе с командой «Финам» придумали единый визуальный стиль для всех продуктов холдинга и создали UI Kit с набором готовых дизайн-решений. Как бесшовно интегрировать новый стиль в большой компании, зачем вообще нужна дизайн-система и как она может стать фундаментом для развития бизнеса — читайте в статье.
«Финам» — самый крупный финансовый холдинг в России. У компании множество разных цифровых продуктов: от банка до собственного учебного центра. Но у всех этих сервисов не было единства в дизайне.
Назрели две главные проблемы:
1. Разные продукты «Финам» развивались отдельно и по-разному: не было единства цветов, шрифтов, кнопок, форм и т. д.
2. При переходах между продуктами (сервисами, сайтами, приложениями) у пользователей не было ощущения, что они находятся в единой экосистеме.
Чем дольше продукты «Финам» развивались параллельно, тем меньше они походили друг на друга. В какой-то момент даже выявились две разных ветки корпоративного стиля: с желтыми элементами и с оранжевыми. Были риски, что в конце концов продукты очень сильно визуально разойдутся и перестанут быть узнаваемыми.
Чтобы привести всё к одному знаменателю и создать для «Финам» его узнаваемое и актуальное лицо, нужен был взгляд извне. Так мы и подключились к проекту.
Нашей общей с заказчиком задачей стало создание дизайн-системы, которая объединит все продукты одним стилем.
Наводим порядок в стиле
У нашей команды не было цели придумать что-то принципиально новое. Скорее мы наводили порядок в шкафу, переосмысливали «гардероб» и создавали новый уникальный стиль «Финам». При этом нужно было выдержать баланс между визуальными трендами финтеха и уникальностью бренда.
Сперва мы обратились к брендбуку компании и проанализировали ее существующие дизайн-решения.
Цвет
Основным акцентным цветом сервисов был оранжевый. В палитре он ближе к красному, поэтому кажется агрессивным и затрудняет прохождение позитивных сценариев. К тому же красный — это цвет убытка у брокера, а еще его традиционно используют для отображения ошибок или критических действий.
Пример использования оранжевого в интерфейсе приложения «Финам» до редизайна
В итоге мы пришли к желтому цвету. Но здесь тоже нужно было двигаться осторожно, потому что желтый достаточно часто используют в брендинге, в том числе и в финтехе.
Шрифт
Новый шрифт должен был хорошо подходить как для сайтов, так и для мобильных приложений. Выбрали Inter из-за его вариативности и универсальности. Он хорош для чисел, заголовков, подзаголовков, цитат и других текстов. Inter уже использовался в некоторых продуктах «Финам», и поэтому был знаком пользователям.
Приводим продукты «Финам» к единому стилю
Мы разработали несколько дизайн-концепций и вместе с заказчиком выбрали лучшую, проверили ее, внесли правки и запустили работу по редизайну.
Все наши дизайн-решения мы подтверждали данными от конечных пользователей. В этом нам помогли количественные исследования и глубинные интервью, которые «Финам» проводили в своей «Лаборатории клиентского опыта».
Новый дизайн мы применили к пяти продуктам:
«Финам.ру»;
«Финам-Банк»;
учебный центр;
мобильное приложение FinamBank;
продающие лендинги.
«Финам.ру»
На главной странице сервиса «Финам.ру» появился единый хедер для навигации по всем доступным продуктам. Например, раньше клиент банка «Финам» мог не знать, что у компании есть еще собственный учебный центр с большим набором курсов для инвесторов и трейдеров.
Теперь, когда пользователь переключается между продуктами «Финам», у него нет ощущения, что он попадает на какие-то отдельные сервисы — он постоянно находится в рамках единой экосистемы компании.
Мобильное приложение банка «Финам»
Мобильное приложение FinamBank — сервис инвестиционного холдинга «Финам» для простого и удобного доступа к банковским продуктам и услугам.
Главная страница «Финам.ру»
Теперь, когда пользователь переключается между продуктами «Финам», у него нет ощущения, что он попадает на какие-то отдельные сервисы — он постоянно находится в рамках единой экосистемы компании.
Мобильная версия «Финам.ру»
Мобильное приложение банка «Финам»
Мобильное приложение FinamBank — сервис инвестиционного холдинга «Финам» для простого и удобного доступа к банковским продуктам и услугам.
Мы также привели дизайн приложения к единому стилю, разработали иконки, баннеры и сторис. Еще мы создали компоненты, которые используются только в мобильном приложении: отображение баланса на карте, переводы и сбережения.
Учебный центр «Финам»
Это очные и онлайн-курсы для начинающих и опытных инвесторов. Мы обновили главную страницу LMS-системы, создали главную страницу учебного центра, разработали каталог и детальные страницы курсов.
Конструктор лендингов
«Финам» часто запускает лендинги для своих продуктов. Например, нужна страница нового учебного курса с фото преподавателя, планом обучения, отзывами и т. д., или нужно оформить индивидуальный пакет предложений для инвестора — теперь запустить такие страницы гораздо проще.
Чтобы команда не тратила на создание лендингов много времени, мы разработали большую систему блоков и компонентов и поместили их в UI Kit (набор готовых решений). Мы предусмотрели все возможные темы и задачи. Под каждую придумали визуальное решение: шрифты, цвета, кнопки и контрастные экраны.
Варианты блоков, из которых можно собирать лендинги.
В итоге получилось более 30 ключевых блоков. Мы задали основной стиль каждого из них, а дизайнеры «Финам» на основе этих решений расширили количество компонентов и возможных блоков.
Вот пример страницы, собранной в конструкторе лендингов:
Какие проблемы снимает UI Kit
Экономит время команды: не нужно придумывать и создавать элементы с нуля.
Упрощает согласования макетов. Как должен выглядеть той или иной баннер? Как его расположить? Какой использовать цвет? Всё это уже решено в UI Kit.
Новым членам команды не нужно долго погружаться в продукт.
Проверять гипотезы, создавать и запускать отдельные страницы и целые продукты стало гораздо проще и быстрее.
Дмитрий Курамшин, Руководитель проекта«Мы проделали огромную работу при создании этого инструмента, и мы уверены, что он станет незаменимой помощью для талантливых дизайнеров «Финам». Наш UI Kit не только способствует унификации визуальной коммуникации с пользователями, но также предоставляет широкий арсенал визуальных элементов, гармонично сочетающихся между различными цифровыми продуктами.
Мы уверены, что это поможет командам «Финам» продолжать развивать и создавать удивительные и полезные продукты, находясь на передовой в мире финансов и технологий».
Создание дизайн-системы
В итоге мы собрали набор правил, которые помогут командам «Финам» поддерживать единство дизайна всех диджитал-продуктов. В нем объединили все аспекты цифрового дизайна:
стили типографики и палитры цветов;
принцип построения иконок;
компоненты кнопок;
модульные грид-системы;
готовые контентные блоки, из которых можно собирать страницы и лендинги.
Также мы подготовили удобную навигацию по дизайн-системе, собрав содержание в одном фрейме:
Навигация по содержанию всех компонентов дизайн-системы.
К компонентам добавили рекомендации по использованию в разных разрешениях:
На демонстраницах показали, как работает каждый компонент системы:
Екатерина Лисецкая, Креативный Директор «Финам» «Безусловно, единая дизайн-система облегчает жизнь. Набор элементов из UI Kit наша техническая команда перевела на токены и перенесла в две больших библиотеки для дизайнеров и разработчиков. Сейчас мы можем легко и быстро собрать и выпустить любой макет.
Кроме того, мы стали выглядеть элегантно и более профессионально, нам доверяют, и новый стиль на это качественно повлиял. Результаты A/B-тестов показали, что на новый дизайн пользователи реагируют гораздо лучше. У нас повысились показатели узнаваемости, вырос органический трафик по всем продуктам. Конечно, это всё совокупность факторов и плоды большой и разной работы. Но можно сказать точно, что новая дизайн-система стала пазлом, которого нам не доставало. Картина сложилась».
Бонус: два совета, как интегрировать новый дизайн, не шокируя пользователей
Совет №1 от Екатерины Лисецкой, креативного директора «Финам»:
«К созданию новой версии дизайна мы подошли после ряда исследований. У нас в компании есть «Лаборатория клиентского опыта», и на первом этапе проекта в рамках «Лаборатории» мы провели интервью с нашими клиентами: узнали их потребности, чего им не хватает, что нравится.
В итоге мы хорошо подготовились к изменениям, поэтому их интеграция прошла и до сих пор проходит очень хорошо. Секрет успеха в этом случае — в предварительном исследовании».
Совет №2 от Дмитрия Кожевникова, арт-директора AGIMA:
«Дизайн сервисов «Финам» меняется постепенно. Команда дозированно вводит новые интерфейсные элементы и не на всех продуктах сразу. Так пользователи успевают привыкнуть к новшествам.
А если редизайн происходит резко, то нужна опция отката на старую версию. У нас был проект редизайна сайта «Комсомольской правды» с гигантскими цифрами посещаемости по России. Мы запустили новый дизайн как раз с возможностью откатиться на старый. И всё равно получили волну негативных комментариев. Мы их, конечно, собирали и анализировали, но по большей части это было обыкновенным неприятием нового. И это нормально. Поэтому какое-то время еще можно было пользоваться старой версией сайта, но потом ее отключили. В итоге после редизайна у заказчика сильно выросла конверсия, глубина просмотров и общая посещаемость.
В любом случае нужно общаться с пользователем, задавать вопросы о новом дизайне, просить его оценить. Такой диалог делает переход легче, потому что пользователь чувствует, что о нем заботятся и его мнение важно. Ну и возможный негатив направляется не прямо в вашу сторону, а в такие опросы».
Результаты
— Вместе с командой «Финам» создали единый визуальный стиль компании и обновили дизайн ее цифровых продуктов.
— Разработали четкое пособие для создания новых продуктов в единой стилистике, наполнили его новыми элементами и собрали всё в UI Kit.
— Проект получил награду Tagline 2023 — крупнейшей Digital-премии в Европе.
Еще больше иллюстраций и деталей проекта найдете в кейсе на нашем сайте и на Behance.
P.S. О продуктовом подходе в дизайне и разработке мы пишем в нашем телеграм-канале. Подписывайтесь, если интересна эта тема.
