Редизайн сайта производителя опалубки

Если сайт не соответствует духу времени, это всегда заметно. И дело даже не в красоте: устаревший сайт влияет на доверие пользователей к компании, ведь сайт - это проекция образа компании в целом. 

Не так давно мы сделали редизайн сайта производителя опалубки перекрытий. Расскажем чётко и по шагам: как было, как стало, что дало.

Клиент: 

производитель опалубки “Базис Холдинг”. Действительно производитель (не реализатор), с большими производственными мощностями.

Задача: 

1. Провести редизайн сайта, сделать его более удобным для поиска продукции и дополнительных услуг;

2. Сделать возможность удобной работы с заявками, как для пользователя сайта, так и для обрабатывающих заявки менеджеров;

3. Внедрить адаптивный дизайн, устранить ошибки вёрстки и логики. 

Реализация:

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

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

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

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

Мы прибегли в работе к идеальному сценарию, в котором на каждом этапе работы специалистов происходит контроль со стороны SEO оптимизатора.

Мы составили ТЗ для разработки нового сайта, в котором были учтены все SEO требования, направленные на сохранение сайта в результатах поисковой выдачи, а именно:

Для важных с точки зрения поиска продуктовых страниц сохраняем прежний уровень вложенности;

Для всех страниц сохраняем прежние URL адреса. В случае, если прежний URL не удается заменить, настраиваем 301 редиректы со старых страниц на новые.

Не заменяем полностью и радикально весь контент страниц. Корректируем контент, адаптируем под новую структуру и дизайн, но не изменяем его полностью, сохраняя не менее 50% прежнего текста.

Все мета-теги и заголовки со старых страниц переносим на новые страницы.

В результате после редизайна поисковый трафик не уменьшился, а спустя два месяца после переезда на новый сайт вырос на 30%.

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

Подготовка в работе

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

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

Это было сложно, но очень интересно! И сейчас мы могли бы вас проконсультировать по любым вопросам опалубки, но все-таки, порекомендовали бы обратиться в Базис Холдинг, так как там работают реально крутые специалисты и просто отличные, приятные ребята :)

До и после

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

PS: в самом низу кейса, в блоке “Демонстрация макета” вы сможете просмотреть макеты всех страниц с бОльшем разрешении. 

Главная страница

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

1. Презентация продуктов  и нацеленность на продажи

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

2. Презентация компании

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

3. Демонстрация опыта и экспертности

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

4. Простота оставления заявки или совершения заказа

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

1. Позвонить по номеру телефона, находящемуся в шапке, футере, на странице  Контакты, а также на странице “Сотрудники”;
2. Написать на email;
3. Оставить заявку, используя несколько типов форм обратной связи:

• Заказ звонка;
• Заявка на бесплатный расчет;
• Заявка на бесплатную консультацию, с возможностью выбора сотрудника (менеджера), которому уйдет заявка.

5. Простота дальнейшего управления и наполнения сайта и стиль

Очень важно, чтобы в будущем клиент не сталкивался с трудностями при работе с сайтом. Добавление новых товаров, услуг, статей и новостей - все делается в удобном админском интерфейсе, без больших трудозатрат и без помощи дизайнера и разработчика. Это относится не только главной страницы, но и всего сайта в целом. При разработке использовалась CMS Битрикс, была настроена удобная админка для быстрого создания любого типа материала.

Также в рамках дизайна мы создали иконки для визуализации всех продуктов и услуг компании.

Ну и в итоге, посмотрите результат в сравнении:

Каталог продукции

Не будем долго останавливаться на каталоге, просто покажем “до и после” и остановим ваше внимание на том, что каталог 1 уровня выполнен таким образом, что из него можно перейти не только в подкатегории, но и во вложенные карточки продуктов. Это позволяет перейти сразу в карточку продукта, минуя этап перехода в каталог 2 уровня.

Карточка продукта

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

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

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

Далее - блок с этапами заказа. Пользователю должно быть понятно, как происходит заказ: последовательность и этапы.

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

А теперь посмотрите результат редизайна карточки товара в сравнении:

Страница “Калькулятор”

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

Разработкой калькулятора мы преследовали 2 основные цели:

1. Сократить время ожидания расчета пользователями: раньше все расчеты делались вручную, в excel. Соответственно, между отправлением заявки и обратной связью с первичными расчетами, проходило достаточно длительное время. Калькулятор же дает возможность получить первичный расчет моментально.
2. Собрать лиды. Мы не стали выводить результаты расчета сразу пользователям на сайте. Для получения расчета, пользователь должен оставить свой email, на который приходит автоматически сгенерированный расчет в виде красивого файла. Файл содержит несколько вариантов расчета, с различными комбинациями ячеек (зависящими от длины ригелей). 

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

Страница “О компании”

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

• Добавили блок с основными преимуществами компании;
• Блок с информацией о перечне производимой продукции;
• Блок с информацией о перечне производимой продукции;
• Вывели блоки с главной страницы с проектами компании и формой обратной связи.

Раздел  “Услуги”

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

С этой целью был разработан каталог услуг и заполнены карточки услуг, опираясь на ТЗ от SEO аналитиков. 

Раздел  “Проекты”

Раздел проектов (кейсов) состоит из каталога и отдельной карточки с описанием проекта.

Каталог проектов мы изменили не только визуально, но и функционально: 

• Добавили сортировку проектов по типам
• Добавили описание (анонс) к каждому проекту

В карточке проекта реализовали: 

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

Раздел “Документы”

Страница, которая содержит лицензии, сертификаты компании, а также документацию на продукцию, которую можно посмотреть или скачать.

Страница “Контакты”

Страница “Спецпредложения”

На прежнем сайте спецпредложения были “спрятаны” в раскрывающихся блоках. Это было крайне неудобно. Мы сделали страницу с акциями более дружелюбной и понятной для пользователей:

Раздел “Новости”

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

Мы разработали раздел статей и новостей с удобным добавлением материалов в админке. Раздел разделен на подкатегории для удобства размещения статей различной тематики. И конечно, у каждой создаваемой статьи сейчас есть отдельная страница, и раздел можно использовать для SEO продвижения сайта.

Страница “Команда”

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

Все-таки сайты, содержащие реальные лица, вызывают больше доверия.

Результаты 

В завершении, давайте пройдемся по результатам нашей работы :) 

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

Но, считаю, нам есть, чем гордиться:

• Удобная навигация по сайту и проработанный каталог продукции и услуг, а также современный дизайн привели к тому, что пользователи стали находиться на сайте на 39% больше времени.
• Новые блоки с мотивационной информацией, формы заказа и калькулятор предварительного расчета увеличили конверсию в 2,2 раза.