Communigate

ЗаказчикCommunigate — отечественный разработчик одноименной платформы коммуникаций для офисной работы.ЗадачаСтарый сайт компании морально устарел и требовал обновления. Ключевой проблемой была размытая презентация продукта.

Communigate

Сайт для российского аналога Microsoft Exchange, который внедрен у РЖД и «Газпрома»

Задача

Communigate — отечественный разработчик одноименной платформы коммуникаций для офисной работы. Сервисы внутри ПО обеспечивают взаимодействие сотрудников в бизнесе, медицине, образовании и других сферах. В условиях импортозамещения спрос на софт кратно вырос, так как он является альтернативой Microsoft Exchange.

Старый сайт компании морально устарел и требовал обновления. Ключевой проблемой была размытая презентация продукта.

ba30682ea95f75d88960dbab5a2dd977.png

68d6156825cb40996a75c0884a51a212.png

На сайте отсутствовали:

  • описание преимуществ системы;
  • задачи, которые решает софт;
  • описание ценности ПО для разных клиентских сегментов;
  • кейсы с результатами внедрения ПО, подтверждающие экспертизу компании.

Среди других проблем:

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

За разработкой нового сайта IT-компания обратилась к нам.

У IT-продуктов нет физической формы — их невозможно продемонстрировать на фото. «Голые» скриншоты интерфейса тоже мало о чем говорят пользователю. Поэтому на таких сайтах как никогда важны блоки с преимуществами, описанием функций и задач, которые покрывает софт.

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

  • потенциальные покупатели софта;
  • потенциальные партнеры;
  • действующие клиенты;
  • действующие партнеры.

Фронт работ:

  • разработать корпоративный сайт в соответствии с требованиями UX;
  • создать интуитивно понятную архитектуру сайта;
  • реализовать user-friendly дизайн;
  • сделать адаптивную версию сайта для популярных устройств. 

РЕШЕНИЕ

Разработан корпоративный сайт, который знакомит пользователей с начинкой и преимуществами IT-продукта Communigate. 

В рамках аналитики были сегментированы типы пользователей будущего сайта. На основе их запросов мы определили, как площадка может быть полезна той или иной группе людей. Чтобы закрыть потребности всех ключевых групп, мы проработали структуру сайта.e08e8a415b5dfc86f46a3bc7c5b36525.png

Значительная часть пользователей — это потенциальные клиенты, которые не знакомы с Communigate или присматриваются к системе. Для них на сайте добавлены разделы, страницы и блоки, которые помогают разобраться, как устроена система. CJM здесь учитывают сценарии с переходом к тестовой версии или покупке системы в качестве целевых действий.

0bfca0f7a78fa4f09ee0ed4c3cb98144.png

 Так как продукт распространяется через дистрибьюторов, отдельное внимание уделили партнерской странице. На ней клиент может быстро найти поставщика и заполнить заявку. Мы интегрировали сайт с CRM-системой заказчика, чтобы менеджеры могли отслеживать лиды и вести отчетность.

Для действующих пользователей разработана страница техподдержки, где можно получить помощь по возникшим проблемам. 

acaef7f297958e7968b77959acc05fa8.png

В интерфейсе реализована креативная дизайн-концепция на основе фирменных цветов бренда. Из ключевых идей — акцент на укрупненные детали, тематические плашки с авторскими 3D-объектами и Glitch-эффект при оформлении блоков. 

АНАЛИТИКА

На первом этапе мы провели ряд исследований, которые помогли правильно спроектировать интерфейс.

Работы по аналитике:

  • анализ текущего сайта (интерфейс, контент, метрики);
  • создание CJM;
  • анализ референсов (сайты конкурентов и крупнейших производителей ПО России);
  • Custdev (глубинные интервью с менеджерами продаж, партнерами, техподдержкой);
  • метод персонажа (составление портретов пользователей с их потребностями, болями, сценариями поведения на сайте).

b035092e80bea49120bdc7bb7202d88d.png

d99740e348d8e9dbd0d2fe58a7932dc1.png

С помощью глубинных интервью мы выяснили, как в компании устроены бизнес-процессы, как разные категории пользователей попадают на сайт и какую информацию они ищут.

2e109197efb78ab6bf3a3edba769687e.png

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

d0db507bf1dfd166aace918037eab4ab.png

Благодаря UX-аналитике выделили основную проблему старого сайта — отсутствие правильной подачи информации. Пользователи, попадая на страницу, ничего не понимали и сразу покидали ее.

0fd0b5740b077e9bc3e0befe848832ca.png

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

ПРОЕКТИРОВАНИЕ

Через структуру сайта мы закрываем ключевые задачи проекта:

  • презентация системы Communigate;
  • связь клиента и партнеров;
  • взаимодействие с техподдержкой;
  • поиск новых партнеров.

ГЛАВНАЯ

Главная страница реализована в формате тезисной презентации — во время поэкранного скролла раскрывается УТП, преимущества, функционал и версии продукта.

dc0d1ea3d2e822c4d5310e96a6c603c5.png

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

73c006c32c298ae66d4b808ca633414e.png

ПОНЯТНО О COMMUNIGATE

IT-решение представляет собой экосистему сервисов, реализованных на одной платформе. При этом у Communigate есть несколько редакций, которые отличаются по функционалу. Кроме того, экосистема может быть дополнена партнерскими IT-продуктами.

