Кейс: cоздание сайта для завода
измерительных приборов

Новый клиент, уже известная отрасль и запрос на wow-эффект. Как отстроится от конкурентов в нише при этом прокачав свой бренд и увеличив продажи в несколько раз? Делимся кейсом по модернизации сайта В2В-компании.

Привет! На связи компания ITS GROUP. Мы разрабатываем корпоративные сайты, веб-сервисы, личные кабинеты, реализуем сложные интеграции. С запросом на редизайн сайта к нам обратился завод испытательных приборов из Иваново, разработчик высокоточных портативных твердомеров, мер твердости, разрывных машин и динамометров.

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

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

Если год назад у нас еще не было опыта и мы воспринимали каждую новую нишу как вызов, тот с этим клиентом мы чувствовали себя уверенно. Сайт завода мы уже делали в прошлом году, кому интересно (бонум)

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

Вместе с клиентом выделили две основные задачи сайта: 

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

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

Что обсуждали?

• Текущий сайт, объем, и живые проблемы

• Новый сайт, структуру, объем и список критериев для успешной сдачи проекта

• Дополнительные работы

Команда

• Руководитель проекта

• Фронтенд-разработчик

• Бекенд-разработчик

• UI/UX-дизайнер

• 3D-дизайнер

• Бизнес-аналитик

Бизнес-аналитика 

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

Переосмысление позиционирования завода через новую структуру

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

Шапка

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

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

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

Подвал

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

Стало
Меню разложили на разделы и указали ссылки на все страницы. По центру сделали анимацию краткого слогана компании. Добавили лид-форму и ссылки на все юридические страницы. Не забыли и быстрые контактные данные с соц. сетями.

Каталог

Было
Проблемы:

• Одна большая портянка в которой тяжело ориентироваться без браузерного поиска по странице. Визуально выглядит так, словно не подгрузились стили.

• Карточка товара выглядела как в ворде, без души. Контент шел в одну колонку залпом. Там где фото товара отсутствовала были дыры по верстке и кнопка “Оставить заявку” не поднималась наверх, не была сайдбаром что мог ездить за скроллом страницы. Карточка товара выполнена в каком-то простом строгом стиле, что не подходит под современные маркетинговые подходы.

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

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

• Каталог был со скудным количеством фильтров, а карточки особо не несли никакой информации, хоть и являлись анонс-версией.

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

Кстати товары снятые с производства были введены не случайно. Во первых это товары уже с какой-то историей кликов и поисковых запросов. SEO-цифры терять не хочется, но и держать на сайте только ради этого бессмысленно. Поэтому мы соединили 2 бизнес-задачи в одну: добавили товары аналоги для моделей что больше не выпускаются и оформили карточки их для тех, кто еще пользуется давно купленными моделями. Можно добавлять документацию, характеристики, оставлять запрос в ТП. Все как у обычных товаров.

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

Разница детальной карточки товара простого товара и с ТП лишь в одном блоке “Модель”. Сам же первый экран карточки товара достаточно информативен. Есть бренд, артикул, номер документа СИ, промо-видео, галерея, 3 лид формы, перелинковка со статьей блога где прикреплен данный товар. Есть сравнение, поделится и добавление в корзину.

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

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

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

Под вкладками расположили секцию-доп.продаж и лид-форму.

Формы

Было

Стало

Увеличили количество форм по бизнес-задачам в 4 раза. Идея заключается в разделении трафика с сайта. Часть форм сопровождены баннерами, часть выполнена в минималистичном дизайне в виде вызова форм по кнопке. Идея заключается в повышении шанса разделить запросы пользователей и отправлять задачи сотрудникам завода уже в распределенные воронки в Б24. Разумеется это нужно также и для аналитики чтобы лучше понять ЦА. За год можно будет увидеть какие формы все-таки не востребованы, а какие больше всего принесли лидов, которые конвертировались в сделку.

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

О компании

Было

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

Стало

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

Можно добавлять фото и видео. Если текста достаточно много - появится сворачивание для быстрого краткого ознакомления в общем виде.

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

На странице “О компании” логично показывать владельца компании и основных крупных клиентов.

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

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

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

Так же возвращаясь к вопросу контрафакта - сразу же указали все признаки что продукция оригинальная.

О заводе

Было

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

Стало

На первом экране расположили несколько интерактивных элементов и краткие, но емкие слова о заводе на сегодняшний день.

Советская кинохроника по стилю наполнения похожа на историю о компании, но ее задача показать именно период СССР. Много архивных фото и видео. Напомним, что завод существует с 1950х годов, а клиент получил его в права владения уже после роспуска СССР. Поэтому это 2 отдельные темы: история самого завода и истории компании, что теперь им владеет. У советской кинохроники есть четкий период, а у компании есть точка начала и нет даты окончания. Поэтому здесь был сделан упор именно на концентрацию внимания с исторической точки зрения. Про заводы в СССР мало где рассказывается. Поэтому когда к нам приходят такие клиенты, мы рекомендуем рассказывать о себе глубже чем просто трансляция событий в наши дни. Многие источники-сайты уже давно закрылись, медиафайлы исчезают. Нужно сохранять историю для всех поколений, и если это история про место где ты работаешь, почему не заняться бы цифровизацией?

3D-модель завода получилась интересной и информативной. У нее несколько ярко выраженных частей, что позволяет упростить первичное количество кликов и понимания в целом как пользоваться картой завода.

