Как сайт, который продаёт, начинается с аналитики

Почему структуру сайта должны задавать покупатели

Большинство компаний начинают редизайн сайта с вопроса «как он должен выглядеть» вместо вопроса «что хочет увидеть клиент». Результат предсказуем: красивый сайт, который не продаёт.

История ISPsystem и агентства Completo показывает другой подход. За четыре месяца они создали сайт, который разговаривает с двумя разными типами покупателей — и каждый видит то, что нужно именно ему. Не сразу, а прямо на главной странице.

Как узнать, кто приходит на сайт

Перед тем как набросать первый макет, команда Completo потратила время на аналитику. Они:

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

Главное открытие: у ISPsystem есть две совершенно разные аудитории с разными целями.

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

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

Это звучит очевидно, но большинство сайтов смешивают эти два пути в один. Человек выбирает не между продуктами, а между «это не для меня» или «сайт конкурента, может там понятнее».

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

Разделение контента: разные люди, разные решения

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

Но не всё на сайте разделяется. Общие материалы (статьи в блоге, документация, информация о компании) остаются одинаковыми для всех. Это экономит время на разработку и не сбивает людей с толку.

Дизайнеры рисовали в программе Figma (приложение для макетирования интерфейсов). На этом же этапе ISPsystem готовила тексты. Completo заранее составила список того, какой текст нужен, сколько слов в каждом блоке, в каком порядке информация идёт. Когда дизайнер получил готовый контент, он сразу мог оценить, как это будет выглядеть, без переделок.

Когда брендбук мешает продажам

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

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

Дизайнеры начали всё заново. На этот раз они собрали около 30 примеров других сайтов (обычно для такой работы хватает 10) и построили новую цветовую схему. Синий цвет остался акцентным, чтобы узнаваемость сохранилась. Остальная палитра — тёмнее, спокойнее, контрастнее.

Проверка макетов до запуска

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

• Тепловую карту — показала, на какие части экрана пользователь обратит внимание в первую очередь
• Прогноз кликабельности — примерный процент людей, которые нажмут на каждую кнопку

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

Потом создали интерактивный макет — не просто картинку, а прототип, по которому можно кликать. Заказчик мог пройти путь от главной страницы до того момента, как товар попадает в корзину. Это помогло заметить, что в первоначальном плане не было некоторых визуальных деталей, которые должны были привлечь внимание.

Готовые элементы и инструменты для разработчиков

У ISPsystem были красивые трёхмерные иконки в стиле стекла — их раньше использовали в презентациях и на печатных материалах. Вместо того чтобы рисовать новые, Completo взяла эти иконки как основу и дополнила набор новыми в таком же стиле. Это сохранило ощущение того, что это тот же бренд, но в новом виде.

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

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

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

Что может сделать продавец маркетплейса

Если вы продаёте на маркетплейсе и думаете о своём сайте или о карточке товара, принципы те же.

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

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

Не верьте принципу «как красиво для нас». Верьте тому, как это выглядит для покупателя. Если ваш целевой клиент — молодёжь из больших городов, стиль будет один. А если вы продаёте бабушкам, стиль должен быть другой. Аудитория диктует дизайн, не наоборот.