Назрели две главные проблемы:
- Разные продукты «Финам» развивались отдельно и по-разному: не было единства цветов, шрифтов, кнопок, форм и т. д.
- При переходах между продуктами (сервисами, сайтами, приложениями) у пользователей не было ощущения, что они находятся в единой экосистеме.
![Фотография](/upload/medialibrary/6d5/6d59d0634e66f8fde5e550582ac3304b.png)
Наводим порядок в стиле
![Фотография](/upload/medialibrary/071/071bb52242d513e0f3395a923144ef11.png)
Пример использования оранжевого в интерфейсе приложения «Финам» до редизайна
Приводим продукты «Финам» к единому стилю
- «Финам.ру»;
- «Финам-Банк»;
- учебный центр;
- мобильное приложение FinamBank;
- продающие лендинги.
«Финам.ру»
![Фотография](/upload/medialibrary/859/8592ce06fc60dd9fdf035fc8118eae0b.png)
Главная страница «Финам.ру»
![Фотография](/upload/medialibrary/638/6385c9a342e1c337fb7dbce1a03ec7a7.png)
Мобильная версия «Финам.ру»
Мобильное приложение банка «Финам»
![Фотография](/upload/medialibrary/cad/cad31e46a6c8c40cb3af404aab91149a.png)
![Фотография](/upload/medialibrary/f92/f92fd413b1fb9003d2cd3627ee81d156.png)
Учебный центр «Финам»
![Фотография](/upload/medialibrary/5f5/5f52e6f16b5d978173881132e519e1b1.png)
Конструктор лендингов
![Фотография](/upload/medialibrary/f41/f41101b0aa6f147706def93fb17cdc21.png)
Варианты блоков, из которых можно собирать лендинги.
![Фотография](/upload/medialibrary/77f/77f84b088ca8033d58a9d34fd66266f3.png)
Какие проблемы снимает UI Kit
- Экономит время команды: не нужно придумывать и создавать элементы с нуля.
- Упрощает согласования макетов. Как должен выглядеть той или иной баннер? Как его расположить? Какой использовать цвет? Всё это уже решено в UI Kit.
- Новым членам команды не нужно долго погружаться в продукт.
Мы уверены, что это поможет командам «Финам» продолжать развивать и создавать удивительные и полезные продукты, находясь на передовой в мире финансов и технологий
Создание дизайн-системы
- стили типографики и палитры цветов;
- принцип построения иконок;
- компоненты кнопок;
- модульные грид-системы;
- готовые контентные блоки, из которых можно собирать страницы и лендинги.
![Фотография](/upload/medialibrary/90d/90d624614d3df3b072562ba71c9b4044.png)
Навигация по содержанию всех компонентов дизайн-системы.
![Фотография](/upload/medialibrary/ac9/ac95d1339ace75e3e4288da5a92a1f24.png)
![Фотография](/upload/medialibrary/a7e/a7e5d78331379a7cf86fc1111d6b2e2f.png)
![Фотография](/upload/medialibrary/d15/d159de4ea43f85b63eaebda2fbbfe9d8.png)
![Фотография](/upload/medialibrary/b05/b05c82e3efd62a8811679c5640ae0805.png)
Кроме того, мы стали выглядеть элегантно и более профессионально, нам доверяют, и новый стиль на это качественно повлиял. Результаты A/B-тестов показали, что на новый дизайн пользователи реагируют гораздо лучше. У нас повысились показатели узнаваемости, вырос органический трафик по всем продуктам. Конечно, это всё совокупность факторов и плоды большой и разной работы. Но можно сказать точно, что новая дизайн-система стала пазлом, которого нам не доставало. Картина сложилась.
Бонус: два совета, как интегрировать новый дизайн, не шокируя пользователей
В итоге мы хорошо подготовились к изменениям, поэтому их интеграция прошла и до сих пор проходит очень хорошо. Секрет успеха в этом случае — в предварительном исследовании.
Совет № 2:
А если редизайн происходит резко, то нужна опция отката на старую версию. У нас был проект редизайна сайта «Комсомольской правды» с гигантскими цифрами посещаемости по России. Мы запустили новый дизайн как раз с возможностью откатиться на старый. И всё равно получили волну негативных комментариев. Мы их, конечно, собирали и анализировали, но по большей части это было обыкновенным неприятием нового. И это нормально. Поэтому какое-то время еще можно было пользоваться старой версией сайта, но потом ее отключили. В итоге после редизайна у заказчика сильно выросла конверсия, глубина просмотров и общая посещаемость.
В любом случае нужно общаться с пользователем, задавать вопросы о новом дизайне, просить его оценить. Такой диалог делает переход легче, потому что пользователь чувствует, что о нем заботятся и его мнение важно. Ну и возможный негатив направляется не прямо в вашу сторону, а в такие опросы.
Результаты
- Вместе с командой «Финам» создали единый визуальный стиль компании и обновили дизайн ее цифровых продуктов.
- Разработали четкое пособие для создания новых продуктов в единой стилистике, наполнили его новыми элементами и собрали всё в UI Kit.
- Проект получил награду Tagline 2023 — крупнейшей Digital-премии в Европе.