Реклама работает, а заявок нет? Как мы нашли и устранили барьеры конверсии на сайте производителя стройматериалов

Проблема:

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

Задачи:

1. Выявить критические технические и UX-проблемы через аудит.
2. Настроить безопасную и управляемую среду для доработок.
3. Внедрить регулярный и прозрачный процесс планирования работ.
4. Повысить стабильность сайта и упростить его поддержку.
5. Улучшить визуальную и функциональную часть: от форм до карточек товара.
6. Повысить конверсию и подготовить сайт к эффективному рекламному трафику.

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

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

Понятный план работ каждый месяц

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

Техобслуживание мы проводим по следующему сценарию:

1. Делаем предпроектное исследование, чтобы найти недочеты и узкие места.
2. Создаем реестр задач, куда вносим эти пункты, и туда же добавляем задачи клиента.
3. Каждый месяц проект-менеджер и программист собираются и решают, что из этого списка берем в работу на текущий месяц.
4. Далее проект-менеджер презентует список работ клиенту, после чего ставится программист проводит детальную оценку.
5. После получения оценок проект-менеджер проверяет, что этот список реально реализовать в рамках бюджета месяца, и расставляет задачи, в том числе, в календарь.
6. По итогам месяца проект-менеджер предоставляет клиенту отчет о проделанной работе.

Подготовительная работа

Перед началом строительства важно подготовить все материалы и инструменты. Поэтому первый шаг — создание девелоперской среды и установка системы контроля версий Git. Поэтому сначала мы создали девелоперскую среду для работ и репозиторий в Gitlab. Это позволяет обеспечивать стабильную работу основного сайта и одновременно работать нескольким командам над проектом.

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

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

Предпроектное исследование и исправление технических ошибок

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

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

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

Примеры задач:

1. добавление небольших улучшение вроде кнопки «Наверх»;
2. исправление мелких неточностей в верстке;
3. удаление устаревших неиспользуемых модулей;
4. исправление ошибок кодировки базы данных;
5. удаление закомментированного шаблонного кода из кода страниц.

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

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

Итерационно проводим редизайн и переверстку сайта. В этом кейсе первым этапом стала шапка сайта, затем переделали карточку товара в разделе «Профнастил» и сам раздел.

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

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

Когда сверстали и внедрили на сайт первый вариант дизайна на 80%, узнали от клиента, что будет новая версия. Ее делал маркетолог, и было упущено много важных элементов, которые должны присутствовать на карточке товара.

Новый дизайн оказался не в масштабе: ширина взята не соответствовала текущей ширине рабочей области сайта 1300*3200px. Также в дизайне использовался нелицензированный шрифт, поэтому порекомендовали клиенту изменить его на один из бесплатных из Google Fonts.

В карточке товара добавили простую реализацию подбора цвета RAL. Все изображения профнастила полупрозрачные. По нажатию на кнопку цвета цвет подложки первого слайда меняется — за счет этого изменяется цвет профнастила.

Кроме того, сложности возникли при добавлении калькулятора на сайт: много данных отсутствовало, поэтому пришлось провести несколько созвонов с клиентом, чтобы понять, как должен работать калькулятор. Реализовали его с использованием реактивного JavaScript-фреймворка Alpine.js.

Формы на сайте были сделаны с использованием DEV-версии Vue.js, которая отправляла ошибки и предупреждения в консоль при каждом удобном случае. Поэтому в этой части заменили Vue.js на Alpine.js с минимальными правками.

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

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

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

Результаты:

1. Запущена система ежемесячного технического обслуживания с календарным планированием.
2. Создана дев-среда, настроен контроль версий, резервное копирование и мониторинг.
3. Устранены критические ошибки и технический долг: от форм до лишнего кода.
4. Переработан дизайн шапки, карточки товара, раздела профнастила.
5. Калькулятор реализован с нуля с учетом логики клиента.
6. Повышена скорость, стабильность и управляемость проекта.
7. Конверсия сайта увеличилась почти в 2 раза.