Цифровая логистика: кейс создания корпоративного сайта для Growex на 1С-Битрикс
О клиенте
Growex — транспортно-экспедиторская компания с офисами в Новороссийске, Санкт-Петербурге и Ростове-на-Дону и представительствами во Владивостоке и Москве. Компания ориентируется на B2B-аудиторию: работает с импортёрами и экспортёрами, оказывает ВЭД-сопровождение.
Ключевые направления работы:
- организация мультимодальных перевозок (море, авиа, ж/д, авто)
- контейнерные и неконтейнерные перевозки
- логистика опасных, проектных, акцизных фитосанитарных, ветеринарных грузов
- перевозка сборных грузов
- финансовая логистика
- таможенное оформление
Задача
Ситуация на старте проекта
Growex пришла с запросом на обновление сайта. Старый ресурс не отражал масштаб бизнеса, авторитет компании на рынке и ее статус. Также он хуже позволял продавать услуги. Страницы были схематичными, структуру нельзя было редактировать.
Клиент понимал, что бизнес вырос, и нужно новое решение, которое отвечает современным цифровым стандартам. Оно поможет клиентам быстро ориентироваться в услугах, будет удобным в использовании для заказчиков и для компании.
Новый сайт можно будет развивать и настраивать под текущие бизнес-задачи. Клиент поручил нам разработать многостраничник с калькулятором, картой и редактором страниц.
Как всё начиналось
Клиент пришел с референсами и поручил нам полностью обновить сайт:
- Разработать новый визуал — отказаться от тёмных, устаревших решений
- Соблюдать гайдлайн: использовать темно-синий, салатовый и оранжевый цвета
- Добавить интерактива и анимации — сайт должен «двигаться, ездить, действовать по клику»
- Использовать минимум фото со стоков, больше «живых» визуалов
- Сделать акцент на продающий, легкий, понятный дизайн
- Избавиться от красного цвета, типичного для конкурентов в нише.
Мы начали с проработки прототипов на каждую страницу. Сделали много итераций.
Согласовали структуру, подобрали цвета, шрифты, приступили к дизайну. Создали анимации, чтобы всё выглядело живо и эффектно. Команда была в восторге. Начали делать вёрстку. Но…
После тестирования сайта на фокус-группе из 30 человек заказчик пересмотрел требования к дизайну. Решили отказаться от анимации и ярких визуальных элементов в пользу спокойной подачи и минимализма. Так мы оказались в ситуации: кардинально упростить дизайн и не испортить его. Ну что ж, такие задачи нам тоже по плечу!
Решение
После пересмотра концепции мы переключились на новый подход. Решили оставить общие паттерны, а акцент перенести на калькулятор клиента и удобную верстку. Заново продумали сценарии взаимодействия. Затем создали 85 полноценных страниц и 89 блоков-конструкторов, содержимое которых можно быстро редактировать и заполнять. Получилось 174 элемента.
У клиента много услуг, подуслуг, отдельных подсистем и единиц бизнеса. Без функционального решения на сайте легко запутаться. Чтобы пользователю было проще, мы встроили в проект сайта калькулятор. Он позволяет:
- Выбрать тип транспорта: морской, железнодорожный, авиаперевозка
- Указать маршрут: из города или порта отправления в точку назначения
- Использовать встроенные карты с метками: офисов компании, морских портов, ЖД-станций и аэропортов
- Указать тип груза: коробки, контейнеры, автомобили, судовые партии
- Ввести данные по весу и объему
- Предусмотреть дополнительные услуги: страхование, финансовое сопровождение, таможенное оформление
Заявка клиента автоматически уходит в CRM-систему менеджеру.
Сделали структуру сайта масштабируемой. Если клиент захочет, то сможет добавлять новые страницы, разделы и функциональность. Не понадобится программист, чтобы переписывать код.
Стек: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки GSAP, Floating UI и Swiper.
Дизайн
Концепция дизайна менялась в процессе, поэтому расскажем о нем подробнее. Сначала он был ярким и с многочисленными анимациями. Позже мы проработали более сдержанный вариант, но сохраняющий аутентичность бренда.
Строгое решение разбавили удобные формы, блоки прокрутки, выезжающий рекламный блок с новостями, услугами и Telegram-каналом. На главной странице пользователям доступны три вида карты: офисы, порты, ЖД-станции и аэропорты с точной геолокацией.
Создали разделы: кейсы, вакансии по регионам, документы, партнёры, структура компании и пресс-центр. Дизайн можно адаптировать под запросы бизнеса без программиста — изменять блоки и формы.
Результат
Даже после существенных изменений концепции сайта получился качественный продукт, отвечающий всем требованиям клиента. Он отражает текущий масштаб бизнеса и помогает отстроиться от конкурентов.
Компания может развивать структуру, подключать новые услуги и изменять подачу без сложных переделок. Визуальная подача стала сдержанной, но функциональной — подходит под задачи B2B-аудитории.
Теперь можно управлять страницами сайта без участия разработчиков: обновлять тексты, добавлять блоки, менять порядок элементов. Каждая услуга — микролендинг, который команда заказчика сможет пересобирать под нужды конкретных подразделений. Добавлены калькулятор, карта с офисами и точками перевозки, удобная форма заявки.
Сайт стал инструментом продаж и понятной коммуникации с клиентами. Пользователи легко находят нужную услугу, сами могут рассчитать стоимость перевозок и быстро оставляют заявку. Все страницы открываются за 2–3 клика. Интерфейс сайта воспринимается логично и просто.