Эффективный инструмент для роста вашего логистического бизнеса. Кейс разработки корпоративного сайта для экспедиторской компании Growex

1. Вводная задача от заказчика, проблематика, цели

Growex — транспортно-экспедиторская компания с офисами в Новороссийске, Санкт-Петербурге и Ростове-на-Дону и представительствами во Владивостоке и Москве. Компания ориентируется на B2B-аудиторию: работает с импортёрами и экспортёрами, оказывает ВЭД-сопровождение.

Ключевые направления работы:

• организация мультимодальных перевозок (море, авиа, ж/д, авто)
• контейнерные и неконтейнерные перевозки
• логистика опасных, проектных, акцизных фитосанитарных, ветеринарных грузов
• перевозка сборных грузов
• финансовая логистика
• таможенное оформление

Ситуация на старте проекта

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

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

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

Как всё начиналось

Клиент пришел с референсами и поручил нам полностью обновить сайт:

• Разработать новый визуал — отказаться от тёмных, устаревших решений
• Соблюдать гайдлайн: использовать темно-синий, салатовый и оранжевый цвета
• Добавить интерактива и анимации — сайт должен «двигаться, ездить, действовать по клику»
• Использовать минимум фото со стоков, больше «живых» визуалов
• Сделать акцент на продающий, легкий, понятный дизайн
• Избавиться от красного цвета, типичного для конкурентов в нише.

Мы начали с проработки прототипов на каждую страницу. Сделали много итераций.

Согласовали структуру, подобрали цвета, шрифты, приступили к дизайну. Создали анимации, чтобы всё выглядело живо и эффектно. Команда была в восторге. Начали делать вёрстку. Но…

После тестирования сайта на фокус-группе из 30 человек заказчик пересмотрел требования к дизайну. Решили отказаться от анимации и ярких визуальных элементов в пользу спокойной подачи и минимализма. Так мы оказались в ситуации: кардинально упростить дизайн и не испортить его. Ну что ж, такие задачи нам тоже по плечу!

2. Описание реализации кейса и творческого пути по поиску оптимального решения

После пересмотра концепции мы переключились на новый подход. Решили оставить общие паттерны, а акцент перенести на калькулятор клиента и удобную верстку. Заново продумали сценарии взаимодействия. Затем создали 85 полноценных страниц и 89 блоков-конструкторов, содержимое которых можно быстро редактировать и заполнять. Получилось 174 элемента.

У клиента много услуг, подуслуг, отдельных подсистем и единиц бизнеса. Без функционального решения на сайте легко запутаться. Чтобы пользователю было проще, мы встроили в проект сайта калькулятор. Он позволяет:

• Выбрать тип транспорта: морской, железнодорожный, авиаперевозка
• Указать маршрут: из города или порта отправления в точку назначения
• Использовать встроенные карты с метками: офисов компании, морских портов, ЖД-станций и аэропортов
• Указать тип груза: коробки, контейнеры, автомобили, судовые партии
• Ввести данные по весу и объему
• Предусмотреть дополнительные услуги: страхование, финансовое сопровождение, таможенное оформление

Заявка клиента автоматически уходит в CRM-систему менеджеру.

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

Стек: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки GSAP, Floating UI и Swiper.

Дизайн

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

Строгое решение разбавили удобные формы, блоки прокрутки, выезжающий рекламный блок с новостями, услугами и Telegram-каналом. На главной странице пользователям доступны три вида карты: офисы, порты, ЖД-станции и аэропорты с точной геолокацией.

Создали разделы: кейсы, вакансии по регионам, документы, партнёры, структура компании и пресс-центр. Дизайн можно адаптировать под запросы бизнеса без программиста — изменять блоки и формы.

3. Результаты сотрудничества

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

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

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

Сайт стал инструментом продаж и понятной коммуникации с клиентами. Пользователи легко находят нужную услугу, сами могут рассчитать стоимость перевозок и быстро оставляют заявку. Все страницы открываются за 2–3 клика. Интерфейс сайта воспринимается логично и просто.