Разработка сайта «Мосокна»: новые решения для компании с тридцатилетней историей

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

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

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

Особенность проекта — работа с несколькими командами. К процессу подключились сотрудники «Мосокон» и другие подрядчики. Rocket Business подключило свою команду из 8 специалистов: фронтенд- и бэкенд-программистов, дизайнера, аккаунт- и проджект-менеджеров.

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

— Отрисовать страницы вместе с инхаус-дизайнерами компании.

— Сверстать сайт и написать фронт (подключили целый отдел программистов!)

— Перенести контент в админ-панель.

— Интегрировать фронт- и бэкенд.

— Настроить работу внутренних сервисов.

— Провести тесты и отработать правки от аналитиков и директологов.

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

При этом мы: 

— убрали устаревшие иконки, слипшиеся блоки и некликабельные баннеры; 

— добавили в дизайн больше воздуха и анимации;

— сохранили фирменные цвета компании «Мосокна» — белый, серый, красный.

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

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

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

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

Новый сайт мы разработали на фреймворках — React и Next.js. У такого стека много плюсов: высокая скорость загрузки, красивая анимация, возможность добавить любой бэкенд — мы оставили 1С:Битрикс.

План работы был такой: 

— дизайнеры сдают страницу;

— фронтенд-программисты верстают и пишут логику на React;

— тестировщики проверяют баги;

— контент-менеджеры переносят содержимое страницы в админ-панель;

— бэкенд-разработчики пишут API и передают его на фронт;

— последний этап — еще одно комплексное тестирование;

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

На новом сайте используется технология Incremental Static Regeneration (ISR), которая позволяет обновлять статические страницы даже после завершения разработки. Программист может войти в админку, внести корректировки и отправить запрос на обновление. Обновляется только нужный фрагмент сайта, не нагружая систему лишними запросами. Это одна из причин, почему мы выбрали Next.js — таких возможностей нет у других фреймворков. 

Перезагрузка страниц сайта не требуется, что обеспечивает пользователям максимально комфортный опыт — аналогичный тому, что предлагают крупные онлайн-платформы, такие как Ozon или Wildberries.

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

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

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

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

Для решения этой задачи программисты: 

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

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

3. Яндекс Метрику подключили так, чтобы она не собирала данные на тестовых ресурсах. Работали в связке с директологами и аналитиками от другого подрядчика Мосокон, по их подробному ТЗ. 

4. Также на сайте использовали телефонию от Calltouch, настроили передачу всех заявок с сайта.

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

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

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

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

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

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

Наша большая работа еще не окончена: новые страницы на сайте появляются и сегодня. Команда работает над проектом full-time. По итогу первого периода работы, представители «Мосокон» отмечают, что стало гораздо удобнее пользоваться сайтом на любом устройстве. В разы повысилась конвертируемость нового сайта по сравнению с его прошлой версией.