Новый стандарт для сайтов в агропромышленности или Как новый сайт увеличил продажи элеваторов и агротехники на 40%.
Узнайте, как наша команда разработала инновационный сайт для агропромышленной компании, который не только привлек новых клиентов, но и значительно увеличил продажи элеваторного оборудования. Читайте наш кейс и вдохновляйтесь!
В нашей стране (хотя не только в нашей) есть проблема – компании с многолетней историей и миллионными, иногда даже миллиардными, оборотами выглядят в интернете так, как будто открылись вчера и работают там 3 человека 🙂🙂🙂.
Наш клиент пришел именно с таким сайтом.
Вне зависимости от того, сколько лет компании или какие у нее обороты, хороший сайт только увеличивает доверие к бизнесу.
Как выглядит сайт компании – это хороший внешний признак того, как у компании идут дела. Если сайт актуален по дизайну и наполнению, значит, у компании все в порядке.
Клиент: Корпорация СКЭСС (СевКавЭлеваторСпецСтрой) - крупнейшее в России предприятие по строительству элеваторов, №1 среди производителей оборудования для послеуборочного хранения зерна.
Когда к нам обратилась корпорация СКЭСС (СевКавЭлеваторСпецСтрой), перейдя на сайт компании, мы просто не могли представить, что это огромная компания с многолетней историей в более чем 75 лет, которая строит элеваторы по всему миру и производит весь спектр необходимого оборудования.
Для лучшей ориентации по статье:
Задание (или что вообще нужно заказчику)
Хочется сказать для красного словца "к нам в редакцию поступило письмо", но, увы, нет🙂. Менеджеру поступил звонок от отдела маркетинга и рекламы компании СКЭСС, кратко пересказать который можно так:
- Хотим современный и функциональный корпоративный сайт.
- Нужна будет разработка новых разделов: Закупки и Вакансии.
- Нужна понятная админка, чтобы мы могли самостоятельно добавлять/изменять информацию (Новости, Закупки, Вакансии, Объекты), фотографии объектов с галереей (листалка или что-то другое, но, чтобы можно было хорошо просмотреть объект).
- Хотим несколько версий сайтов на разных языках (русский, английский и испанский).
Концепции
Один из первых этапов работы над проектом, после брифа и созвона – это исследование конкурентов. Серфинг в интернете основных конкурентов заказчика показал, что компании по производству силосов сильно над сайтами не заморачиваются (кроме, может быть, одного-двух с хорошо заполненными каталогами). Поэтому вдохновляться какими-то решениями нам было не откуда.
Что по референсам?
Заказчик прислал нам один сайт – сайт ростовского аэропорта и пожелания к дизайну: строгий, современный, демонстрирующий масштабы компании. Океееей...
Однако это для старта разработки концепции было мало, и мы стали искать референсы из других областей. Нашли 25 примеров – нечто среднее между аэропортом и строгостью.
Когда мы готовим подборку референтов мы представляем их заказчику с подробные комментариями, почему нам нравиться то или иное решение и на что стоит обратить внимание.
После презентации наших референсов, про аэропорт забыли))))
Как правило заказчик выбирает из такого набора 3-5 основных референсов, которые ложатся в основу дизайна. Однако здесь выбор остановился на 15.
основное требование к дизайну: строгий, современный, демонстрирующий масштабы компании.
Мы предложили несколько концепций:
- [1] Статичный вариант, классический и строгий
- [2] Вариант аля apple,
- [3] Концепция главная страница - презентация, которая наглядно демонстрировала масштаб компании с ложность работ, которые выполняются при строительстве элеваторов.
Спустя около пяти итераций, пройдя через все отделы до директора, концепт в виде презентации утвердили.
Далее мы привели сетки и в порядок и компоновки элементов к финальному виду, чтобы убрать хаос из набросков концепции.
Сложности в дизайне (или внутренние страницы не так просты, как кажутся)
После утверждения основной концепции настало время внутренних страниц, и здесь помимо достаточно тривиальных страниц вроде "о компании", "новости", "контакты", были разделы, над которыми пришлось посидеть ни один десяток часов дизайнерам, например карточка оборудования с адаптацией таблиц или форма из 38 полей
Дизайн таблиц
Табличные данные это не просто и многие решают эту задачу в лоб, банальным горизонтальным скролом, однако все внутри нас протестовало против такого решения, т.к. оно выглядит убого и с точки зрения UX-дизайна это просто дыра, потому что пользователи не всегда понимают, что данные спрятаны за горизонтальной прокруткой.
Мы решили все делать по-своему и что будем реализовывать динамические таблицы, которые будут перестраиваться и адаптироваться под ширину экрана.
Мы переосмыслили концепцию таблиц
Форма на 38 полей (или кошмар для UX)
Для каждого клиента в компании СКЭСС есть опросный лист, который каждый клиент заполняет, чтобы можно было классифицировать клиента и сделать ему подходящее коммерческое предложение. Наша задача была сделать цифровой вариант этой формы (хотя в формате word - это тоже цифровой вариант))))
Взяв этот документы внимательно изучили и решили его структурировать на логические блоки:
- Контактные данные
- Объект строительства
- Культура для хранения и переработки
- Приемка и отправка
- Дополнительные данные об объекте
Эти блоки разбивают бесконечный перечень вопросов на всего лишь 5 блоков (шагов) формы, которые показывают пользователю, что это скоро закончиться и количество вопросов конечно.
Далее мы ушли от вертикальной структуры расположения полей ввода (т.е. когда каждое следующее поле находиться под другим). Мы применили строчное расположение, которое дает следующие преимущества:
- укорачивает длину страницы
- согласно исследованиям, заставляет пользователя замедлить скорость чтения и более внимательно изучать информацию
В результате мы получили визуально легкую форму, которая поэтапно ведет пользователей и не заставляет их бежать в ужасе при виде того сколько им предстоит заполнить.
Важный момент, который раздражает наших UX дизайнеров и который всегда пишут в правки для наших разработчиков - обработка ошибок заполнения полей формы должна происходить сразу (пользователь должен видеть ошибку заполнения, когда заполняет поле), а не после того, как все заполнил, нажал "отправить" и появляется ошибка, что форма заполнена не корректно и ему необходимо искать в каком поле была допущена ошибка.
Каталог оборудования
Т.к. в каталоге не 1000 единиц продукции, то внедрять фильтр мы отказались, а сделали разделение оборудования на категории.
Все карточки в каталоге подтягивают превью 3D изображения товара с внутренней страницы.
Сложности в разработке
Т.к. мы хотели сделать современный сайт, который будет выглядеть актуально не 1-2 года, то делать стандартные каталоги, карточки товаров, и другие элементы интерфейса нам не хотелось
Элеваторы в 3D
Элеваторы и элеваторное оборудование это сложные продукты, которые состоят из множества компонентов. В карточке товара мы даем пользователю рассмотреть продукт со всех сторон (360 градусов).
Реализовать данный блок можно несколькими способами: canvas, набор изображений, видео, интеграция 3D моделей.
Мы попробовали все варианты, но в результатах тестов было принято решение конвертировать 3D модели в видео и при прокрутке двигать покадрово. Такое решение дает бОльшую скорость загрузки и кроссбраузерность.
Оптимизация видео (сжимаем не сжимаемое)
Хотя все звучит логично и хорошо, но с оптимизацией видео пришлось довольно долго повозиться и подобрать оптимальные параметры конвертации, которые позволяли бы сделать видео без пикселей размером с какой-нибудь федеральный округ и обеспечить небольшой размер файла.
Объекты с интерактивной картой
Чтобы продемонстрировать объемы строительства и типы объектов - было бы достаточно реализовать типовой список проектов с переходом на внутреннюю страницу отдельного проекта.
Однако задача была еще показать масштабы компании, чтобы партнеры видели, что компания работает не только по всей стране, но и по всему миру. Для этого в разделе объекты мы реализовали первым блоком итеративную карту с координатами наиболее интересных построенных объектов. Помимо стандартного масштабирования у карты реализованы два пресета масштаба "Россия" и "Мир", которые позволяют быстро перейти к необходимому масштабу.
При клике на каждый точку открывается название и краткая информация по объекту, а при клике по названию открывается подробная карточка объекта с фотоотчетом о строительстве и характеристиками объекта.
Собственный тендерный раздел
Крупные компании почти все закупки делают через тендеры, чтобы определить лучшего поставщика по цене и качеству, но публикация абсолютно всех закупок на официальные тендерные площадки не всегда удобно.
Кроме того, для компаний, которые заинтересованы в сотрудничестве с компанией СКЭСС все тендеры будут сосредоточены в одном месте на сайте компании и подрядчики смогут увидеть все объемы и все тендеры, которые выставляет компания.
Многоязычность
Т.к. корпорация СКЭСС реализует проекты и оборудования по всему миру, то и сайт должен говорить с клиентами на одном языке.
К английскому мы все привыкли и это стандартная ситуация, а вот самоучитель "экспресс курс испанского" нашему менеджеру пришлось купить, чтобы понимать, что там вообще на сайте происходит, и чтобы руководить контент менеджерами.
RU - Привет
EN - Hello
ES - Hola
Кроме перевода для каждой версии реализован свой отдельный каталог и свой набор страниц. Т.к. некоторое оборудование не поставляется в ряд стран, в каждой из стран свои юридические регламенты для сайта, а также условия работы компании.
Результаты/Заключение/Выводы
Запуск сайта произошел уже более года назад, и мы можем получить обратную связь от клиента и сделать полноценные выводы.
Мы спроектировали корпоративный сайт, который улучшил пользовательский опыт, дал улучшение метрик более чем на 90% (уменьшение процента отказов, увеличение времени посещения) и увеличение конверсии с сайта более чем на 40% по сравнению с предыдущим сайтом.
Отзыв клиента
Корпорация «СевКавЭлеваторСпецСтрой» (СКЭСС) выражает свою благодарность сотрудникам компании sagirov.com за разработку сайта https://www.skess.ru
Те отзывы и восхищение наших коллег, которые мы получаем при демонстрации нашего нового сайта, говорят сами за себя.
На протяжении сотрудничества команда Студии Микаэла Сагирова (sagirov.com) демонстрирует высокий профессионализм, гибкость и быстрое реагирование в решении поставленных задач по поддержке и техническому обслуживанию сайта, индивидуальный подход в решении поставленных задач, а также их своевременное выполнение.
Нам удалось построить эффективную коммуникацию, дружеские и доверительные отношения, и мы надеемся на дальнейшую реализацию совместных проектов.
Желаем успешного развития и процветания!
Кейс на Behance:
Ссылка на сайт:
Если статья была вам полезна, подписывайтесь на нас на VC.ru