Сайт транспортной компании со сторителлингом и 3D-анимацией

Золото + Гран - при

2023

Задача

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

Смотреть сайт

Клиент

ТрансАтлантик — это крупная транспортная компания, которая уже более 7 лет занимается международными грузовыми перевозками, в том числе нестандартных и опасных грузов.

ТрансАтлантик — это крупная транспортная компания, которая уже более 7 лет занимается международными грузовыми перевозками, в том числе нестандартных и опасных грузов.

Исследование

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

Серия интервью с заказчиками

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

Игра «Карточки впечатлений»

В процессе обсуждения с клиентом выделили основные качества, которые должен отражать сайт: гибкость, прозрачность, безопасность и интегрированность.
Для этого шага использовали карточки впечатлений
на доске Miro.

Мудборд

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

Сторителлинг

Затем мы проанализировали собранную информацию
и поняли: нам необходима история. Та, которая расскажет
о компании прямо здесь и сейчас. Поэтому каждый экран
на сайте — это часть единой истории, которую мы подчеркнули с помощью фирменного стиля и 3D-анимаций.

Стиль

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

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

3D-моделирование

Все 3D-сюжеты мы разработали сами: от создания сценария до отладки скорости проигрывания на каждом устройстве. Контейнер из парка перемещается по разным этапам перевозки и видам транспорта и отражает весь цикл оказания услуги.

3D модель корабля для сайта ТрансАтлантик3D модель корабля для сайта ТрансАтлантик3D модель корабля для сайта ТрансАтлантик3D модель корабля для сайта ТрансАтлантик

Контент

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

На основе интервью с клиентом мы подробно описали кейсы компании, чтобы прозрачно показать процесс перевозок.

Адаптивность

Чтобы сохранить баланс между скоростью загрузки страниц
и качеством 3D-сюжетов, мы отладили работу анимаций —
и добились, на наш взгляд, лучшего результата. При этом адаптировали сайт под форматы популярных устройств
и браузеров. В том числе уделили внимание внешнему виду
и функциональности на 4K мониторах.

Результат

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

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

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

Отзыв клиента

Анатолий Ерыванов

Руководитель проекта

«

Команда JetStyle имеет фундаментальный подход, благодаря которому была выстроена работа от анализа потребностей наших пользователей и существующих предложений на рынке, включая наше изделие, до работы с фокус-группами и разработке инновационного решения с узнаваемым дизайном. Был создан новый продукт, которому нет аналогов, как с точки зрения удобства эргономики и дизайна, так и функций, предлагаемых пользователям. Из всей нашей линейки товаров, полученный в результате редизайна, тифлофлешплеер ВОЙСА является самым востребованным у наших клиентов, что говорит само за себя в пользу команды JetStyle.

Над проектом работали

«

Алексей Лисин

UX/UI-дизайнер

Анна Артемьева

UX/UI-дизайнер

Рузанна Бабаян

UX/UI-дизайнер

Иван Князев

3D-дизайнер

Иван Ильин

3D-дизайнер

Валерия Михайлова

Копирайтер

Дмитрий Калинин

Менеджер

Наталья Устименко

Менеджер

Максим Смирнов

Арт-директор
Другие работы

Мы работаем над большим количеством крутых
и интересных проектов. Вот еще несколько.