На прошлом сайте архитектура Communigate была представлена смешанно — редакции, сервисы и дополнительные решения не были разделены. Из-за этого пользователь покидал сайт, так и не поняв, что из себя представляет софт.

Чтобы разложить информацию по полочкам, мы сделали 2 отдельных раздела:

  1. для экосистемы (страницы с общим описанием платформы и сервисов, которые в нее входят);
  2. для продуктов (о редакциях экосистемы о дополнительных сервисах, которые можно подключить опционально).

fd3b2b20570fa028af7ea28afee43be5.png

Благодаря такому разделению мы избавились от сумбурного описания продукта и помогли пользователю разобраться, как устроена система.

В разделе редакций добавили батл-карту с основными отличиями версий продукта. Инструмент позволяет быстро сравнить вариации Communigate. Такая шпаргалка пригодится клиентам и дистрибьюторам, которые продают систему.

ff0d3390081058463b8768a886ea6d04.png

КЕЙСЫ

Кейсы и клиенты — сильная сторона Communigate. Разработкой компании пользуются «Газпром», «Росатом», РЖД, «Ростелеком» — это крупные игроки рынка, а «большие» имена всегда добавляют баллы в пользу компании. Мы посвятили отдельный раздел реализованным проектам, чтобы сделать акцент на экспертизе и получить больше доверия к софту.

66c5622c6d9f10721ed8d0a25ea36641.png

10b1d54950b148e5b012875278d8bd44.png

По себе знаем, что в IT-индустрии кейсы требуют подробного описания: от проблематики, задач и ограничений до процесса внедрения и полученного эффекта.

Мы сделали удобный редактор внутри админпанели со следующими возможностями:

  • верстка текста;
  • отображение структуры кейса с якорными ссылками в отдельном блоке;
  • отображение использованных сервисов;
  • блок с рекомендациями других кейсов.

ПОКУПКА СИСТЕМЫ

В Communigate сделка с клиентом происходит не напрямую через вендора, а через дистрибьюторов и партнеров. Из-за более длинной цепочки продаж даже малейшее неудобство при поиске поставщика может отпугнуть пользователя на пути к покупке.

54dea9e6ecaf380193105fd1deddc4eb.png

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

e485701bec8581a836470f61c59e3d8c.png

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

ПОДДЕРЖКА

Специфический момент в нише IT-продуктов — долгосрочное взаимодействие с клиентом после продажи. Клиенты спрашивают, как исправить баги, пользоваться теми или иными функциями, особенно на этапе внедрения. Отзывчивая техподдержка — один из критериев оценки вендора, и мы передали сайту часть таких задач.

c7aff489031acc601fc0276aade9d43f.png

 На этапе аналитики мы выявили, что клиентам было неудобно пользоваться разделом техподдержки, и они сразу обращались к специалистам.

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

На новом сайте размещены:

  • самые частые вопросы с фильтром по сервисам и поиском по ключевым словам;
  • полезные материалы с инструкциями;
  • запись на курсы по экосистеме Communigate.

ПРОТОТИПЫ

6ce9456c9e0694c148da8b62a01216c6.png

 c8c4096a78134b3fb791b40e118ca2bf.png

 5723915ca40769b3d4e5bf3a3fdb77e0.png

 ДИЗАЙН

Обычно на сайтах IT-продуктов используют абстрактные иконки, которые ассоциируются с функциями сервиса.

e9c8d35084b6fc5b50cc93cf2c5eec76.jpg

Шаг 1. Интерактивный макет для презентации

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

99ac94a46132128e3b550a8c3be901a9.png

Шаг 2. Отрисовка скетчей будущих 3D-моделей

494d92d66a87468adc8011b8054a5967.png

Шаг 3. Готовый комплект 3D-объектов для визуализации сервисов системы

0a5f7abdbf9b5403e55f2ae8a06f994f.png

Шаг 4. 3D-объекты в интерфейсе

79f6286d5da51ce9a339e09384c2f16c.png

Шаг 5. Анимация тизеров

 Редакции Communigate решили презентовать через образ робота, внешний облик которого меняется в зависимости от версии. Например, для редакции, обеспечивающей аудио- и видео- коммуникации, мы сделали «рубашку» в виде телефонной трубки.

f34a2424a1c60e9e8d2d231dea654e97.png

 5082bdf7c6945c641ed63adba17990de.png

Еще один прием, который мы использовали, чтобы избежать привычных шаблонов — это glitch-эффект с «битой» картинкой на блоках, который отсылает к технологичной отрасли компании.

450a35e657587adeaf3f57ecbc257a63.png

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

РЕЗУЛЬТАТ

Новый сайт устраняет ошибки предыдущего ресурса — мы реализовали разделы, страницы и блоки, которых не хватало раньше, а также создали стильную дизайн-концепцию и дружелюбный для пользователя интерфейс. 

Благодаря нашей разработке Communigate привлечет больше пользователей в свою систему, так как теперь у потенциальных клиентов формируется правильное представление об IT-решении и его преимуществах.

Также сайт закрывает потребности:

  • потенциальных партнеров и дистрибьюторов;
  • действующих партнеров;
  • действующих пользователей экосистемы.


Благодаря нестандартным приемам, предложенным в рамках дизайн-концепции, визуал сайта цепляет внимание и выделяет компанию на фоне других разработчиков ПО.

b9bb24eb21048a0c30f3f7d191ea3a03.jpg

Перейти на сайт

Полный текст статьи читайте на CMS Magazine