Интернет-витрина поставщика лакокрасочных материалов “Танзор”

Заказчик:

Группа компаний «Танзор» — российский производитель лакокрасочных материалов для полиграфии (в частности, уф-лаков, красок для флексографской печати) и различных отраслей промышленности.

«Танзор» также является эксклюзивным дистрибьютором красок зарубежных производителей, например, Radior France.

Компания владеет двумя научно-исследовательскими лабораториями в РФ и в Латвии, где разрабатывает и тестирует материалы. В Москве, Санкт-Петербурге, Новосибирске и Краснодаре работают колористические лаборатории и станции смешения, где клиенты могут заказать точный подбор цвета и смесевые краски любого объема.

Предыдущий сайт заказчика выглядел так:

На старом сайте были следующие проблемы:

• Устаревший дизайн.
• Неудобный каталог. Товары были представлены в виде таблицы.
• Карточка товара в виде pdf-файла.
• Сайт не отражал масштабы лидера отрасли.
• Отсутствовала адаптивность под мобильные устройства.

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

Задачи сайта:

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

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

UI-дизайн

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

При разработке дизайна сайта ориентировались на руководство по использованию фирменного стиля бренда.

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

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

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

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

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

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

Далее возражения потенциального заказчика закрываем подтверждением компетенций компании, описанием глобальной сети продаж и подхода к работе.Глобальная сеть продаж — это карта с офисами продаж и их контактами. Она позволяет показать масштабы организации.

Завершает страницу форма с призывом задать вопрос.

Полезные материалы

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

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

Информацию разделили на два блока: «База материалов» — полезная литература, видео с вебинаров, мастер-классы и «Танзор Live» — новостная лента компании.

Узконаправленные вопросы можно задавать в разделе «Вопрос-ответ».

Технолог отвечает на вопросы.

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

Гибкая навигация каталога

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

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

Карточка товара

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

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

В карточке предусмотрели возможность добавлять максимально полную и структурированную информацию о продукции.

Для товаров со свойством «Цвет» кнопку «Добавить в корзину» заменили на «Выбрать цвет». Только после выбора цвета можно добавить товар в корзину. Благодаря этому решению получили компактный каталог, который содержит как простые товары, так и колеруемые. Выбранный пользователем цвет добавляется атрибутом к заказу.

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

Техзадание онлайн

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

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

Конструктор внутренних страниц

Данный конструктор позволяет контент-менеджеру без знания языка html собрать страницу. По умолчанию возможности cms 1С-Битрикс при создании новых страниц для контент-менеджера ограничены. Конструктор внутренних страниц позволяет настраивать контент внутри страницы и интересно оформить материал. Новые страницы могут содержать не только изображения и текст, в них также можно добавить видео, блок с иконками и т. д. Данный конструктор реализовали для контентных страниц в разделах «База знаний», «О компании».

Пример страницы R&D, собранной на конструкторе.

Итоги:

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

• Разработали конструктор внутренних контентных страниц. Контент-редактор без знания языка html может собрать разные блоки и заполнить страницу.
• Упростили путь пользователя до конкретного товара. Товары расположили одновременно в трех разделах. Чтобы пользователь по любым известным ему параметрам мог найти товар.
• Придумали варианты изображения лакокрасочных материалов разных производителей. Сэкономили клиенту время и деньги на фотосессию продукции.
• Каталог по цвету материалов вынесли в поп-ап окно. Добавили легкость в восприятие товара.
• Перенесли со «старого» сайта более 240 новостей.
• Полезную для пользователя информацию разместили в разделе «База знаний». Проводимые мероприятия — в разделе «Танзор Live».
• В разделе «Контакты» добавили карту с фильтрами. Возможно выбрать офис, производство, лабораторию в России и мире. Каждый объект содержит полную контактную информацию.
• Разработали блок «Глобальная сеть продаж». При выделении страны на карте или в отдельном списке она подсвечивается и поднимается балун с контактной информацией.
• Оцифровали неудобные бланки технических заданий формата word — реализовали вместо них пошаговые техзадания на сайте.