Открываем Московские окна: как провести полный редизайн сайта без потери трафика

Московские окна — один из крупнейших производителей пластиковых окон в России. Работает на рынке уже более 30 лет. К 2024 году компания открыла 2 собственных производства, увеличив свою производительную мощность до 260 000 изделий в год, а также успела выполнить более 3 миллионов заказов.

Сайт mosokna.ru создали еще в 2007 году, и с тех пор над ним работали разные подрядчики. За 16 лет существования сайта каждый специалист вносил правки своими методами. В итоге скопилось много неактуальных данных, которые тормозили работу сайта, требовался редизайн интерфейса страниц и оптимизация юзабилити.

К агентству Rocket Business компания пришла с запросом на создание современного и быстрого сайта, на который можно быстро перенести данные и не потерять позиции в поисковиках.

После того, как была получена общая концепция UX/UI от «Мосокон», мы составили дальнейший план действий. Цель — улучшить пользовательский опыт и повысить эффективность взаимодействия с клиентами. Переходим к планированию:

К тому же проект реализовывали в несколько потоков одновременно — помимо оптимизации старого сайта, клиент планировал запуск новой версии mosokna.ru. Ее созданием занялась наша команда программистов Rocket Dev.

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

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

Новые функции и современный дизайн не затмили уникальные черты «Мосокон», а, наоборот, усилили их.

Отдельно проработали шапку сайта — настроили удобную визуализацию и плавный переход от одного раздела к другому.

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

Новый сайт мы разработали на фреймворках — React и Next.js. Это уже не сайт в привычном понимании, а веб-приложение, которое работает без обновления страниц браузером.

У выбранного нами стека много плюсов:

● обеспечивает высокую скорость работы сайта;

● позволяет использовать разные технологии рендеринга;

● дает возможность интегрировать любой удобный для клиента бэкенд — в нашем случае 1С:Битрикс.

Также мы обезопасили себя от ошибок: настроили процессы CI/CD с дополнительными тестами, которые не позволят сохранить проект, если в нем есть проблемы с функционалом.

На новом сайте используется технология Incremental Static Regeneration (ISR), которая снижает нагрузку на сервер благодаря заранее отрендеренным статическим страницам. Загрузка страниц происходит мгновенно, даже если на них много разнообразного контента.

Для удобного редактирования контента мы использовали админ-панель Битрикса и написали собственное API, чтобы передавать данные на сайт в формате JSON. Также связали сайт с внутренней CRM и сервисами компании.

Контент-менеджеры «Мосокон» получили удобный и оптимизированный инструмент: помимо стандартных функций Битрикса, мы добавили визуальный текстовый редактор Editor.js, который используют такие проекты, как vc.ru, Tinkoff Journal и DTF.

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

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

Для этого мы интегрировали современные платежные системы — интернет-эквайринг Альфа-банка. Для интеграции использовали REST API Альфа-банка. Все данные оплат сохраняются в админ-панели. Также настроено callback-уведомление от банка, после получения которого сайт обновляет статус оплаты в базе данных и отправляет уведомление в CRM.

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

1. Настроили работу систем аналитики для корректного анализа источников лидов.

2. Подключили Яндекс Метрику так, чтобы она не собирала данные на тестовых ресурсах.

3. Использовали телефонию от Calltouch — настроили передачу всех заявок с сайта.

А еще — оптимизировали отслеживание источников лидов. Представьте, что потенциальный клиент перешел через контекстную рекламу на сайт, а затем написал в мессенджер. Обычными способами отследить, откуда пришел этот клиент, сложно. Мы решили эту проблему, добавив идентификатор сессии в сообщения от пользователя в WhatsApp. Теперь менеджеры «Мосокон» сохраняют номер клиента в CRM. Информация о лиде автоматически отправляется в систему сквозной аналитики, где всегда видно, откуда пришел клиент.

Все договоры компании оформляются онлайн, включая договор на рассрочку. Клиент получает ссылку для подписания, изучает оферту и сопутствующие документы. Затем он подтверждает своё согласие через ввод СМС-кода и оплачивает заказ.

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

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

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

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

Ниша пластиковых окон очень сложная — особенно в Москве, где конкуренция невероятно высока.

Мы переработали и на 40% расширили семантическое ядро ключевых запросов. Новые страницы мы создавали под средне- и низкочастотные ключи. По таким страницам выше конверсия — пользователи быстро находят конкретную информацию.

Что еще сделали:

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

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

А еще:

● регулярно проводим code review, устраняем неактуальный код;

● настраиваем корректную работу модулей фреймворков;

● разрабатываем функционал генерации динамических страниц в sitemap, который ускоряет их индексацию.

● создаем дополнительные шаблоны для админ-панели, которые облегчают работу контент-менеджеров и SEO-специалистов;

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

● настраиваем интеграцию сайта с «VK Видео» для большей вовлеченности аудитории.

Еще на первых этапах работы представители «Мосокон» отметили, что стало гораздо удобнее пользоваться сайтом на любом устройстве. В разы повысилась конверсионность нового сайта по сравнению с его прошлой версией.

По сравнению с сезоном 2023 года, в 2024 году трафик за этот же период вырос на 30%.

На старом сайте процент отказов достигал 17,5%. Благодаря оптимизации работы нового сайта мы сократили этот показатель в 7 раз — до 2-2,5%.

Нам удалось снизить стоимость привлечения клиента на 40% по сравнению со средними показателями в нише. При этом коэффициент возврата маркетинговых инвестиций (ROMI) достиг 5000%. Это очень высокий показатель в оконной тематике.