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

Продукт и задача

DocsHouse — платформа управления контентом (CSP). Это такая система корпоративного электронного документооборота на открытых библиотеках, микросервисах и облачных решениях.

На сайт заходят из поиска и по рекламе, но главная его задача — поддерживать прямые продажи. Потенциальные клиенты заходят на сайт после презентаций и конференций, чтобы убедиться в преимуществах платформы и надёжности компании. Убеждаться им нужно основательно, поскольку проект внедрения стоит от 5 до 200 миллионов рублей.

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

Заказчик опередил меня с уточняющими вопросами :3

Моя задача: посмотреть, сравнить с конкурентами и дать экспертную оценку, которая поможет определить целесообразность и задачи редизайна.

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

На момент анализа сайт выглядел так:

Скриншот главной страницы целиком (1,3 Мб)

Общее впечатление

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

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

Основные проблемы

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

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

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

Сайт рассказывает о том, насколько платформа крута, а не о том, как она решает конкретные проблемы бизнеса. Чтобы оценить пользу решения, нужно ориентироваться в IT и суметь перенести прочитанное в свой контекст.

Например, какую конкретную пользу даёт парадигма CSP? Понятно, что она составляет описание продукта, но термину не хватает наглядного объяснения. Например, парадигма позволяет be agile уже на этапе внедрения.

В преимуществах много общих слов без конкретики. Они сформулированы не в мире читателя, а как некие параметры, не имеющие прямого отношения к его контексту и проблемам.

Иконки слишком абстрактны и не согласуются с текстом

Например, «Современное решение <...>, построенное на открытых технологиях» ничего толком не говорит. Чем открытые технологии лучше проприетарных? Все ли открытые технологии актуальны? Как это помогает в управлении предприятием? Техническому директору это понятно, но финансовому уже нет.

Другой пример: «100% отечественное решение, входит в Реестр ПО, разработано лидером ИТ-рынка компанией ЛАНИТ». Значит ли это, что в коде нет ни одной библиотеки, написанной иностранными разработчиками? Почему тогда используется Vue.js? Что означает 100 % отечественность?

Низкая наглядность: абстрактные описания, мелкие скриншоты, на которых ничего не видно. Нет практических примеров, экранов, схем, кейсов внедрения.

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

Что такое Паутина, зачем нужна Связанность, что за Мониторы. Как это поможет мне снять десяток филиалов с иглы Битрикса? — может подумать читатель

Демо-версия ничего не показывает, а предлагает оставить заявку. Это сбивает с толку и не выглядит дорого. Таких кнопок много, все они ведут на форму заявки, а не куда-то, где рассказано подробнее о продукте.

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

Выглядит прямолинейным сбором базы

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

Предлагаемое решение

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

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

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

Можно составить несколько сценариев, под разные типы аудитории: финдиров, техдиров, CEO и т. д. Главная страница будет кратко рассказывать о платформе вообще, а дополнительные страницы — объяснять суть конкретным группам.

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

В карточках указать какие-то критичные для бизнеса и ЛПР показатели: примерную стоимость, время внедрения, количество пользователей, изменение показателей до и после. В самом кейсе расписать подробнее, указав сложности и решения. Это подаст малое количество кейсов выгоднее — карточки солиднее четырёх логотипов — и даст конкретные примеры, с которыми читатель сможет сравнить свою ситуацию.

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

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

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

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

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

Проработать мелочи. Согласовать иконки с текстом, убрать со скриншотов неинформативные детали, уделить внимание типографике и вёрстке.

Может показаться, представители целевой аудитории не обратят на это внимания, но впечатление о продукте складывается из множества мелочей. Восприятие всегда эмоционально окрашено, а, следовательно, в некоторой степени иррационально и субъективно у любого человека.

Крупные бренды часто используют эмоции для создания нужного образа продукта. Наглядный пример — Apple и производители техники для видеопродакшена Black Magic.

Анализ и составление отчёта заняли 4 часа, уточнение задачи и согласование ещё полтора.

Заказчик положительно отозвался о результате и переслал мой отчёт маркетингу. Маркетинг согласился с частью выводов, а часть забраковал, как непригодные в B2B. Наверняка из-за упоминания Apple. Сейчас я бы привёл в пример Confluence.

Если вам нужен такой анализ, напишите мне в Телеграм: @vitalyfilatov