(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(50387116, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(50387116, 'hit', window.location.href);
{"id":14293,"url":"\/distributions\/14293\/click?bit=1&hash=05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","hash":"05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","title":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0438 \u043a\u043e\u043f\u0435\u0439\u043a\u0438","buttonText":"","imageUuid":""}

«Это вам не сосиски в супермаркеты возить». Как мы делали сайт для транспортной компании, перевозящей опасные грузы

Что вы представляете при фразе «сайт для транспортной компании»? Стоковые картинки с машинами и длинные блоки с текстами, где половина слов — это непонятные термины. Поэтому, когда к нам в NAJES обратилась транспортная компания «Эверест», мы решили разбить эти стереотипы. Рассказываем, как сделали стильный сайт для логистического бизнеса.

На связи команда веб-студии NAJES! За сайтом к нам обратилась транспортная компания «Эверест». Ребята занимались не только обычной перевозкой товаров и материалов, но и работали с опасными грузами. Мы решили не делать стандартный сайт с большой фотографией грузовика на первом экране, как у большинства подобных компаний. Погрузились всей командой в эту сложную отрасль, провели полноценное исследование и… сейчас расскажем, что из этого вышло.

С чего все начиналось?

Сначала было все просто — к нам постучался проектный маркетолог от компании «Эверест». Нужно было сделать лендинг для транспортной компании… но затем превратить его в многостраничник.

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

Поэтому было решено сделать абсолютно новый сайт. Но сначала предстояло разобраться во всей этой «транспортной истории». И начали мы с главной страницы.

Провели маркетинговые исследования, чтобы выделиться из кучи транспортных компаний, которые «на одно лицо»

Обычно, когда мы договариваемся с заказчиком, то отталкиваемся от задач проекта и предлагаем ему несколько вариантов работы. Все варианты сотрудничества перечислять не будем. Грубо говоря, выбор такой:

  • сайт с прототипом, дизайном и версткой
  • маркетинговые исследования продукта, рынка, целевой аудитории (ЦА) и конкурентов + сайт с прототипом, дизайном и версткой

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

Майнд-карта и таблица конкурентов не только помогают сделать классный сайт. Эти данные можно использовать для планирования продвижения и стратегии бизнеса.

Что же выбрали ребята из «Эвереста»? Все клиенты на тот момент приходили к ним по «сарафанному радио». Поэтому у них не было понимания своей ЦА, четкого позиционирования и информации о конкурентах — об этом просто никогда не задумывались. Чтобы привлекать новых клиентов, они выбрали второй вариант с маркетинговыми исследованиями

Анализ конкурентов: одинаковый визуал, расплывчатое позиционирование и калькуляторы на сайтах

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

Мониторим по ключевым запросам компании из поисковой выдачи. По сути, повторяем путь потенциального покупателя

Отбираем для анализа только тех, кто предлагает такой же продукт, как и наш заказчик. В данном случае это была перевозка опасных грузов. Перевозчики мяса и сосисок в «Магнит» нас не интересуют

Выбираем общие и «нишевые» критерии, по которым будем их сравнивать. Кроме позиционирования, цен и дизайна сайта, в транспортной отрасли это еще и тарифы на перевозку, наличие автопарка, гарантии, сроки и т.д.

Собираем информацию по каждому из критериев и составляем сравнительную таблицу. Она индивидуальна для каждой компании. Все зависит от «нишевых» критериев, по которым покупатели сравнивают компании в отрасли

Выделяем сильные стороны каждого конкурента. Отдельно выносим моменты по каждой компании, которые понадобятся для создания позиционирования.

Что мы отметили конкретно у конкурентов «Эвереста»:

🚩 многие размещают на сайте калькуляторы и квизы, через которые заказчик может посчитать стоимость услуги для своего случая

🚩 практически у всех стандартный визуал на сайте

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

Анализ целевой аудитории: крупные клиенты, которым важны сроки, цена и безопасность

Со стороны кажется, что у всех транспортных компаний одна ЦА. Но если углубиться в анализ, то становится понятно — это не так. Опасные грузы вряд ли интересуют маленькие фирмы и стартапы. Чтобы понять, кто же такие клиенты «Эвереста» и чего они хотят, мы:

Проанализировали описание ЦА от заказчика. Узнали, с какими компаниями сейчас работает «Эверест».

Провели анализ ключевых запросов через Wordstat. Выяснили, что интересует клиентов, которые заказывают перевозку опасных грузов, какие вопросы и ожидания у них есть.

Промониторили отзывы о нашем заказчике и его конкурентах. Узнали, кто заказывает услугу, на что они чаще всего обращают внимание.

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

С каждым шагом майнд-карта с анализом ЦА становилась все шире и подробнее. Мы выделили главные моменты, которые потом помогли нам собрать работающий прототип:

🚩 наша основная ЦА — крупные корпорации, госучреждения и компании, занимающиеся международными перевозками

🚩 доверие у них вызывает опыт компании, ее кейсы

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

🚩 главный страх ЦА — задержка в сроках или если груз арестуют из-за отсутствия разрешения

Взяли боли целевой аудитории и «переложили их» на прототип будущего сайта

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

Предложили графический дизайн-концепт вместо стоковых фотографий и бесконечных полотен текста

Одна из главных сложностей, с которой мы столкнулись на этапе дизайна — полное отсутствие визуального контента у «Эвереста». Не было никаких фотографий, которые можно использовать на сайте. У прямых конкурентов практически не было удачных решений — все те же стоковые фотографии грузовиков. Тогда в качестве референсов мы попробовали взять сайты компаний, которые занимали смежные ниши. И вот здесь уже удалось найти интересные решения.

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

🚩 Сделали изометрические иллюстрации. Даже запчасти стали выглядеть намного привлекательнее. И вновь — никаких стоковых фото, где те же шины и краны выглядели бы серо и мрачно:

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

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

Уход маркетолога, проблемы с прототипом и «переделка по второму кругу»: как мы заказчику дополнительные страницы к сайту делали

Главную страницу мы закончили. Она уже работала как полноценный лендинг, поэтому мы запустили в работу сайт уже в таком виде. А дальше надо было добавить дополнительные страницы с услугами. И здесь что-то пошло не так.

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

➡ заказчики уже полностью доверились нам, поэтому особо не проверяли прототипы страниц

➡ бывший маркетолог уже не особо парился по поводу работы

И вот мы сделали прототипы страниц, даже сверстали дизайн, и тут выяснилось… что все не то и не так.

❌ мы заполнили 9 карточек для запчастей на страничке — выяснилось, что их должно было быть 49

❌ сделали разделы и написали тексты для разных услуг — оказалось, что часть из них неактуальна

❌ две страницы были сверстаны для русской версии, а их нужно было делать для английской

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

Наша команда сделала глубокий вдох, а затем решила пойти другим путем. Мы собрали досконально все правки от заказчика, поняли, что делать и сразу начали править это в дизайне. Попотеть пришлось нормально — однако заказчику это не показывали. В конце концов, разобрались со страницами и завершили многостраничник.

Клиент даже не заметил наших внутренних разладов. Да и зачем его было напрягать? Главное — сделать крутой сайт, а не жаловаться на бывшего маркетолога и оправдывать свои косяки.

Что получили в итоге?

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

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

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

0
41 комментарий
Написать комментарий...
Ilya

Зачет! Среди кучи стоковых однотипных сайтов действительно выделяется. Но креатив в меру. А желтый отсылает к цвету опасности, но мягко и аккуратно. Я бы как заказчик был рад :)

Но что лучше сработает на аудиторию - вот это вопрос. Этот стилёк или колхозное, но такое близкое духу Иван Петроича, которому нужон перевозчик.

Как с хомяком в твиттере.

Ответить
Развернуть ветку
Никита Алексеев

Тут всё же целевая аудитория не Петровичи для перевозки мяса с оптовой базы🤣

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

С хомяка в твиттере посмеялся)

Ответить
Развернуть ветку
Сергей Клыгин

Да уж, совсем не стоковые и однотипные иллюстрации))) Тут даже цвет не потрудились поменять)

