С момента разработки первого сайта компании WiseAdvice-IT прошло восемь лет. Мы хотели придать сайту современный вид, поддерживая целостность бренда и обновив фирменный стиль. Хотелось добавить свежести и подчеркнуть технологичность компании.
Мы решили обновить не только дизайн, но и всю техническую часть сайта под новые задачи — реализовать конструктор блоков, который позволил бы снизить издержки на работу с контентом. Это позволит маркетологам и контент-менеджерам самостоятельно собирать лендинги, не задействуя дорогие ресурсы разработчиков.
Также стояла задача рефакторинга старого кода. Обновление кода позволило бы отказаться от накопленного багажа ошибок, которые вылезают регулярно при работе с сайтом, а также улучшить производительность, чтобы справляться с пиковыми нагрузками и повысить скорость загрузки страниц.
Кроме того, мы решили объединить HR-маркетинг и клиентское направление на одном сайте, которые до настоящего времени являлись отдельными направлениями, имели различное позиционирование и решали разные задачи.
И как дополнительный бонус — за счет современного дизайна и улучшения производительности повысить конверсию сайта, чтобы привлечь новых сотрудников в компанию и получить больше проектных клиентов.
Сегодня расскажу об этапах и сложностях, с которыми столкнулись в процессе пересборки сайта компании, который имеет ряд уникальных особенностей, не характерных для B2B сегмента.
Обновили дизайн: от старого legacy к новой навигации и стилю
Сайт нуждался в редизайне, так как за восемь лет накопил много legacy. Бизнес запросил обновление, чтобы адаптировать структуру под новое позиционирование и улучшить навигацию для пользователей, которые искали услуги в сфере автоматизации 1С.
Перед началом работ провели исследование: изучили поведение пользователей через Вебвизор и тепловые карты. Однако полная реорганизация страниц потребовала бы значительных усилий, поэтому от неё отказались. Сфокусировались лишь на ключевых страницах, чтобы не ухудшить пользовательский опыт.
Также провели большой ресерч конкурентов и посмотрели как они подают информацию и какие механики используют в навигации, фильтрах и наименовании пунктов меню.
На основе собранных данных приступили к редизайну, держа в голове следующие улучшения:
- Улучшили навигацию: заменили главное меню на более структурированное и логичное.
- Переработали фильтрацию кейсов, добавили новые отрасли, что упростило навигацию для разных типов пользователей.
- Изменили визуальную сетку сайта — её адаптировали под современные устройства, сделав шире и удобнее.
- Обновили фирменный стиль компании, добавив IT-элементы в виде mindmap, чтобы визуально подчеркнуть специализацию компании.
Отдельное внимание уделили блогу, так как на него приходилось много трафика. Для повышения читабельности увеличили шрифты и межстрочное расстояние. Также было внесено множество микроулучшений для комфортного восприятия контента.
Основные сложности на этапе дизайна были связаны с ограниченными сроками и высоким риском потери трафика при серьёзных изменениях.
Чтобы минимизировать риски, команда сохранила часть старого контента и элементов, которые можно было бы заменить, но которые могли бы негативно повлиять на пользовательский опыт. Визуальные изменения снизили когнитивную нагрузку без радикальной переработки блоков.
Одним из ключевых улучшений стало использование компонентов в Figma. Это сократило время на создание новых страниц, а процесс масштабирования дизайна получился быстрым и эффективным.
Сделали внутренний конструктор, чтобы маркетологи могли работать с контентом без разработчиков
Мы разработали конструктор страниц с набором типовых блоков и внедрили его в привычную административную панель Битрикса. Теперь маркетологи и контент-менеджеры могут самостоятельно верстать лендинги и статьи в новом дизайне без участия разработчиков.
К примеру, теперь можно собрать страницу, добавив типовые блоки. Редактору останется заполнить поля контентом — указать заголовок, текст, название и тип кнопок, добавить картинку или иконки, выбрать позиционирование элементов и число колонок. При этом блоки сохранятся в новом дизайне, а в верстке ничего не сломается.
Мы также подготовили набор преднастроенных блоков, редактировать которые не нужно. Можно добавить блоки с кейсами, логотипами и отзывами клиентов или статусами 1С. Такие блоки появятся на странице с заполненной информацией, и ничего править не нужно.
В таком конструкторе можно создавать не только продуктовые лендинги или типовые информационные страницы со статьями и новостями, но и страницы под задачи HR-маркетинга — публиковать открытые вакансии, обновлять грейды или запускать онлайн-мероприятия.
Подобрали технический стек, чтобы улучшить производительность сайта и справиться с нагрузками
Старая версия сайта работала на системе CMS 1С-Битрикс. Мы не хотели переезжать на что-то другое, поэтому новый сайт реализовали также на Битриксе. Причин остаться было несколько:
- Опыт команды: Контент-менеджеры и маркетологи уже имели опыт работы с интерфейсом 1С-Битрикс, и переезд на другую платформу потребовал бы время на обучение.
- Ресурсы: Можно было бы использовать PHP-фреймворки, такие как Laravel, Yii, Symfony, но на кастомизацию ушло бы больше ресурсов, и соответственно такое решение стоило бы дороже.
Уникальность проекта заключалась в том, что мы перенесли много legacy-кода со старого проекта, а также реализовали кастомный функционал — интеграции, уникальный конструктор, массовое изменение цен по ID, кэширование и т.д. Из готового использовали только несколько стандартных модулей из коробки.
Верстку делали с использованием HTML, CSS, JavaScript, сборщика Gulp, шаблонизатора Pug, препроцессора SCSS, Ajax для обновления данных без перезагрузки, а для интеграций использовали Rest API.
Естественно, в разработке важен не только выбор технологий, но и внутренние регламенты, стандарты и методологии их использования. Мы работали по Agile — планировали еженедельные спринты, проводили встречи по наполнению, обсуждали план действий, актуализировали статус задач и приоритизировали бэклог.
Все этапы и сроки проекта фиксировали на диаграмме Ганта, а задачи и статусы детализировали на Канбан-доске в Jira, к которой у всей команды был доступ. Формирование списка задач и отслеживание общего плана проводили в формате еженедельной встречи по планированию спринта.
Объединили клиентское направление и HR-маркетинг в один сайт
У нас была задача объединить карьерный сайт и клиентское направление компании под единым сайтом. Хотелось, чтобы страницы с вакансиями можно было собирать на конструкторе, и сделать это мог любой сотрудник — от контент-менеджера до HR-специалиста, без знания инструментов верстки.
Мы создали набор карьерных блоков в конструкторе и перенесли все разделы со старого сайта с Тильды в Битрикс. Теперь редактор может размещать и редактировать вакансии, верстать новые страницы, публиковать интервью сотрудников, делиться видеозаписями выступлений или исследованиями отрасли.
Второй задачей было сосредоточить маркетинговые усилия на одном сайте, чтобы не размывать фокус на два разных проекта, а направлять посетителей на один домен. Это должно повысить показатели трастовости, цитирования и поведенческие метрики для основного сайта.
Например, несколько раз в год мы проводим митапы для специалистов 1С. На такие мероприятия регистрируются тысячи участников. В этот период мы подключаем разные каналы лидогенерации: таргет, контекст, рассылки, посевы и много чего еще. Мы хотим, чтобы этот трафик положительно влиял на показатели клиентского сайта.
В объединении сайтов есть еще одно преимущество — внутренний трафик клиентского сайта составляет сотни тысяч пользователей ежемесячно. Среди них линейные специалисты 1С, которым теперь намного легче найти открытые вакансии и другие HR-активности компании.
С другой стороны, среди аудитории участников митапов есть потенциальные заказчики на проектные услуги. По нашим данным, около 20% зарегистрированных участников — это собственники компаний и руководители подразделений из разных секторов экономики. Такое вот выгодное взаимное усиление.
Перенесли 400+ коммерческих страниц на обновленные блоки
Старая версия сайта была также реализована на конструкторских блоках. Чтобы не пересобирать вручную все страницы, сначала мы отрисовали новый дизайн для всех текущих блоков в Фигме, а потом сверстали их.
Когда мы подсчитали количество страниц, для которых требовалась замена старых блоков на блоки в новом дизайне, то набралось больше четырехсот страниц. Чтобы пересобрать эти страницы на новых блоках, потребовался бы какой-то невероятный человеческий ресурс.
Мы стали думать, как обновить страницы и минимизировать ручной труд команды. Решили сопоставить старые и новые блоки и попросить разработчиков настроить автоматический перенос и замену новых блоков вместо старых, но с сохранением контента и функциональности.
Автоматический перенос сэкономил сотни часов времени команды, но без ручной работы не обошлось. После переноса мы пробежались по страницам и сформировали внушительный баг-лист с несколькими сотнями записей.
После исправления критических пунктов мы вновь проверили перенесенные страницы, сравнивали контент со старым сайтом и внесли изменения. После трех итераций: проверка, фиксация багов, исправление и повторное тестирование — мы получили высокое качество собранных страниц в новом дизайне.
Перенесли 1600 материалов блога со старого сайта и проверили корректность их структуры и наполнения
В блоге компании были статьи экспертов, новости и релизы, которые нужно было перенести на новый сайт, при этом не потеряв трафик и позиции в поисковых системах. Всего оказалось около 1600 таких материалов.
Мы написали скрипт для автоматического переноса контента. Это освободило часть команды от ручного переноса, но потребовало последующей проверки перенесенных страниц. Мы решили проверить корректность переноса заголовков и подзаголовков, информационных блоков и врезок.
Дальше мы собрали в Google Таблице все страницы старого и нового сайта и сравнили их по блокам. Красным цветом подсветили элементы, которые отсутствовали или отличались от старого сайта. Получили карту с URL-ами, на которых контент отличался.
Например, мы заметили, что изменились теги подзаголовков — на старом сайте был заголовок H2, а на новом он стал H3. Или наоборот, появились элементы, которые были в DIV, а стали в теге H2. После переноса пропали видео и врезки, сломались маркированные списки и коммерческие баннеры.
По аналогии с лендингами, все информационные страницы с ошибками мы проверили вручную и поправили информацию, приведя её к соответствию и нужному виду.
Настроили функционал для автоматической смены цен и тарифов в блоках и таблицах
Несколько раз в год фирма 1С обновляет цены на программы. Неукоснительно все франчайзи должны менять тарифы на своих сайтах. Если этому правилу пренебречь, то гарантированно прилетят предупреждения, а потом и штрафы. Могут и вовсе наложить запрет на продажу программ. В общем, всё серьёзно.
Каждый такой апдейт тарифов отнимает много времени. Нужно вручную менять цены во всех блоках, тарифных сетках и таблицах сравнения продуктов. На такую задачу мы выделяли отдельного человека, который один раз в полгода проверял несколько сотен страниц с программами и менял на них цены.
Мы решили учесть это перед разработкой и описали в ТЗ функционал для автоматической замены цен на сайте. Реализовали это так: сначала привели все блоки с ценами к единому виду, добавив дополнительное поле, куда проставляли для каждой программы уникальный идентификатор.
Дальше создали справочник со всеми продаваемыми программами в админке и добавили для каждой программы возможность менять цену. Теперь алгоритм автоматически обновляет цены во всех блоках на сайте, в которых содержится уникальный для нужной программы ID.
Благодаря этому решению мы отказались от ручного обхода всех страниц и сэкономили время нашим сотрудникам, а также снизили возможность ошибки ручного ввода. Теперь мы можем менять цены в одном месте намного быстрее.
Учли требования SEO для сохранения позиций в поисковой выдачи Яндекса и Гугла
Поисковые системы остаются для нас основным источником трафика, поэтому сохранение позиций и улучшение индексации сайта являются ключевыми задачами обновления.
Мы описали требования по переносу мета-тегов и атрибутов, настройке URL-адресов страниц и редиректов, микроразметке, а также настройке хлебных крошек, служебных файлов sitemap.xml и robots.txt. Также учли требования по формированию сниппетов в результатах поиска.
Особое внимание уделили переносу контента. На сайте компании было много статей, инструкций, кейсов и отраслевого опыта, новостей, анонсов релизов и записей вебинаров. Все эти страницы нужно было перенести на новый сайт и при этом не потерять трафик.
Мы постарались сохранить структуру заголовков и подзаголовков, перенести тексты и сохранить внутреннюю перелинковку, изображения, видео и баннеры с продуктами. Сложность добавляло еще и то, что мы объединяли два сайта под одним доменом, и важно было настроить переезд страниц на новый сайт.
Чтобы не допустить, что какая-то страница потерялась при переезде и стала выдавать ошибку 404, мы настроили карту редиректов, чтобы страницы проиндексировались под новыми URL, и мы не потеряли трафик со старых страниц.
Настроили интеграции со сторонними системами и настроили веб-аналитику
Сайт имеет возможность обмениваться данными с другими системами через внешние интеграции. Простой пример — это передача заявок с сайта в корпоративную CRM-систему, где менеджеры обрабатывают обращения клиентов и ведут продажи.
Мы настроили отправку JSON-событий для всех клиентских форм. Вместе с контактной информацией пользователя в CRM передается множество дополнительных данных: источник лида, страница входа, страница отправки события, страна, город и IP-адрес.
Также мы реализовали интеграцию HR-лендингов с системой автоматизации подбора сотрудников E-Staff. Ранее формы были настроены в Тильде, но после переезда на 1С-Битрикс потребовалось обновить механизм обмена данными, чтобы HR-специалисты могли продолжать получать отклики от соискателей в привычной рабочей среде.
Кроме того, мы осуществили интеграцию по API с сервисом почтовых рассылок Юнисендер. После регистрации на онлайн-мероприятие или подписки на рассылку данные пользователя автоматически попадают в список контактов. В дальнейшем пользователям отправляются преднастроенные цепочки писем.
Коды счетчиков систем аналитики, таких как Яндекс.Метрика и Google Analytics 4, а также пиксели рекламных систем и виджет онлайн-чата были централизованно подключены маркетологами через Google Tag Manager без привлечения разработчиков.
Только часть кастомных событий была настроена с помощью дополнительных JS-скриптов, которые были разработаны по запросу команды. Например, это касается отслеживания смены региона в шапке и подвале сайта, а также взаимодействия с некоторыми кнопками.
Оптимизировали скорость загрузки страниц и проверили сайт на производительность
Сразу после релиза мы попросили разработчиков провести нагрузочное тестирование нового сайта. Оказалось, что сайт хорошо справляется с увеличением трафика в 2 раза. Однако при повышении пиковых нагрузок, когда количество пользователей возрастает в 3 раза, сайт начинает падать.
С одной стороны, сайт полностью справляется с текущими объемами трафика, и мы можем значительно масштабировать аудиторию. Но в случае каких-либо внештатных ситуаций, например, резких скачков трафика или DDoS-атак, к сожалению, сайт уже не выдержит.
Обычно защитой от DDoS-атак занимается хостинг, Bitrix в этом плане не обладает достаточной защитой. Видимо, нам всем придется предпринимать какие-то меры для улучшения безопасности сайта.
Перенесли региональность, реализовали адаптацию размера заголовков, логирование форм и много чего ещё
На новом сайте мы реализовали несколько других важных для маркетинга и работы сайта функций. Кратко перечислю их в заключительной части статьи.
Мы настроили адаптацию размера заголовков для типовых конструкторских блоков. Это позволяет оптимизировать работу с контентом и стилями. Также было реализовано логирование форм, чтобы не терять заявки и обращения от пользователей в случае, если на сайте возникнут проблемы с формами.
Мы перенесли региональный функционал со старого сайта, который автоматически определяет регион визита по IP-адресу. Это позволяет персонализировать заголовки, контактную информацию и цены на программы с учетом региональной сетки тарифов, принятой 1С.
Кроме того, мы реализовали автоматическую проверку форм на всех страницах. Теперь ключевые сотрудники и команда разработки ежедневно получают отчет о работе всех типов форм на сайте. Если какая-то форма выходит из строя, мы это быстро замечаем и можем оперативно исправить.
Также мы настроили сохранение изображений в формате WebP, который основан на продвинутом алгоритме сжатия. Этот формат уменьшает размер файла без потери качества. WebP по детализации и цветопередаче сопоставим с PNG, но размер файлов меньше на 30%. Благодаря этому страницы загружаются быстрее.
Выводы
Мы выбились из отведенного графика в два раза. Этапы тестирования и дебаггинга потребовали больше времени, чем мы закладывали на старте проекта. Исходя из этого, хочу поделиться некоторыми наблюдениями:
- Не передавайте подготовку технического задания команде разработки. Только заказчик должен быть техническим писателем и формулировать требования к новой системе.
- Время каждого проекта можно смело умножать на два. Например, если запланирована разработка и релиз за 3 месяца, на практике это может занять 6 месяцев.
- Более 90% времени разработки уходит на исправление ошибок в написанной системе. Учтите это в своих планах.
- Независимо от обещаний команды разработки, тестированием сайта придется заниматься вашей команде: маркетологам, контент-менеджерам и даже SEO-специалистам.
- В процессе разработки у команды могут возникать дополнительные «хотелки», которые не вошли в итоговое ТЗ. Все эти пожелания должны отправляться в бэклог и не выходить за его пределы. Важно донести до команды, что сейчас мы работаем только по ТЗ, а после релиза возьмем задачи из бэклога на второй этап.
- Если сроки поджимают, а продукт нужно сдать вовремя, то от какой-то части функционала нужно отказаться, понизить приоритет и перенести на второй этап. Готовьте к релизу только функции, которые жизненно необходимы для работы сайта. Все второстепенные задачи откладывайте на второй этап.
- Проект должен иметь промежуточные контрольные точки. Указать их можно в техническом задание или на диаграмме Ганта, но без них никак. Промежуточные даты помогут своевременно выявить проблемы и решить их на ранних этапах.
Проект получился уникальным для российского рынка благодаря внедрению множества нестандартных функций, которые значительно расширяют возможности типового 1С-Битрикс. Все доработки не только улучшили функциональность платформы, но и позволили создать продукт, который соответствует задачам бизнеса.
Статьи по теме:
- Опыт импортозамещения иностранного ПО: как получить клиентов на 324 млн. рублей
- Как мы продавали услуги и программы 1С для B2B через объявления на Авито
- VK Ads и ВКонтакте PRO — сравниваем эффективность нового и старого кабинетов
- Запустил Email-рассылку: делюсь результатами за год
- Как увеличить доходимость участников на онлайн-мероприятие