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

Flomni — это омниканальная платформа для автоматизации общения и заботы о клиентском опыте

Область
UI/UX
Клиент
Flomni
Год
2020

О проекте

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

Реализация

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

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

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

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

Компоненты
Шрифты
Цвета
Иконки

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

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

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

Навигация

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

Десктопная версия

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

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

Навигация

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

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

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

Результаты

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

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

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

Текущая версия блока подписок в Райффайзен Банке

Ещё кейсы

CoMagic

Сервис отчетов для руководителей

Провели исследование, разработали дизайн и дополнили дизайн-систему. Проверили удобство UX-тестами

UIS

Чат-платформа для операторов

Проработали функционал, сделали дизайн интерфейсов для MVP, а затем — развили до полноценной версии

UIS

Софтфон — приложение для звонков

Спроектировали новый дизайн. Опирались на лучшие практики, и при этом учитывали рамки имеющихся архитектурных решений