- Заказчик
- Производитель опалубочных систем для строительства с собственной производственной базой.
- Задача
- Разработать новый дизайн сайта для производителя опалубки.
Если сайт не соответствует духу времени, это всегда заметно. И дело даже не в красоте: устаревший сайт влияет на доверие пользователей к компании, ведь сайт - это проекция образа компании в целом.
Не так давно специалисты рекламного агентства Зекслер сделали редизайн сайта производителя опалубки перекрытий. Расскажем чётко и по шагам: как было, как стало, что дало.
Клиент:
производитель опалубки Базис Холдинг. Действительно производитель (не реализатор), с большими производственными мощностями.
Задача:
1. Провести редизайн сайта, сделать его более удобным для поиска продукции и дополнительных услуг;
2. Сделать возможность удобной работы с заявками, как для пользователя сайта, так и для обрабатывающих заявки менеджеров;
3. Внедрить адаптивный дизайн, устранить ошибки вёрстки и логики.
Реализация:
Глобальная цель доработки сайта - привлекать больше клиентов. Мы не откроем секрет, сказав что проработка юзабилити сайта позволяет удержать посетителей на сайте, повышает его конверсию, положительно влияет на поведенческие факторы и влияет на результаты продвижения сайта.
В нашем случае у клиента уже был сайт с устаревшим дизайном и плохо проработанным каталогом и контентом. Мы провели анализ сайта и создали перечень доработок, которые необходимо внести в структуру, дизайн и контент сайта. В результате мы получили довольно объемный список работ, который по трудозатратности приравнивался к разработке нового сайта.
Вместе с клиентом мы решили, что разумнее станет разработать новый сайт на Битрикс с адаптацией и переносом контента, без потери поискового трафика.
Снижение поискового трафика после редизайна сайта или разработки нового сайта - частая история. Это происходит потому, что при разработке сайта думали о красоте и удобстве, но про SEO забыли. В результате - внешний вид сайта может улучшиться, но с точки зрения поискового спроса сайт потеряет позиции.
Мы прибегли в работе к идеальному сценарию, в котором на каждом этапе работы специалистов происходит контроль со стороны SEO оптимизатора.
Мы составили ТЗ для разработки нового сайта, в котором были учтены все SEO требования, направленные на сохранение сайта в результатах поисковой выдачи, а именно:
Для важных с точки зрения поиска продуктовых страниц сохраняем прежний уровень вложенности;
Для всех страниц сохраняем прежние URL адреса. В случае, если прежний URL не удается заменить, настраиваем 301 редиректы со старых страниц на новые.
Не заменяем полностью и радикально весь контент страниц. Корректируем контент, адаптируем под новую структуру и дизайн, но не изменяем его полностью, сохраняя не менее 50% прежнего текста.
Все мета-теги и заголовки со старых страниц переносим на новые страницы.
В результате после редизайна поисковый трафик не уменьшился, а спустя два месяца после переезда на новый сайт вырос на 30%.
Более подробно про продвижение и рекламу можно почитать в нашей другой интереснейшей статье. А сейчас давайте все же перейдем к редизайну и разработке, расскажем о процессе и результатам, и покажем наглядно, что было и как стало.
Подготовка в работе
Самый сложный этап в разработке прототипов и дизайна заключался в погружении в проект. Менеджер проекта (и по совместительству, проектировщик интерфейсов, работающий над прототипами), провел немало часов, изучая тонкости производства опалубки перекрытий. В итоге, перед началом работы, мы имели практически полное представление обо всех видах опалубки, ее особенностях и отличиях, как она собирается - разбирается, за счет чего достигается прочность конструкции, и даже знали названия и назначения всех составных частей, и как они взаимодействуют друг с другом.
Позже, при разработке калькулятора опалубки перекрытий, мы даже изучили все подробности о том, как рассчитывается нагрузка, учитывая плотность бетона, динамическую нагрузку от подачи бетона, дополнительную нагрузку от людей, арматуры, и т.д., и научились делать расчет опалубки, подбирая идеальную комбинацию номенклатуры для получения оптимального соотношения цены и устойчивости конструкции.
Это было сложно, но очень интересно! И сейчас мы могли бы вас проконсультировать по любым вопросам опалубки, но все-таки, порекомендовали бы обратиться в Базис Холдинг, так как там работают реально крутые специалисты и просто отличные, приятные ребята :)
До и после
А сейчас давайте все же перейдем дизайну и покажем, что было и как стало. Карта нового сайта расширилась, так как помимо редизайна существующих ранее страниц, мы разработали новые разделы и страницы.
PS: в самом низу кейса, в блоке “Демонстрация макета” вы сможете просмотреть макеты всех страниц с бОльшем разрешении.
Главная страница
Главная страница, как впрочем и все остальные страницы, полностью изменила структуру и дизайн. В процессе проработки главной страницы, мы ставили перед собой несколько глобальных задач:
1. Презентация продуктов и нацеленность на продажи
Сайт должен с главной страницы показывать “товар лицом”, решать проблемы покупателей, быть простым с точки зрения навигации, продающим и адаптивным.Все продукты и услуги компании должны находиться в быстром доступе со всех страниц сайта. Мы вывели продукты и услуги в хорошо структурированный каталог в навигационное меню, а также добавили карточки категорий и товаров на главную страницу:
2. Презентация компании
Сайт должен в полной мере отражать производственную и конструкторскую мощь завода, использование современных технологий, и создавать образ лидера отрасли. Пользователю с главной страницы должно быть понятно, что он находится на сайте производителя, а не посредника.
3. Демонстрация опыта и экспертности
Крайне необходимо показать, что компания действительно является крупным производителем, производит качественную продукцию, которую использую для крупных строительств.Для этого разработали раздел и блок на главной с кейсами использования продукции в крупных проектах.
4. Простота оставления заявки или совершения заказа
Пользователь должен иметь возможность совершить целевое действие быстро и доступно. Мы предоставили возможность пользователю обратиться в компанию различными способами:
- Позвонить по номеру телефона, находящемуся в шапке, футере, на странице Контакты, а также на странице “Сотрудники”;
- Написать на email;
- Оставить заявку, используя несколько типов форм обратной связи:
- Заказ звонка;
- Заявка на бесплатный расчет;
- Заявка на бесплатную консультацию, с возможностью выбора сотрудника (менеджера), которому уйдет заявка.
5. Простота дальнейшего управления и наполнения сайта и стиль
Очень важно, чтобы в будущем клиент не сталкивался с трудностями при работе с сайтом. Добавление новых товаров, услуг, статей и новостей - все делается в удобном админском интерфейсе, без больших трудозатрат и без помощи дизайнера и разработчика. Это относится не только главной страницы, но и всего сайта в целом. При разработке использовалась CMS Битрикс, была настроена удобная админка для быстрого создания любого типа материала.
Также в рамках дизайна мы создали иконки для визуализации всех продуктов и услуг компании.
Ну и в итоге, посмотрите результат в сравнении:
Каталог продукции
Не будем долго останавливаться на каталоге, просто покажем “до и после” и остановим ваше внимание на том, что каталог 1 уровня выполнен таким образом, что из него можно перейти не только в подкатегории, но и во вложенные карточки продуктов. Это позволяет перейти сразу в карточку продукта, минуя этап перехода в каталог 2 уровня.
Карточка продукта
Карточка продукта спроектирована в лендинговой блочной структуре. В верхней части страницы содержится основная информация о продукте, структурированная и разделенная по вкладкам: обор, преимущества, технические характеристики, состав системы, документация, фото.
Учитывая что компания производит разные категории продукции, и не ко всем типам товаров подошли бы стандартные вкладки с описанием, мы решили создать гибкую возможность изменять название и структуру вкладок в админке. Таким образом, в каждой карточке товара мы можем выводить только те вкладки, которые нам нужны, изменять их порядок и название.
Ниже - блок с текстовым описанием товара, который может использоваться, в том числе, под SEO текст. Рядом - важный информационно-мотивационный блок с формой обратной связи, призывающим оставить заявку на комплексное проектирование и мотивирующим выгодной ценой проекта в сравнении с конкурентами.
Далее - блок с этапами заказа. Пользователю должно быть понятно, как происходит заказ: последовательность и этапы.
Следом мы выводим блоки с общей информации о компании. Эти же блоки выводятся на главной странице, но мы посчитали важным вывести их в том числе на карточку товаров, так как названия всех карточек продуктов компании являются ключевыми поисковыми запросами. Следовательно, перейдя из поиска в карточку товара, пользователь должен сразу же увидеть не только информацию о продукте, но и мотивирующую к заказу информацию о компании производителе.
А теперь посмотрите результат редизайна карточки товара в сравнении:
Страница “Калькулятор”
Разработка этого раздела стала для нас очень интересной и нестандартной задачей, и она заслуживает отдельной статьи с подробным описанием, как это было :) Я обязательно расскажу об этом в деталях в скором времени, а сейчас расскажу коротко концепцию и покажу внешний вид.
Разработкой калькулятора мы преследовали 2 основные цели:
- Сократить время ожидания расчета пользователями: раньше все расчеты делались вручную, в excel. Соответственно, между отправлением заявки и обратной связью с первичными расчетами, проходило достаточно длительное время. Калькулятор же дает возможность получить первичный расчет моментально.
- Собрать лиды. Мы не стали выводить результаты расчета сразу пользователям на сайте. Для получения расчета, пользователь должен оставить свой email, на который приходит автоматически сгенерированный расчет в виде красивого файла. Файл содержит несколько вариантов расчета, с различными комбинациями ячеек (зависящими от длины ригелей).
Я не буду сейчас рассказывать о технической части разработки калькулятора, это я обязательно опишу в отдельном кейсе. Сейчас же речь про разработку сайта и дизайн:
Страница “О компании”
Страница с информацией о компании в прежнем варианте состояла из длинной портянки текста вперемешку с фотографиями. Мы сделали страницу четко структурированной: текстовое описание проработали и “свернули” часть под кнопку “Читать далее”. Таким образом, те пользователи, кому интересно прочитать весь текст, развернут его полностью, но при этом мы не будем заставлять его листать всю портянку текста.
- Добавили блок с основными преимуществами компании;
- Блок с информацией о перечне производимой продукции;
- Блок с информацией о перечне производимой продукции;
- Вывели блоки с главной страницы с проектами компании и формой обратной связи.
Раздел “Услуги”
В старом варианте сайта услуги были описаны очень кратко в текстовом виде на одной странице. Мы решили создать под услуги отдельный раздел, в котором у каждой услуги - свои отдельная страница. Предоставление услуг - второстепенная по важности задача для нашего клиента, однако с точки зрения SEO - это дает возможность создать страницы под важные поисковые запросы в разрезе предоставления услуг (аренда опалубки, расчет опалубки, аренда стоек, и т.п.)
С этой целью был разработан каталог услуг и заполнены карточки услуг, опираясь на ТЗ от SEO аналитиков.
Раздел “Проекты”
Раздел проектов (кейсов) состоит из каталога и отдельной карточки с описанием проекта.
Каталог проектов мы изменили не только визуально, но и функционально:
- Добавили сортировку проектов по типам
- Добавили описание (анонс) к каждому проекту
В карточке проекта реализовали:
- Большую фотогалерею проекта с возможностью добавлять описание к каждой фотографии.
- Текстовый блок, позволяющий описать задействованные в проекте продукты и технологии
- Блок с возможностью совершить целевое действие: оставить заявку на расчет комплексного проекта.
Раздел “Документы”
Страница, которая содержит лицензии, сертификаты компании, а также документацию на продукцию, которую можно посмотреть или скачать.
Страница “Контакты”
Страница “Спецпредложения”
На прежнем сайте спецпредложения были “спрятаны” в раскрывающихся блоках. Это было крайне неудобно. Мы сделали страницу с акциями более дружелюбной и понятной для пользователей:
Раздел “Новости”
На прежнем сайте раздел статей и новостей был реализован в виде открывающихся в поп-апе окошек с текстом. Соответственно, у статей не было отдельных индексируемых страниц и добавлением новых материалов на сайт не сказывалось на увеличении количества страниц в карте сайта.
Мы разработали раздел статей и новостей с удобным добавлением материалов в админке. Раздел разделен на подкатегории для удобства размещения статей различной тематики. И конечно, у каждой создаваемой статьи сейчас есть отдельная страница, и раздел можно использовать для SEO продвижения сайта.
Страница “Команда”
Страницы с командой ранее не было на сайте, мы ее создали для персонализации сайта, для предоставления пользователям информации о руководстве и менеджменте компании.
Все-таки сайты, содержащие реальные лица, вызывают больше доверия.
Результаты
В завершении, давайте пройдемся по результатам нашей работы :)
Не буду долго расписывать статистику, мы о ней поговорим в отдельной статье, которая будет включать в том числе, интересные результаты продвижения и рекламных кампаний, запущенных после разработки.
Но, считаю, нам есть, чем гордиться:
- Удобная навигация по сайту и проработанный каталог продукции и услуг, а также современный дизайн привели к тому, что пользователи стали находиться на сайте на 39% больше времени.
- Новые блоки с мотивационной информацией, формы заказа и калькулятор предварительного расчета увеличили конверсию в 2,2 раза.