Case Study: B2B сайт «Боровичские огнеупоры»

Это рассказ о том как я делал вот этот сайт: https://borogneupor.ru/
Здесь будет описан дизайн-процесс, прототипы, визуалы и пострелизная работа.

В городе Боровичи есть завод АО «БКО», который производит огнеупорные материалы для печей (смеси, глины, кирпичи и т.д.). У завода есть собственный сайт, но там много различной информации: про историю завода, условия для сотрудников, отчетность и т.д. Заказчик обратился чтобы сделать сайт для B2B клиентов, который будет заточен под продажи продукта.

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

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

Старый сайт

Задачи

Для разработки нового сайта вместе с заказчиком определили задачи:

• сделать сайт каналом продаж;
• понятно представить продукт;
• обновить фирстиль, но сохранить визуальную связь с заводом АО «БКО».

Цель сайта для заказчика — получить контакт клиента (в идеале заказ на первую партию). Потому что в организации вся коммуникация с клиентом происходит по телефону — заявки, оформление заказов, продажи.

Аудитория

Аудитория сайта делится на две категории: B2B клиенты и непосредственные потребители.

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

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

B2B клиенты — основная целевая аудитория, это я увидел в статистике заказов за прошедший год, смотря на объемы партии. (без конкретных цифр, большинство заказов это крупные партии)

Контекст

Рассмотрим, как B2B клиент попадает на наш сайт, в каком контексте. Каналами коммуникации будут таргетированная реклама и выдача в поисковике.

Заказчик дал мне несколько контактов клиентов, я пообщался 7 людьми. Вопросы для интервью были: как они делали последний заказ, как выбрали у кого заказывать, на что смотрели при выборе (узнавал только про прошлый опыт последнего заказа, никаких гипотетических вопросов). В основном в выборке были люди, ответственные за закупки в магазине, где они работают.

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

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

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

Прототипирование

Мы с заказчиком остановились на 4х страницах будущего сайта:

• Главная;
• О заводе;
• Продукция;
• Оптовым клиентам.

Главная

Первая страница для клиента, здесь есть вся полезная клиенту информация. После заголовка сразу идет блок продукции, чтобы посетители сразу видели, что есть на этом сайте. После преимуществ и описания продукции, поместил пошаговую инструкцию, как сделать заказ. Такую я увидел у Юнистальпром (http://www.u-stal.ru). Это сделает процесс более понятным и прозрачным для покупателя.

Инструкции по заказу с ЮниСталь

Каждая страница заканчивается формой заявки, на неё же ссылаются кнопки «Связаться». Помним, целевое сайта — собрать контакты пользователей. Позднее я решил убрать отсюда карту, потому что клиенты не ездят забирать продукцию сами.

Завод

Так как людям нужно объяснить, что этот сайт продает продукцию сразу с завода, а не посредник, то есть эта страница с описанием и историей предприятия.

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

Вайфреймы страниц

Партнерам

Страница для тех самых B2B клиентов. Пока тут сборная солянка из блоков с других страниц, но к релизу появится пара интересных решений (интрига).

Продукция

Страница-инструмент, для ознакомления с продукцией и её характеристиками.

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

Вот как это всё выглядело изначально

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

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

Интерфейс карточки продукции

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

Финальный вариант интерфейса

Визуал

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

Местная газета, слева—логотип АО «БКО»

В качестве заголовочного шрифта я выбрал Minsk, напоминающий логотип газеты, а основным неогротеск Gotham Pro.

Изначально варианты были самые разные…

Первые визуалы. Как вам последний, печные смеси под соусом digital?)

Отдельно нарисовал простой лаконичный шрифтовой логотип, последняя — финальная версия (как видно, название проекта поменялось на человечное).

Тут я стыдливо допустил ошибку в названии, потом пришлось исправлять!

В процессе работы оранжевый цвет поменял с изначально светлого на более темный, «кирпичный», чтобы текст написанный этим цветом не терялся.

Релиз

Главная:

Форма выполнена по грамматически правильной конструкции (читается как «Запросить обратный звонок»). В футере я отказался от конверсионных кнопок, и сделал его максимально лаконичным, потому что он всегда под формой контактов, где есть вся информация.

Другие страницы

Остальные интересные моменты:

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

Интерактивный блок «История»

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

Дизайн-ревью

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

Используемые компоненты

Система отступов

Отступы в мобильной версии

Сейчас сайт находится в процессе верстки, регулярно проверяю её, но уже можно посмотреть на проект: https://borogneupor.ru/

Заключение

Будет тщеславно сказать, что этот дизайн — идеальный. Через некоторое время после завершения работы, я свежим взглядом смотрю на результат и вижу, что можно улучшить. Для этого предлагаю заказчику фичу, провести её А/Б тестирование. Из последнего: убрать боковой ярлык с «узнать цену», добавив это второстепенной кнопкой на обложку в главную. Также жду, когда появится стабильный трафик, первые заказы, чтобы посмотреть аналитику и возможно что-то доработать. Но это уже будет совсем другая история…

Спасибо за внимание!