Создали сайт с современным дизайном в В2В-нише: продаем промышленный гаджет как модный смартфон

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

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

Твердомеры — это оборудование для измерения твердости металлов. А меры твердости первого порядка — это копии государственных эталонов, на которых можно калибровать твердомеры. Всё это покупают государственные учреждения, лаборатории, крупные металлургические предприятия и подобные организации. При этом значительная часть товара реализуется через дилерскую сеть.

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

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

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

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

Модели создавали в Blender: брали реальные твердомеры, отрисовывали их в 3D, а затем подбирали и накладывали текстуры. Дальше выставляли освещение, выбирали ракурс и делали рендеры. Эффект сочности достигался за счет контрастов от падения света и тени.

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

Настроили интеграцию с 1С. У клиента была кастомная версия 1С, поэтому мы сделали собственный API для обмена данными.

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

Когда клиент делает заказ, информация о нем тоже попадает в 1С. В программе формируется заказ-наряд, а также индивидуальная скидка. Далее создаются закрывающие документы, письма по статусам и отгрузкам.

Создали личный кабинет клиента. Всю информацию из 1С нужно передать на сайт, который работает на CMS Bitrix. Интеграцию мы также реализовали с помощью API: дали покупателям Центра «МЕТ» возможность быстро запросить документы по кнопкам «Получить КП» и «Получить счет».

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

Установили процент оплаты. Покупатель может оплачивать твердомеры и меры твердости частями. В его личном кабинете это выглядит как «Оплачено» и процент, например 0 (0,00%), если заказ еще не оплатили. Информация обновляется на основе данных из 1С, и оплаты может легко контролировать как представитель покупателя, так и менеджер Центра «МЕТ».

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

Важно то, что в 1С может быть несколько разных записей об одном товаре: например, один и тот же прибор в разной комплектации заводится как несколько товаров. Но на сайте информация о комплектации должна подтягиваться в одну карточку. А когда мы передаем менеджеру заказ, то «расщепляем» данные о товаре, собранные под формат на сайте, обратно под 1С.

Нашему заказчику понравилась вариативность фильтров около конкретного товара на AliExpress. Чтобы сделать похожую систему на сайте Центра «МЕТ» и соединить ее с базой в 1С, мы предложили сделать разные варианты карточек, внутри которых последовательно будут открываться фильтры. Такая система нужна, чтобы клиент увидел доступные торговые предложения в одном месте. При создании карточек мы опирались на схемы, разработанные в MindMeister, а команда разработки написала ТЗ на кастомизацию обмена с 1С.

Виды карточек в каталоге зависят от количества фильтров. А оно зависит от количества характеристик товара. Всего мы разработали три типа карточек.

Товар без фильтров. Товар без дополнительных параметров, готовое коммерческое предложение. Клиент может сразу положить его в корзину и купить.

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

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

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

Когда клиент выбирает все возможные параметры из доступных, в карточке появляется кнопка «В корзину».

Основные разделы сайта: «Компания», «Продукция», «Дилеры», «Проверка подлинности», «ВикиМЕТ» (новости) и «Контакты». С каждым из них мы тоже поработали.

Обновили раздел о компании. Здесь есть вся информация, чтобы сформировать доверие покупателя: чем занимается Центр «МЕТ», лицензии на продукцию, отзывы. Есть фотографии с производства: клиент по нашей просьбе заменил их на более качественные.

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

Создали страницу проверки подлинности продукции. Центр «МЕТ» защищает своих клиентов от подделок. Если они покупают продукцию компании в дилерском центре, то могут проверить ее подлинность по базе данных. Это важно, потому что неоригинальное устройство может привести к проблемам на производстве.

Теперь подлинность можно проверить онлайн по номеру записи в реестре ФИФ ОЕИ или QR-коду на упаковках с продукцией. При сканировании кода открывается страница с результатами проверки.

Сделали страницу медиа с возможностью гибкой настройки и модерации. «ВикиМЕТ» — раздел с новостями компании, информацией о продукции и акциях. Клиенту важно было управлять информацией в нем самостоятельно.

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

В случае с Центром «МЕТ» сделали так, чтобы выполнить мелкие работы, например поменять картинки или тексты, было предельно просто. Необязательно привлекать разработчиков или контент-менеджеров со стороны: можно самим загружать материалы, менять названия разделов и добавлять новые категории новостей.

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

Переходите на наш сайт, чтобы увидеть другие кейсы. А если вдохновились «вкусными картинками» и захотели так же, пишите напрямую через телеграм-канал :)