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

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

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

Сайт наполняется клиентом.


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

erae.by
Владельцы сайта работают через заявки — оборудование крайне сложное, только профессионалы могут его правильно подобрать в зависимости от условий эксплуатации и рабочей среды — на сайте нет корзины. Поэтому закрепляем вверху строку с кнопками обратной связи — она всегда видна и пользователь в любой момент может оформить заявку.
На пликах символы оборудования, которые используют в документах и чертежах — такие обозначения знакомы инженерам и техническому персоналу, им сразу понятно, что будет в разделе и указывает на профессиональную направленность сайта
Клиент работает напрямую с производителями оборудования и поставляет продукцию известных марок. Эре Инжинеринг — эксклюзивные поставщики некоторых брендов. Части клиентам важно купить оборудование определенного бренда, поэтому не прячем марки, а показываем их на главной странице
Компания поставляла оборудование, составляла проекты монтажа для крупных заводов и известных производителей. Рассказываем об этом и показываем отзывы клиентов

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

erae.by

На странице подраздела показываем товары — карточки с названием и общими характеристиками.

erae.by

На странице товара показываем полную информацию о детали.

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

Со страницы товара пользователь отправляет заявку.

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

На страницу бренда пользователь попадает с главной или из каталога. Рассказываем о бренде и показываем категории арматуры, которые производит этот бренд.

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

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

erae.by

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

erae.by

На странице о компании рассказываем про работу клиента и делаем акцент на преимуществах.

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

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

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

Выбираем цвета и стилистику. Пробуем яркие солнечные цвета, но потом меняем на пастельные цвета, которые хорошо сочетаются с фирменными ЭраИнженеринг — так блок не перегружает страницу.

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

Думаем, над блоком с партнерами — компаниями, оборудование которых поставляет ЭраИнженеринг.

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

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

erae.by

Сначала решаем сделать выпадающее меню с выходом в разделы.

В меню можно перейти с просмотра продукции по категориям к каталогу по брендам

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

erae.by

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



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

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

Первый вариант страницы раздела.

erae.by
Список подразделов для быстрого доступа
Пишем сколько товаров в разделе
Крупная кнопка для доступа к подразделу
На карточке товара кнопка для заявки

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

erae.by

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

erae.by

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

erae.by

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

erae.by

Показываем клиенту. По его просьбе убираем фильтры =(




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

Первый вариант.

erae.by
В начале страницы — тематический баннер с логотипом производителя
Рассказываем о марке: откуда производитель, на чем специализируется, в чем его преимущества
Показываем, категории товаров, которыми занимается производитель
Показываем конкретные товары бренда

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

erae.by

Готовим страницу товара.

erae.by
Фотографии товара закрепляем, так чтобы при прокрутке страницы они всегда были видны
Добавляем на страницу документацию
Добавляем блок с похожими товарами

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

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

erae.by

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