Сайт экосистемы Communigate, аналога Microsoft Exchange: как презентовать импортозамещающий IT-продукт

Главное о кейсе

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

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

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

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

Как проект изменил жизнь пользователей

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

Так было и у нашего клиента Communigate, который разрабатывает аналог зарубежного Microsoft Exchange. Если раньше основными заказчиками Communigate были госкомпании, которые обязаны пользоваться российским софтом, то теперь интерес к продукту проявляет и крупный частный бизнес, который хочет обезопасить себя от рисков и перейти на российское ПО.

Мы провели UX-аналитику старого сайта и выяснили, что потенциальные клиенты заходя на сайт просто ничего не понимали и сразу покидали его после просмотра главной страницы. То есть основной проблемой старого сайта была слабая подача информации, которая запутывала пользователей и не рассказывала им о продукте. Из-за этого бизнес упускал из виду удобный и качественный продукт, которым уже пользуются такие гиганты как РЖД и «Газпром».

Для разработки нового сайта мы провели анализ текущего сайта, создали CJM, проанализировали сайты конкурентов и крупнейших производителей ПО России, прокастдевили все виды пользователей и применили метод персонажа.

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

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

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

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

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

Бизнес-задача и ее решение

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

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

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

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

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

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

Крафт (мастерство), реализация, технические детали

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

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

На прошлом сайте архитектура Communigate была представлена смешанно — редакции, сервисы и дополнительные решения не были разделены. Из-за этого пользователь покидал сайт, так и не поняв, что из себя представляет софт. Чтобы разложить информацию по полочкам, мы сделали 2 отдельных раздела:
— для экосистемы (страницы с общим описанием платформы и сервисов, которые в нее входят);
— для продуктов (о редакциях экосистемы о дополнительных сервисах, которые можно подключить опционально).

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

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

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

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

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

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Обычно на сайтах IT-продуктов используют абстрактные иконки, которые ассоциируются с функциями сервиса. Мы решили освежить этот прием и вместо стандартных плоских иконок отрисовали 3D-объекты и анимировали их. Это оживляет интерфейс и добавляет ненавязчивое визуальное взаимодействие с посетителем сайта.

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

Чтобы показать общее видение, в предварительной концепции использован набор бесплатных 3D-элементов из Figma Community. Когда заказчик утвердил концепцию, мы перешли к разработке кастомных объектов.

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

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

Скриншоты