Дизайн-система для инвестиционного холдинга «Финам»

1. Вводная задача от заказчика, проблематика, цели

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Проблематика исходной версии:

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

Задачи, поставленные перед командой AGIMA:

• Создать новый визуальный стиль диджитал-продуктов «Финам».
• Привести все диджитал-продукты «Финам» к единому стилю и учесть требования брендбука компании.
• Подготовить UI Kit (набор готовых решений), который дизайнеры «Финам» смогут использовать без долгого погружения в продукт.

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

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

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

3. Результаты сотрудничества

Переработали главную страницу.В первую очередь мы решили изменить дизайн главного новостного продукта «Финам».

1. Наша команда переработала цвета и структурировала информацию.

2. Добавили функцию «темной темы», чтобы инвесторам и трейдерам было удобно пользоваться сайтом вечером.

3. Переработали визуальный стиль навигации.

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

Преобразовали дизайн «Финам-Банка». Теперь он соответствует общему визуальному стилю и брендбуку холдинга «Финам». А если понадобятся новые страницы, их можно сделать из готовых компонентов дизайн-системы.

Обновили дизайн мобильного приложения «Финам-Банка». Вот что конкретно мы сделали:

• привели мобильное приложение к единому стилю «Финам»;
• разработали иконки, баннеры и сторис;
• добавили варианты экранов с темной и светлой темой;
• разработали компоненты, которые используются только в мобильном приложении: отображение баланса на карте, переводы и сбережения;
• просмотр телефона работодателя.

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

Изменили детальную страницу курса. Изменили формат подачи материалов — добавили время, которое потребуется на прохождение курса, добавили фильтры по содержанию. А еще вывели отдельные блок про авторов, добавили их опыт и фото.

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

Мы объединили все аспекты цифрового дизайна:

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

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