Большая разработка большого сайта
Производитель пластиковых окон «Мосокна»РазработкаB2CИнтернет-магазинСтроительство и ремонтBitrixФреймворки
Предполетный бриф
Мосокна создали первое пластиковое окно в России в далеком 1992 году.
С тех пор компания открыла 2 собственных производства, помогла 3 миллионам клиентов, нарастила объемы до 260 000 изделий в год.
Инструменты и технологии
Ключевой запрос клиента
Полный цикл разработки за 8 месяцев. Цель — создать современный и быстрый сайт, безболезненно переехать и не потерять позиции в поисковиках.
Особенности проекта
Новый сайт мы разработали на фреймворках — React и Next.js. У такого стека много плюсов:
- высокая скорость загрузки,
- красивая анимация,
- возможность добавить любой бэкенд — мы оставили 1С:Битрикс.
Рабочий процесс
Особенность нашей истории — работа с несколькими командами. В проекте также принимали участие сотрудники «Мосокон» и другие подрядчики. На весь цикл разработки мы выделили 8 человек: фронтенд- и бэкенд-программистов, дизайнера, аккаунт- и проджект-менеджеров. Процессы выстроили так:
- Получаем общую концепцию UX/UI от Мосокон.
- Рисуем страницы вместе с инхаус-дизайнерами компании.
- Верстаем сайт и пишем фронт целым отделом программистов.
- Переносим контент в админ-панель.
- Интегрируем фронт- и бэкенд.
- Настраиваем работу внутренних сервисов.
- Тестируем и принимаем правки от аналитиков и директологов.
Взаимодействие с командой клиента — это всегда интересная задача для менеджера. Организовать работу нужно так, чтобы каждый знал свою зону ответственности, соблюдал дедлайны, прислушивался к коллегам. И чувствовал, что вместе мы делаем большое дело — создаем крутой и полезный продукт для миллионов пользователей. В этом проекте так и получилось — чему я очень рада.
Этап I: дизайн
Заметнее всего изменилась главная страница — исчезли устаревшие иконки, слипшиеся блоки, некликабельные баннеры. В дизайне появилось больше воздуха и анимации. Сохранились фирменные цвета компании «Мосокна» — белый, серый, красный.
На сайте более 118 уникальных страниц: на них не повторяется структура и контент. Так они выше ранжируются в поисковиках и получают больше органического трафика. При создании страниц мы учли все требования SEO-специалистов и маркетологов.
Акционные страницы проектировали как самостоятельные лендинги — на них регулярно льется рекламный трафик. На них добавили все необходимые блоки: онлайн-помощника, конверсионные кнопки, формы обратной связи.
Не забыли и о навигации пользователей по сайту. Отдельно проработали шапку — настроили удобную визуализацию и плавный переход от одного раздела к другому.
Этап II: разработка
Построили такую схему работы: дизайнеры сдают страницу, фронтенд-программисты верстают и пишут логику на React, тестировщики проверяют баги, контент-менеджеры переносят содержимое страницы в админ-панель, бэкенд-разработчики пишут API и передают его на фронт. Последний этап — еще одно комплексное тестирование.
От серьезных ошибок нас обезопасили особенности стека: при разработке на Next.js невозможно сохранить проект с ошибками функционала.
Любому программисту интересно работать с самыми свежими и актуальными технологиями. Я рад, что клиент разделяет наши взгляды. Он понимает, как важно получить быстрое, современное и легко масштабируемое приложение
На новом сайте используется Incremental Static Regeneration (ISR). Технология позволяет обновлять статические страницы после разработки сайта. Программист может зайти в админ-панель, внести правки и отправить запрос на ревалидацию. На сайте обновится только нужный фрагмент — без лишних запросов и обменов данными. Эта технология — одна из причин выбора Next.js, ведь она не используется в других фреймворках.
Страницы никогда не перезагружаются. Пользователи получают универсальный опыт — такой же, как в веб-приложениях гигантов рынка вроде Ozon или Wildberries.
Мы использовали админ-панель Битрикса для комфортного редактирования контента. Вдобавок написали собственное API для передачи данных на фронтенд в формате JSON. Интегрировали бэкенд с внутренней CRM и сервисами компании.
Позаботились и о контент-менеджерах «Мосокон»: настроили и оптимизировали админ-панель. Помимо стандартных средств администрирования сайта на Битриксе, мы интегрировали визуальный редактор текста Editor.js. На его основе работают редакторы vc.ru, Tinkoff Journal и DTF.
Тестировщики прогнали сайт через несколько кругов проверки, чтобы убедиться: в карточках товаров актуальные цены, калькулятор отдает нужные данные, а в корзине отображаются верные расчеты.
Этап III: работа с сервисами
Успешное создание заказа — самое важное конверсионное действие в системе. Чтобы оно всегда срабатывало верно, программисты:
На сайте работает интернет-эквайринг Альфа-банка. Весь дизайн на сайте уникальный — как и форма оплаты. Для интеграции использовали REST API Альфа-банка. Детали и статусы оплат кэшируются в админ-панели, настроено callback-уведомление от банка. После его получения сайт обновляет статус оплаты в базе данных и отправляет уведомление в CRM.
Работали в связке с директологами и аналитиками от другого подрядчика Мосокон. Яндекс Метрику подключили так, чтобы она не собирала данные на тестовых ресурсах. Настроили цели по подробному ТЗ от аналитиков.
Главная задача — корректный анализ источников лидов. Для этого на сайте использовали телефонию от Calltouch, настроили передачу всех заявок с сайта.
Представьте, лид из контекстной рекламы попадает на сайт и переходит в мессенджер. В таком сценарии штатными методами невозможно отследить источник лида. Мы добавили идентификатор сессии в предустановленные сообщения от пользователя в WhatsApp. Менеджеры Мосокон фиксируют номер клиента в CRM, а оттуда лид попадает в систему сквозной аналитики. Теперь там всегда виден источник лида.
Все договоры Мосокон заключаются на сайте по 3 сценариям: юрлицо, физлицо, рассрочка. Пользователь получает ссылку на подписание договора, знакомится с офертой и другими документами. Затем подтверждает согласие через ввод кода из СМС-сообщения и оплачивает заказ. В сценарии с рассрочкой пользователь оформляет ее прямо на сайте, а затем подписывает договор онлайн.
У компании есть реферальная программа, в которой могут принять участие юрлица. Все этапы проходят на сайте: регистрация новых партнеров, отправка карты потенциальному клиенту, заявка покупателя, отслеживание истории заказов.
Все заявки с сайта попадают в CRM. При настройке передачи данных мы учли пожелания клиента и добавили в поля заявки:
- идентификатор формы,
- UTM-метки,
- страницу заявки,
- IP-адрес пользователя.
Самый большой плюс проекта — лояльная и отзывчивая команда клиента. Цели поставили амбициозные: нелегко разработать такой большой сайт за 8 месяцев. Были включены несколько команд, и все ребята показали 100% отдачу, взаимовыручку и поддержку. Однозначно, это один из лучших опытов большой работы в синергии.
Этап IV: запуск
В этом проекте мы решили не делать классический релиз. После тестирования добавили на старую версию сайта кнопку-баннер: с ней можно перейти на новую версию сайта.
Для 30% пользователей добавили сценарий: всплывающее окно предлагает им покинуть старый сайт и пользоваться новым. Возможность переключения между версиями оставили на 1 месяц. Так мы можем выявить и исправить баги, проанализировать поведение пользователей, доработать дизайн и функционал нового сайта.
Оцениваем результат
Наша большая работа еще не окончена: новые страницы на сайте появляются и сегодня. Выделенная команда работает над проектом full-time — больше о ее задачах можно узнать здесь.
