Задачи: рассказать об ассортименте продукции, поставляемой Эра Инжиниринг, дать сотрудникам и потенциальным покупателям удобный доступ к каталогу продукции.
Рассказать потенциальным клиентам про Эра Инжиниринг, про их преимущества и опыт, заявить, что Эра Инжиниринг — компетентный поставщик оборудования, комплектующих и арматуры.
Решение: разрабатываем сайт с каталогом продукции — окончательный подбор деталей с точными характеристиками делает менеджер по телефону. Даем доступ к полной информации о продукции — каждый товар сопровождается полной документацией.
Сайт наполняется клиентом.
Главная страница выполняет две задачи: рассказывает про компанию, формирует имидж надежной фирмы с большим опытом, показывает направления деятельности, а заинтересованных пользователей выводит в каталог.
В каталоге перечисляем все виды продукции и бренды — пользователь может искать конкретные детали или выбирать оборудование определенного бренда. Учитываем оба сценария.
На странице подраздела показываем товары — карточки с названием и общими характеристиками.
На странице товара показываем полную информацию о детали.
Со страницы товара пользователь отправляет заявку.
На страницу бренда пользователь попадает с главной или из каталога. Рассказываем о бренде и показываем категории арматуры, которые производит этот бренд.
Создаем страницу новостей — клиент опытен в своей области и следит за новинками, изменениями в гостах, нормативах и законодательстве отрасли и хочет делиться полезными новостями со своими клиентами.
На странице новости форма обратной связи — полезная фича, для читателей которые захотят задать вопрос по материалу статьи — информация в статьях может быть специфической и сложной.
На странице о компании рассказываем про работу клиента и делаем акцент на преимуществах.
Получаем первые вводные по главной: вверху страница нужен слайдер, дальше обязательно нужно представить каталог и бренды. Клиент просить сделать плитку с разделами и каким-то символами-образами категорий товаров. Рисуем эскизы и набрасываем вариант баннера и плитки.
Отказываемся от фотографий деталей на фоне, вместо них рисуем иконки-символы, конкретной категории. Такими знаками пользуются инженеры и технические специалисты в чертежах и спецификациях. Наш сайт рассчитан именно на них, им будет приятно увидеть знакомые символы в оформление сайт. Ну и смотрятся они хорошо.
Выбираем цвета и стилистику. Пробуем яркие солнечные цвета, но потом меняем на пастельные цвета, которые хорошо сочетаются с фирменными ЭраИнженеринг — так блок не перегружает страницу.
Заказчику нравится и он показывает вариант своим менеджерам. По их просьбе делаем плитки примерно одинаковыми по размеру, чтобы не было ощущения, что какой-то раздел важнее остальных, меняем цвета на более плотные и яркие — менеджеры довольны.
Думаем, над блоком с партнерами — компаниями, оборудование которых поставляет ЭраИнженеринг.
Обдумываем что еще должно быть на главной: рассказ о компании, отзывы, реализованные проекты, с ссылкой на специальный раздел. Озвучиваем идею клиенту, она ему нравится, но компания Эра Инжинеринг новая, у нее пока недостаточно интересного материала для такого раздела. Клиент боится, что этот раздел будет отвлекать клиентов от основной их задачи — выбора арматуры и комплектующим. Откладываем идею до следующей итерации.
Оставляем на главной рассказ о компании, блок с клиентами и отзывы, компонуем и собираем окончательный вариант главной.
Сначала решаем сделать выпадающее меню с выходом в разделы.
Клиент просит сделать привычный каталог — никаких изысков, простой и удобный список.
Убираем разделение на табы по брендам и категориям, ставим их на одной странице.
Продукция заказчика делится на разделы и подразделы. Набрасываем варианты этих страниц.
У пользователя два основных сценария пользования каталогом — он ищет конкретную деталь в разделе и подразделе, или он ищет детали конкретного бренда. Продумываем как реализовать оба этих сценария.
Первый вариант страницы раздела.
Немного меняем страницу: вместо паттерна ставим тематическую иллюстрацию, убираем горизонтальные кнопки и меняем их на «шторки» — на них пишем количество товаров в разделе.
Меняем дизайн страницы раздела. Неизменными остаются тематический баннер и компактный список разделов под ним. Изменилось представление разделов — теперь это карточки со ссылкой на страницу подраздела, тематической иллюстрацией и описанием, для чего используется этот вид продукции.
Готовим страницу подраздела — это конечная страница каталога с конкретными товарами, именно здесь пользователю важно выбрать конкретный товар. Добавляем фильтры по брендам.
Меняем формат фильтров — выносим их на отдельную плашку и закрепляем ее поверх каталога — при прокрутке страницы фильтр будет всегда на виду, и пользователь сможет на ходу изменить фильтрацию.
Показываем клиенту. По его просьбе убираем фильтры =(
Единственный вариант, когда пользователь может просмотреть товары конкретной марки — перейти в каталог со страницы бренда. Приступаем к работе над ней.
Первый вариант.
Страница получается сложной и длинной. Отказываемся от последнего блока и оставляем только список категорий, которые производит этот бренд.
Готовим страницу товара.
Показываем клиенту. После разговора с ним убираем блок с похожими товарами — практически невозможно автоматически подобрать релевантные похожие товары, может получится так, что на странице клапана для нефтехимического производства, как похожий товар будет показан клапан для пищевой промышленности.
Переносим документацию вверх и скрываем очень длинное описание.
Готовим дизайн остальных страниц, согласовываем с клиентом и передаем на верстку.