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