Ответить
Развернуть ветку
Никита Алексеев

А мы разве где-то указывали, что сами отрисовывали иллюстрации?)

Мы их брали со стока и дорабатывали под этот проект.

Ответить
Развернуть ветку
Medix IT

Классный сайт, анимация движения фуры понравилась))

Ответить
Развернуть ветку
Никита Алексеев

Спасибо, в целом одна из задач была сделать что-то залипательное)

Ответить
Развернуть ветку
Ольга Полосухина

Добавьте блок "танчики". Провели фуру по препятствиям.

Ответить
Развернуть ветку
Fo Bo Hatt

Очень много труда вложили в этот сайт, молодцы!

Ответить
Развернуть ветку
Никита Алексеев

Спасибо)

Жаль только сейчас уже не мы сопровождаем сайт и на нем всплывают порой косяки в верстке или в контенте...

Ответить
Развернуть ветку
Дмитрий Сатаров

Поддерживаю

Ответить
Развернуть ветку
Дмитрий Неизвестный

Топчик

Ответить
Развернуть ветку
Никита Алексеев

Спасибо)

Ответить
Развернуть ветку
Борис Супонев

сочетание цветов удачное и техническая часть сайта сделана удобно и понятно для пользователя

Ответить
Развернуть ветку
Никита Алексеев

