- Заказчик
- Мясная фабрика «Александров» — крупный белорусский холдинг, объединяющий высокотехнологичное производство, собственную лабораторию и торговый дом
- Задача
- Создать сайт с эксклюзивным дизайном, который понравится китайским оптовым заказчикам. Реализовать мультиплатформенность для разных регионов. Предоставить техническую поддержку
Компания ориентирована на B2B-сегмент и сейчас особое внимание уделяет продвижению на китайском рынке. До нашего сотрудничества у мясокомбината не было сайта, а работа с клиентами велась через белорусские B2B-маркетплейсы. Сейчас в приоритетах компании расширение на китайский рынок, и для этого необходим сайт-визитка.
Главная функция сайта — представить продукцию и сформировать положительный имидж компании. Поэтому дизайн в этом проекте был на первом месте.
Дизайнерские решения
Первым этапом стало изучение вкусов аудитории из Китая. Китайцы предпочитают яркие, контрастные цвета. Так красный символизирует удачу и успех, золотой — престиж и богатство, синий — доверие. Так как наш клиент производит говядину, то выбор пал на красный.
Интересный факт: красный уже не так популярен в Китае, как раньше. Исследования рынка показывают, что молодежь нередко причисляет его к заезженным цветам, а старшее поколение консервативно отзывается хорошо.
Анимации, слайдеры, автопроигрывание видео — обязательные элементы. Статика воспринимается как устаревший дизайн. Мы использовали:
- Видео с автопроигрыванием на главном экране
- Отдаление картинок
- Движущуюся инфографику
- Слайдер с историей компании
- Выезжающий текст
- Изменение цветов блоков при наведении
- Появление теней при наведении
Китайцы доверяют компаниям, если видят реальные лица. Желательно размещать фото сотрудников, руководства, офиса и производственных мощностей. Это увеличивает конверсии.
Так мы и сделали.
Социальные доказательства: в переводе на человеческий, означает отзывы
На сайте отдельно разместились все отзывы китайских партнеров, чтобы показать надежность компании.
Помимо погружения в особенности китайского мировосприятия, мы проанализировали 160 мясных фабрик Аргентины, Бразилии, Австралии и США, чтобы найти лучшие решения и сделать сайт заказчика уникальным.
Горизонтальная прокрутка
Главной фишкой визуальной концепции стала горизонтальная прокрутка. Каждый раздел представлен в виде отдельного полноэкранного блока, а навигация по сайту напоминает перелистывание страниц книги вместо привычного вертикального прокручивания.
Каталог в виде быка
Каталог — вторая особенность проекта. Вместо стандартного списка или сетки товаров реализовали интерактивного быка. Пользователь может выбрать часть туши непосредственно на изображении, после клика он выбирает конкретную позицию и переходит в карточку товара с подробной информацией. Такого решения не было ни у кого из конкурентов.
Пользователь наводит курсор на часть туши — подсвечивается красным, нажимает — открывается список продукции, нажимает на продукт — открывается карточка
Техническая реализация
Для простого управления контентом сайт был реализован на CMS Bitrix. Этот движок стабильно поддерживает сложные анимации и нестандартные визуальные решения. Также в CMS простая и наглядная административная панель, с помощью которой клиент может редактировать и добавлять контент.
Мультиязычность реализовали через отдельные языковые директории — для каждого свои ссылки:
Русский — / (основная версия)
Английский — /en/
Китайский — /cn/
Отдельные URL для языковых версий делают сайт более понятным для пользователей и поисковых систем:
Пользователь сразу попадает на нужный язык — если переходит по ссылке site.com/cn/, видит сайт на китайском без необходимости переключать язык вручную.
Можно сразу отправить клиенту прямые ссылки на нужную версию.
Упрощается кеширование — каждая языковая версия загружается независимо, снижается вероятность ошибок с сохранением настроек.
Уникальные URL помогают поисковикам правильно распознавать контент, что важно для ранжирования.
Hreflang-теги помогают поисковикам определить, какая версия сайта предназначена для какого региона. Китайские пользователи видят китайскую версию, англоязычные — английскую. Поисковые системы не воспринимают эти версии как дубликаты, поэтому они не конкурируют друг с другом в выдаче и не теряют позиции.
Подключили форму обратной связи для взаимодействия с клиентами. Потенциальный партнер отправляет запрос через форму, и он попадает в корпоративный почтовый ящик компании.
Навигация на сайте реализована поэкранно, вместо привычной вертикальной прокрутки используется горизонтальная. Это сделано с помощью FullPage.js. Вместо обычного скролла, где страница движется построчно, каждая секция занимает 100% экрана и фиксируется. При прокрутке или свайпе происходит переключение на следующий экран, как будто пользователь листает слайды или страницы книги.
Тестирование и запуск
Особое внимание уделили тестированию адаптивности сайта — горизонтальная прокрутка и анимации должны были корректно отображаться на всех устройствах.
Также мы добились быстрой загрузки сайта, несмотря на обилие визуальных эффектов. Для этого оптимизировали все анимации — это снизило нагрузку на сервер.
Проблемы и их решения
После запуска сайта столкнулись с проблемой: заявки с формы обратной связи не доходили на e-mail. Проверили систему — с нашей стороны все работает штатно. Причина оказалась в настройках почтового сервера. Сисадмин заказчика внес корректировки, и письма начали приходить.
Год спустя ситуация повторилась. Провели тестирование, временно подключили свою почту. Заявки уходят, но клиент их не получает. Решение оказалось простым — смена e-mail. После этого все запросы стали проходить без сбоев. На этапе тестов получили несколько реальных заказов. Один из них особенно запомнился. Человек писал: «Где мое мясо? Я сделал заказ. Где моя говядина?». Так что сайт работает, клиенты идут.
Результаты
После запуска сайта заметно увеличилось количество заявок из-за рубежа: Китая, Узбекистана, Казахстана, Азербайджана и Армении. В этом мы сами убедились во время выяснения проблем с доставкой писем — ящик был завален запросами.
Клиент остался доволен сайтом. Сейчас мы работаем с компанией в формате техподдержки — своевременно обновляем версию CMS Bitrix и отвечаем на запросы клиента по технической части.