Основная часть завода - это производственные участки. Как раз это и есть прямая демонстрация площадок и их масштабов. Точки на карте связаны с секциями ниже на этой же странице.

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

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

New! Вопрос-ответ

Обычный базовый раздел, но с небольшим изменением навигации. Добавили 2 уровня расположения вопросов. Например, в категории Товары, вопросы можно разложить на категории товаров. Так же добавили локальный поиск для этой страницы, так как скорее всего на карте кликов он будет показывать интенсивность использования чаще остальных кнопок. Если в списке нет искомого вопроса - можно отправить лид-форму. Вкладка “Все вопросы” выводит все вопросы и все папки-подкатегории.

New! Глоссарий

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

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

1. Помощь клиенту в освоении ниши и правильному выбора товара.
2. Пассивное увеличение SEO-трафика путем передачи своего опыта и структурированности материала по нише. Лид может не стать сделкой, но поднятие позиций в поисковой выдаче, наращивание сарафанного радио и репосты друг другу в данной нише непаханное поле. Если смотреть другие сайты данной ниши - они не подвергались модернизации, поэтому это отличный шанс стать одними из первых и забрать львиную долю трафика, а также отстроится от конкурентов с большим отрывом.

Комментарии будут служить такой же помощью в корректировке материалов и получения новых идей. Это мини-форум для “своих”. Хочется попробовать стать мейнстримом в данном подходе, чтобы продуманных современных сайтов становилось больше.

Главная

Было

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

Стало

Первый экран должен выполнять не скучный баннер, который никто не читает, а создать wow-эффект и оставить желание изучать сайт дальше.

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

Такое решение набирает обороты, особенно в инженерной нише. Пример https://oporasibiri.ru/, так как яркие прелоудеры не всем нравятся, но тоже часто используются как решение, например, здесь https://fishmarket.ru/.

Преимущества компании хорошо сочетаются в данном случае с перелинковкой, поэтому в этот раз на главной странице мы их оставили. Обычно убираем =)

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

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

Новости

Было

Простой сток новостей без фильтров и поиска. Около 200х новостей, где большая часть содержит в себе 1-2 предложения. Что повлекло за собой снятие с индексации роботом немалого количества страниц данного раздела.

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

Стало

Раздел “Новости” был поделен на группы. Первая секция - последние 10 новостей.

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

Далее идет секция “Полезные материалы” с разбивкой на подкатегории. В данном примере представлены “Про технологии” / “Про устройства” / “Про производство”. Смысл данной категории разделить статьи на бизнес-задачи и улучшить навигацию.

Секция “Видео с производства” служит локальным плейлистом, а не новостной статьей. У этого раздела как у “Мы в СМИ” нет детальной страницы, так как здесь ровно так же важна внешняя ссылка. В данном случае видеоролики на ВК Видео.

Секция “Новости” была оставлена для новостей о компании и просто стокового рекламного контента. А вот секция “Про продукцию” имеет всего лишь 1 бизнес-задачу: сбор и выдача материалов про заключение контрактов с клиентами и отображением внутри покупаемых товаров.

Так же была добавлена заключительная секция раздела “Мы в соц.сетях” с лид-формой.

У каждой секции-раздела есть своя страница категории. Где как раз есть поиск, фильтрация и сортировка.

Так же есть и общая страница со всеми новостями со всех категорий.

New! Корзина

На момент первого демо личного кабинета на сайте нет, как и прямой покупки. Поэтому сделали корзину в 1 шаг сразу с оформлением лид-формы.

Сравнение

Сравнение имеет несколько расширенные возможности.

• Можно сравнивать товары и торговые предложения
• Товары сравниваются каждый в рамках своей категории
• Можно показать только отличия
• Можно распечатать сразу страницу сравнения
• Можно скачать в формате pdf и эксель-таблицы

Контакты

Было

На этой странице не хватает компактности и например, карточек организаций.

Стало

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

Услуги

Было

Проблемы

Огромная портянка текста, которую не интересно читать. Информации по услуге много, но конверсионность услуги сильно срезана за счет ЦА, у которой нет времени на чтение слабо оформленного контента внутри.

Стало

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

Поиск

Было:

Классическая страница с результатами поиска, но почему-то с дублирующейся пагинацией.

Стало:

Каждый результат оформили в анонс-карточку с разделением на тип результата. Добавили быструю выдачу результатов.

New! Референции

Карта продаж по миру становится популярным дополнением на сайтах б2б-компаний. У клиента внушительное количество продаж, поэтому теперь у субъекта или страны будет свой список городов с полным перечнем проданных товаров.

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

New! Вакансии

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

New! Наша команда

Страница “Наша команда” показывает сотрудников компании вживую. Клиент подсуетился и сделал профессиональную съемку фото и видео, а мы лишь упаковали ее на новый сайт.

Безопасность изделия

Было: классический текст и лид-форма

Стало

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

Карта сайта

Было

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

Стало

Структурированная страница с разбивкой на типы страниц. Слева - ручное наполнение страниц. Справа - автоматическая генерация. Карта стала легче читаться и выглядит более лаконично.

Итоги

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

В случае с ООО “ЗИП” сделали так, чтобы выполнить мелкие работы, например поменять картинки или тексты, было предельно просто. Необязательно привлекать разработчиков или контент-менеджеров со стороны: можно самим загружать материалы, менять названия разделов и добавлять новые материалы на сайт.

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

Желаем ООО “ЗИП” продолжать развивать свой сайт и добавлять важный для продаж функционал.

Приходите к нам за крутыми сайтами =)