Анализ конкурентов, подбор референсов и полное доверие от заказчика позволили нам создать такой проект)

Ответить
Развернуть ветку
Чушпан Маратович

Разрешение на перевозку по установленному маршруту и Сертификат на продукцию – ссылок на изображения нет.

Ответить
Развернуть ветку
Никита Алексеев

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

Ответить
Развернуть ветку
Егор Зарубин

Прекрасный кейс! Спасибо за грамотную статью с полезными "подводными камнями"))

Ответить
Развернуть ветку
Никита Алексеев

Спасибо!)

Ответить
Развернуть ветку
Данил Working

В целом норм, но гипотетически желтый цвет зае*бет, лучшим решением было бы сделать отдельные элементы с этим беспонтовым желтым цветом, если очень хочется. Типа карточек, иконок и т.д. Лучше выбирать безопасное решение, которое покроет большинство пользователей, чем радикально-креативное. Ну или как уже сказал упаковывать в маркетинговые артефакты типа баннером и тд. 6 из 10

Ответить
Развернуть ветку
Никита Алексеев

А чем он может за*бать?

Почему считаете, что ваши предложения будут лучшим решением?

Ответить
Развернуть ветку
Велоцираптор

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

Ответить
Развернуть ветку
Просто друг

А какие решения вы считаете удивительными? Как вы это трактуете? Разве сайт должен удивлять чем-то?)

Ответить
Развернуть ветку
Никита Алексеев

Мы говорим о сайте или о каком-то подарке или безделушке, которая должна УДИВЛЯТь?)

Что вы закладываете вообще в слово "удивительное" в этом контексте?

Ответить
Развернуть ветку
Велоцираптор

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

Ответить
Развернуть ветку
Никита Алексеев

А вы материал читали?

Ответить
Развернуть ветку
Велоцираптор

Да

Ответить
Развернуть ветку
Inna Larionova

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

Ответить
Развернуть ветку
Unknown

Что по скорости загрузки на мобильных пейджспид показывает?

Ответить
Развернуть ветку
Сергей Мухаев

Ориентируемся на сервис loading express, пейдж спид особо тильду не жалует да и не только ее. По лоадингу сайт в желтой зоне

Ответить
Развернуть ветку
Ольга Полосухина

Если заказчик сам не в состоянии определить,сколько услуг у него актуализированы, то о каком ответственном подходе речь?

Ответить
Развернуть ветку
Сергей Мухаев

На этапе разработки всякое бывает

Ответить
Развернуть ветку
Никита Алексеев

Это сплошь и рядом на самом деле и это даже не только у малого бизнеса)

Ответить
Развернуть ветку
критичный скептик

а я не понял, ради чего это было. какого эффекта достигли? измеряли хоть какие-то метрики? чем это лучше стоковых фото с грузовиками? тема не раскрыта

Ответить
Развернуть ветку
Никита Алексеев

Задача больше была визитка/промо, а не лидген, у них основная услуга это перевозка опасных грузов, очень узкая ниша, с учётом того что они только по дальнему Востоку и Китаю работают.

Ответить
Развернуть ветку
M. Zappa

Хороший кейс. Напишите во сколько обошелся такой сайт заказчику вместе со всей доп работой ?

Ответить
Развернуть ветку
Сергей Мухаев

Более 400, конкретных написать не могу

Ответить
Развернуть ветку
Анатолий А

Может у меня нет вкуса , но я увидел одно сплошное желто- серо- черное пятно.

Ответить
Развернуть ветку
Никита Алексеев

Ну если опираться на вкусовые предпочтения в этом плане, то ладно)

Надеюсь, что если вдруг вы будете заказчиком какой-либо работы дизайнера вы так не будете давать обратную связь ему)

Ответить
Развернуть ветку
Анатолий А

Если бы я был заказчиком , то предварительно прислал бы несколько вариантов сайтов , которые мне нравятся . Вашего сайта в моем списке не будет 😀.

Ответить
Развернуть ветку
Никита Алексеев

Ну, ладно, не будет так не будет:)

Ответить
Развернуть ветку
Сергей Мухаев

Дизайн вещь субъективная :)

Ответить
Развернуть ветку
38 комментариев
Раскрывать всегда