ТрансАтлантик — крупная транспортная компания, осуществляющая международные контейнерные перевозки, включая нестандартные и опасные грузы: от морских и авиа до ж/д и автоперевозок.
Сайт ТрансАтлантик нуждался в обновлении: старый уже не отражал уровень компании и не вызывал у клиентов необходимого доверия. В команде почувствовали — нужен инструмент, который будет уверенно представлять ТрансАтлантик в цифровой среде и превращать посетителей в клиентов.
Для решения задачи заказчик обратился к нам. Нужно было провести полный редизайн сайта, сделав его более современным, вызывающим доверие, визуально выделяющимся среди конкурентов и отражающим реальные кейсы и компетенции компании.
Перед тем как погрузиться в дизайн, мы решили ближе познакомиться с клиентом, рынком и его аудиторией. Чтобы получить полную картину, разделили исследование на три этапа:
1 — Интервью. Поговорили с реальными клиентами. Оказалось, их главный страх — потеря или порча груза. Это стало ядром будущего UX.
2 — Игра «Карточки впечатлений». Вместе с клиентом сформулировали ключевые ценности сайта: гибкость, прозрачность, безопасность и интегрированность (то есть связь сайта с CRM и другими сервисами для автоматизации процессов).
3 — Мудборд и конкурентный анализ. Провели анализ конкурентов и собрали мудборд из визуальных образов, которые помогают создать ощущение надежности: линейная графика, сдержанные тона с яркими акцентами, простые формы и крупные заголовки
Мы собрали всё воедино и выстроили логичный путь пользователя через сторителлинг. Каждый экран рассказывает о компании — от сути бизнеса до процесса перевозок. Эффект усиливается за счёт фирменного стиля, линейной графики и 3D-анимации.
Сайт выполнен в оттенках синего — в цвет контейнеров ТрансАтлантик. Сдержанный светлый фон и простые формы подчеркивают честность компании, а крупные заголовки — устойчивость. Линейная графика отображает прозрачность процесса.
Все 3D-сцены мы разработали сами — от сценария до отладки скорости проигрывания на каждом устройстве. В анимации контейнер забирает машина, потом он загружается на транспортное судно и перевозится дальше по маршруту. Цикл наглядно демонстрирует, как оказывается услуга.
Чтобы прозрачно показать процесс перевозок, мы подробно описали кейсы ТрансАтлантик. Для каждого раздела сайта:
Каждый раздел оформлен в единой логике — чёткие заголовки, простые формы, синий цвет контейнеров, ключевые моменты кейса.
Сайт адаптирован для всех устройств — от смартфонов до 4K-мониторов. На наш взгляд, мы добились лучшего результата, сохранив баланс между качеством 3D‑сюжетов и скоростью загрузки страниц.
В результате получился современный сайт с плавной анимацией, который не теряется на фоне конкурентов и помогает продавать услугу. Главная страница рассказывает о ТрансАтлантик через сторителлинг, а раздел с кейсами — подробно и прозрачно показывает, как устроены перевозки.
Новый визуальный стиль лёг в основу брендинга: клиент теперь использует его в презентациях, на выставках и в промоматериалах.
