Разработка сайта для торгового дома промышленного оборудования "Звезда"
Дано
Торговый дом «Звезда» снабжает промышленные предприятия по всей Сибири разнообразными металлическими изделиями различных назначений: от БРС до подвижных пар. Компания на рынке более 12 лет, признана надёжным производителем и поставщиком металлоизделий для крупнейших предприятий России и ближнего зарубежья различных отраслей, в том числе сельхозпредприятий и добывающей промышленности.
Специализируется на:
•производстве металлоизделий;
•металлообработке;
•внедрении новых технологий;
•разработке нового оборудования и ввода его в эксплуатацию.
Предыстория
На момент обращения у заказчика уже существовал сайт, но за 10 лет он морально устарел во всех аспектах: от дизайна до функциональности. Сайт имел неудобную структуру, в некоторых товарных группах отсутствовало какое-либо описание, в других, напротив, присутствовал избыточный и запутанный контент. Имелась корзина, но при этом возможность покупки продукции отсутствовала для половины продукции.
Нужно
Разработать корпоративный сайт, позволяющий наглядно и быстро рассказать о продукции завода целевой аудитории — менеджерам по закупкам. Важно, чтобы закупщики точно знали все характеристики и получали визуальное подтверждение правильности своего выбора. Сайт должен отвечать трём требованиям:
1.Представлять компанию в сети;
2.Иметь каталог с нестандартными товарами;
3.Конвертировать посетителей сайта в покупателей.
Задачи
Создать современный и лаконичный корпоративный сайт, с которым заказчик выделится на фоне конкурентов. Оптимизировать структуру и интерфейс для комфортной навигации.
Выгодно представить и отразить продукцию компании, максимально раскрыть информацию. Организовать обратную связь с пользователями и придумать систему для сбора заявок от потенциальных клиентов.
Также отдельной задачей стояла разработка нового современного логотипа по техническому заданию заказчика. Логотип должен ассоциироваться с названием и спецификой компании.
Процесс работы
Чтобы познакомиться с производством, мы отправились в Барнаул. Для нас организовали экскурсию по заводу, мы узнали специфику бизнеса заказчика и посмотрели на продукцию своими глазами. Далее мы изучили отрасль, референсы заказчика, рынок, целевую аудиторию и конкурентов, узнали у заказчика, что нравится в дизайне и что нет, продумали структуру каталога.
Работа над каталогом велась в тесной связи с заказчиком — он подобрал нам фотографии для каждого товара, чтобы мы имели представление о том, как выглядит товар. Это важно, так как продукция имеет визуальные и функциональные тонкости, которые мы могли бы упустить при подборе картинок.
Одна из деталей в разборе.
Далее была продумана структура всего сайта. Нужно помнить, что прежде всего — это корпоративный сайт, представляющий бренд компании, с продукцией и всей необходимой документацией. Этот этап оказался самым сложным в проекте и занял около двух недель.
У заказчика не было четкого представления того, какие разделы и подразделы должны быть на сайте. Весь контент предоставлялся вперемешку, было передано много пустых папок, дублировавшейся информации. Чтобы разобраться и структурировать данные, потребовалось немало сил и времени, но это важнейший этап, который играет немалую роль и в дальнейшем продвижении.
Карта структуры сайта
Готовый сайт отличается сложной структурой с большим количеством разделов. Предлагаемая компанией продукция разделена по группам товаров, где каждый вид оборудования имеет карточку с подробным описанием, фотографиями, иллюстрациями и чертежами.
Поскольку заказчик не смог предоставить одинаковый объём информации для всех товаров, мы поступили следующим образом: для позиций с большим количеством данных была сделана кнопка «Подробнее», которая раскрывала большую иллюстрацию товара, заголовок, описание, чертеж с возможностью скачивания и технические характеристики. Для продукции, информации о которой не было, мы прикрутили кнопку для скачивания технического паспорта.
Функции или сценарии
Поговорив с заказчиком, мы выявили две основные группы пользователей, которые будут пользоваться сайтом, и прописали функции и сценарий для каждой группы.
Первая группа — это опытные специалисты, инженеры, которые прекрасно знают, какая продукция им необходима, определяют характеристики товара с краткого описания или заголовка, для них предназначена простая форма заявки.
Вторая группа — это менеджеры по снабжению, которые не знают многих тонкостей и для которых принципиально важной является подробная информация по продукту (иллюстрация, название, описание, техническая информация и паспорт, чертежи).
Для этой группы продуман более сложный сценарий. Например, представитель группы — это человек, который лишь недавно начал работать на должности менеджера по снабжению. Работодатель поручил ему закупить партию гребковых скреперов (0,3 кубометра). У компании есть готовая база поставщиков, и молодому специалисту необходимо сравнить цены, качество и удобство доставки.
Этот пользователь зашёл на сайт с десктопного компьютера, и на первом же экране он видит надпись «Изготовление промышленного оборудования» и понимает, что попал, куда надо. Нажимает на «бургер», открывает полноэкранное меню с каталогом, видит раздел «Скреперное оборудование» и переходит в него.
На странице с разделом есть общее описание и подкатегории с визуализацией. Пользователь нажимает на необходимый ему «Скрепер гребковый» и переходит на подробную страницу. На ней он видит несколько товаров: гребковые скреперы от 0.16 до 0.7 кубоментров. Это то, что человек искал, но ему необходимо убедиться в своем выборе, поэтому он нажимает на кнопку «Подробнее». В поп-ап-окне открывается название, описание, картинка скрепера, а также его чертеж и возможность скачать.
Убедившись в своем выборе, специалист нажимает кнопку «Купить» и оформляет заявку. Бинго!
Дизайн и логотип
Касательно дизайна заказчик не выдвигал особых требований, единственное пожелание было «получить современный сайт, который не устареет через год». В результате мы создали визуальную концепцию главной страницы, защитили её у заказчика, и на её основе нарисовали дизайн для всех страниц и разделов. Большая работа была проведена с разделом «Продукция» — для него подобрано и отрисовано более пятидесяти картинок.
Мы очень хотели показать всю продукцию в виде 3D-моделей, но рамки бюджета не позволили это сделать. В результате пришлось серьёзно поработать, чтобы получить красивые изображения: часть фотографий и изображений мы искали в сети и приводили к единому стилю, ещё часть мы рисовали вручную, основываясь на фотографиях заказчика (к сожалению, чудовищного качества).
В результате общая визуальная составляющая получилась очень стильной, формирующей у пользователей нужный образ компании, и отлично сочетающейся со структурой. Так, менеджеры находят на сайте техническую информацию с чертежами продукции, а бренд презентует свои сильные стороны и получает новых клиентов.
Что касается логотипа, то здесь заказчик высказал более однозначные пожелания. Дословная выдержка из брифа:»…на фоне стальной звезды, с переливами игры металла, без надписи БЗПО шестерёнка с полосками. Рассмотрим также свежие идеи. Коротко, ясно, запоминающееся. Чтобы на КП, на визитки, на сайт подходило. На КП в черно-белом варианте должно смотреться».
В ходе работы над логотипом было проработано большое количество вариантов, ассоциирующихся со звездой, шестеренками, металлическими изделиями, дизайнер нарисовал 6 разных вариантов, а по итогу был выбран абсолютный лидер — логотип, от которого были в восторге как наша команда, так и заказчик.
Логотип получился минималистичным и очень современным. Изначально круг был шестеренкой с лучом звезды, в ходе доработок мы оставили только круг, из которого выглядывает луч звезды. Первый вариант — универсальный черно-белый, цветной вариант с оранжевым и серым градиентами — ассоциации с металлом, раскаленным огнём.
Итоги
Заказчик остался очень доволен проделанной работой — сайт стал настоящим полноценным представительством компании в сети. Мы ориентировались на зарубежные принципы сайтостроения — модульность страниц, необременительная для потенциального покупателя форма обратной связи, которая, в свою очередь, формирует качественных лидов для компании.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
