Редизайн корпоративного сайта

О проекте

После 5 лет на рынке компания Flomni перешла на новый этап развития — создавалось новое позиционирование и фирменный стиль для обновленной коммуникации с клиентами в digital.

Задача

• Сделать редизайн основного сайта.
• Сделать гайдлайн как основу для дальнейшего ребрендинга компании.

Исследование

Провели интервью с клиентом, чтобы понять его видение

Для клиента в дизайне было важно отразить современность и технологичность Flomni, а помимо базовых корпоративных цветов использовать яркие элементы.

Провели UX/UI аудит сайта

Смотрели не только на конкурентов, но и на лидеров рынка в разных областях. Собрали референсы, чтобы выбрать стиль и направление, а затем адаптировать понравившиеся элементы к дизайну сайта SaaS-продуктов.

Изучили продукты компании

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

Сделали анализ конкурентов

• Разнообразные блоки на странице больше вовлекают пользователя.
• Особое внимание нужно уделить мобильной версии сайта.
• Она должна быть такой же удобной, как и версия для ПК.
• При создании иллюстраций нужно закладывать ассоциации, чтобы считывалось значение и не было картинки ради картинки.

Проанализировали тренды

Смотрели не только на конкурентов, но и на лидеров рынка в разных областях. Собрали референсы, чтобы выбрать стиль и направление, а затем адаптировать понравившиеся элементы к дизайну сайта SaaS-продуктов.

Реализация

Создание концепта

На основе референсов клиента и собранной информации мы разработали 3 первичных концепта, один из которых взяли за основу.

Разработка UI-kit

Сформировали систему цветов и шрифтов, чтобы было удобно масштабировать проект и передавать элементы в разработку по Figma API.

Дизайн страниц

Нужно было сделать дизайн 35 уникальных страниц. Для этого мы создали единую систему:

• 22 уникальных блока, из которых собираются любые страницы.
• Сборка страниц на Auto Layout для быстрого масштабирования3 шаблона для создания иллюстраций.
• Такой подход позволяет ускорить создание новых страниц и упростить работу с изменениями в текущих данных.

Навигация

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

В мобильной версии сохранили концепт и функциональность, но продумали отображение:

• логический блок умещался на одном экране
• элементы меню закреплены в верхней части экрана и при переключении не прыгают
• кнопки CTA в зоне досягаемости большого пальца
• помимо основной кнопки CTA вынесли и другие способы связи — номер телефона и онлайн-чат

Навигация

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

В десктопной версии использовали основные тренды:

• Большое выпадающее окно
• Наглядное меню
• Ассоциативные иконки

Результаты

• Выявил запросы пользователей и предложил решение, чтобы сервис отслеживания подписок в Райффайзен Банке был удобным, функциональным и конкурентноспособным.
• Продумал путь пользователя, проработал базовые и дополнительные механики для реализации сервиса отображения подписок.
• Определил логичное расположение функционала подписок. → Еще → Сервисы
• Создал интерактивный прототип приложения в новой стилистике.

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

Пресс-релиз по запуску сервиса отслеживания подписок: