Авторизация
Сброс пароля
Редизайн сайта транспортной компании «ТрансАтлантик»
Заказчик: Трансатлантик
Страница кейса/результат: https://transatlantic.pro/
В новом кейсе рассказываем про то, как сделали сайт со сложной анимацией и сторителлингом для компании «Трансатлантик». Работаем с формами и смыслами, играем в «Карточки впечатлений», создаем 3D-модели и уделяем внимание 4K мониторам.
1. Вводная задача от заказчика, проблематика, цели
Когда холодные звонки и рекомендации клиентов теряют свою эффективность, аудитория всё чаще формирует образ компании через сайт. ТрансАтлантик обратились к нам именно с такой задачей: провести полный редизайн сайта и сделать его более продающим, современным и выделяющимся среди конкурентов.
2. Описание реализации кейса и творческого пути по поиску оптимального решения
Чтобы разработать новый дизайн сайта, специалисты продакшена разбили работу над проектом на несколько этапов.
1. Исследование
2. Концепция главной страницы
3. Стиль
Исследование
На этапе исследования для сбора информации команда использовала несколько инструментов:
— Серия интервью с заказчиками
В подробностях выяснили фокус компании: что, куда и как они перевозят. В основном это международные контейнерные перевозки для самых разных клиентов: от заводов до частных компаний. Главное преимущество — качественный сервис и прозрачные выгодные условия.
Также специалисты JetStyle составили список частых вопросов от клиентов — какие у них есть барьеры при взаимодействии с компанией.
— Игра «Карточки впечатлений»
Дизайнеры собрали на доске Miro карточки с прилагательными, которые описывают то, какой компания видит себя и какой хочет, чтобы ее видели клиенты. А потом вместе с заказчиком оценили каждую карточку по шкале от 1 до 10.
Так получился набор качеств, на которых нужно сделать акцент на сайте:
1. Гибкость — просто решаем сложные вопросы клиентов;
2. Прозрачность — честно рассказываем обо всех этапах перевозок и о том, из чего складывается стоимость;
3. Безопасность — гарантируем сохранность груза, потому что перевозим в собственных контейнерах;
4. Интегрированность — привезем откуда и куда угодно, любым видом транспорта.
— Мудборд
Команда исследовала конкурентов и собрала мудборд из кусочков интерфейсов и других визуальных образов, которые создают нужное впечатление. А затем определила, за счет каких приемов это впечатление достигается. И приступила к разработке концепции.
Концепция главной страницы
Главная страница — точка первого контакта с сайтом. У нее имиджевый характер, именно она должна транслировать характеристики компании и создавать впечатление.
По итогам исследования команда JetStyle определила две основных целевых аудитории сайта: профи в перевозках и новички. Первым важно показать экспертность перевозчика, а вторым — понятно рассказать про услуги и дать уверенность, что им помогут во всем разобраться.
Чтобы соблюсти баланс экспертного и понятного, дизайнеры придумали концепцию сквозной истории. Главный герой — контейнер из парка «ТрансАтлантик». Сюжет развивается вокруг всех этапов сотрудничества компании с клиентами. Каждый новый экран — это ответ на один из частых вопросов, о которых заказчики рассказали на этапе исследования.
Так получилось не только закрыть потребности двух аудиторий, но и отстроиться от конкурентов. Большинство сайтов подобной тематики имеют одинаковую блочную структуру и пытаются рассказать сразу все: про услуги, условия, новости компании и проч. Это размывает фокус и никак не выделяет компании. Главная страница сайта «ТрансАтлантик» концентрируется только на главном, а все остальные аспекты освещены на тематических страницах.
Стиль
Как и для подачи информации, так и для визуального стиля JetStyle выбрали лаконичность. Для фона использовали оттенки серого, а для расстановки акцентов — оттенки синего, в цвет фирменных контейнеров «ТрансАтлантик».
Чтобы визуально подчеркнуть единую историю, мы использовали анимацию на каждом экране. Контейнер словно перемещается сверху вниз по разным этапам перевозки и разным видам транспорта.
Страница с кейсами
Если главная страница производит впечатление и рассказывает о преимуществах, то страница с кейсами — подтверждает, почему этим словам можно верить. Здесь использован тот же стиль, но, вместо сквозной подачи, информация разбита на блоки и важные факты визуально выделены — так клиентам не нужно вчитываться, а можно найти ответы на свои вопросы, бегло взглянув на страницу.
У остальных страниц — утилитарное назначение. Их сделали в той же логике, что и кейсы: структурно, с выделением ключевых моментов и с применением нового стиля.
3. Результаты сотрудничества
Благодаря новому дизайну сайта, концептуальной подаче и нестандартным элементам вроде анимированных блоков у заказчика появился сайт, не похожий на большинство в нише, а потенциальные клиенты стали получить ответы на свои вопросы и могут быстрее принимать решение о том, чтобы подать заявку на перевозку.
4. Заключение
Дизайн только обновили, поэтому точных цифр эффекта пока нет. Но есть потенциал, что обновление повысит конверсию в заявки сразу от двух категорий целевой аудитории: профессионалов и новичков в деле перевозок.