Разработка корпоративного сайта для компании Growex

Как мы создали современный B2B-сайт с калькулятором перевозок, интерактивными картами и масштабируемой системой управления контентом.

Сайт: growex-group.ru

О клиенте Growex

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

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

Задача

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

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

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

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

Проектируем цифровую платформунового поколения

Цели проекта

Разработать масштабируемый корпоративный сайт

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

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

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

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

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

Похожая задача стоит и перед вашей компанией?

Расскажите о проекте — предложим решение, опираясь на наш опыт и реализованные кейсы

Прототипыэкранов

Решение

Создали масштабируемую цифровую платформу для логистического бизнеса

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

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

Он позволяет:

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

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

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

Стек:

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

Цифровая платформадля современной логистики

Дизайн

Современный интерфейс для удобной работы с логистическими сервисами

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

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

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

Результат

Современный корпоративный сайт для развития логистического бизнеса

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

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

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

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