Новый стандарт для сайтов в агропромышленности или Как новый сайт увеличил продажи элеваторов и агротехники на 40%.

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

В нашей стране (хотя не только в нашей) есть проблема – компании с многолетней историей и миллионными, иногда даже миллиардными, оборотами выглядят в интернете так, как будто открылись вчера и работают там 3 человека 🙂🙂🙂.

Наш клиент пришел именно с таким сайтом.

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

Как выглядит сайт компании – это хороший внешний признак того, как у компании идут дела. Если сайт актуален по дизайну и наполнению, значит, у компании все в порядке.

Клиент: Корпорация СКЭСС (СевКавЭлеваторСпецСтрой) - крупнейшее в России предприятие по строительству элеваторов, №1 среди производителей оборудования для послеуборочного хранения зерна.

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

Для лучшей ориентации по статье:

Хочется сказать для красного словца "к нам в редакцию поступило письмо", но, увы, нет🙂. Менеджеру поступил звонок от отдела маркетинга и рекламы компании СКЭСС, кратко пересказать который можно так:

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

Что по референсам?

Заказчик прислал нам один сайт – сайт ростовского аэропорта и пожелания к дизайну: строгий, современный, демонстрирующий масштабы компании. Океееей...

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

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

После презентации наших референсов, про аэропорт забыли))))

Как правило заказчик выбирает из такого набора 3-5 основных референсов, которые ложатся в основу дизайна. Однако здесь выбор остановился на 15.

Мы предложили несколько концепций:

Спустя около пяти итераций, пройдя через все отделы до директора, концепт в виде презентации утвердили.

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

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

Дизайн таблиц

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

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

Форма на 38 полей (или кошмар для UX)

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

Взяв этот документы внимательно изучили и решили его структурировать на логические блоки:

Эти блоки разбивают бесконечный перечень вопросов на всего лишь 5 блоков (шагов) формы, которые показывают пользователю, что это скоро закончиться и количество вопросов конечно.

Далее мы ушли от вертикальной структуры расположения полей ввода (т.е. когда каждое следующее поле находиться под другим). Мы применили строчное расположение, которое дает следующие преимущества:

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

Важный момент, который раздражает наших UX дизайнеров и который всегда пишут в правки для наших разработчиков - обработка ошибок заполнения полей формы должна происходить сразу (пользователь должен видеть ошибку заполнения, когда заполняет поле), а не после того, как все заполнил, нажал "отправить" и появляется ошибка, что форма заполнена не корректно и ему необходимо искать в каком поле была допущена ошибка.

Т.к. в каталоге не 1000 единиц продукции, то внедрять фильтр мы отказались, а сделали разделение оборудования на категории.

Все карточки в каталоге подтягивают превью 3D изображения товара с внутренней страницы.

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

Элеваторы в 3D

Элеваторы и элеваторное оборудование это сложные продукты, которые состоят из множества компонентов. В карточке товара мы даем пользователю рассмотреть продукт со всех сторон (360 градусов).

Реализовать данный блок можно несколькими способами: canvas, набор изображений, видео, интеграция 3D моделей.

Мы попробовали все варианты, но в результатах тестов было принято решение конвертировать 3D модели в видео и при прокрутке двигать покадрово. Такое решение дает бОльшую скорость загрузки и кроссбраузерность.

Оптимизация видео (сжимаем не сжимаемое)

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

Объекты с интерактивной картой

Чтобы продемонстрировать объемы строительства и типы объектов - было бы достаточно реализовать типовой список проектов с переходом на внутреннюю страницу отдельного проекта.

Однако задача была еще показать масштабы компании, чтобы партнеры видели, что компания работает не только по всей стране, но и по всему миру. Для этого в разделе объекты мы реализовали первым блоком итеративную карту с координатами наиболее интересных построенных объектов. Помимо стандартного масштабирования у карты реализованы два пресета масштаба "Россия" и "Мир", которые позволяют быстро перейти к необходимому масштабу.

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

Собственный тендерный раздел

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

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

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

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

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

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

Мы спроектировали корпоративный сайт, который улучшил пользовательский опыт, дал улучшение метрик более чем на 90% (уменьшение процента отказов, увеличение времени посещения) и увеличение конверсии с сайта более чем на 40% по сравнению с предыдущим сайтом.

Кейс на Behance:

Ссылка на сайт:

Если статья была вам полезна, подписывайтесь на нас на VC.ru