New Way Logistic — логистика без фигни
Проект с множеством эффектной анимации для компании, которая не стоит на месте, а перевозит грузы
New Way Logistic — компания, занимающаяся морскими и железнодорожными грузоперевозками по всей России. Основная проблема отрасли: гигантское количество игроков, не слишком отличающихся по стоимости услуг. И когда у клиента проблема с выбором, здесь всё решает сервис и смелость прямо заявить потребителю, что у него не возникнет проблем при транспортировке груза. На это мы и сделали ставку при разработке сайта.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6534-3463-4362-b366-633765656536__-__empty__mainmockup.png)
Задачи
1
Разработать оптимальную структуру сайта с лёгкой навигацией для комфортного восприятия.
2
Сделать акценты на преимуществах и предложениях компании.
3
Создать лаконичный современный дизайн, внушающий доверие к компании.
4
Сделать сайт универсальным для всех типов устройств.
5
Привлечь более крупных заказчиков.
Аналитика
Рынок лакомых кусочков с деньгами уже поделен, и за каждого крупного клиента логистические компании сражаются не на жизнь, а на смерть. А интересны заказчику именно крупные клиенты — с «физиками» New Way Logistic работает мало и неохотно. Часты истории, когда клиент может перейти к другому подрядчику просто потому, что у того цена на тысячу ниже, поэтому каждый игрок рынка вгрызается зубами в свою клиентскую базу.
В сегменте крупных клиентов все уже всё знают про логистику: что, куда, сколько и как. Да и услуги все компании предлагают одинаковые, и везут одними и теми же способами. Здесь клиента нужно впечатлить так, чтобы ты запомнился. А потом уже договориться о цене :) Причём, все договоренности дальше идут не через сайт. Поэтому-то проект нужен был заказчику, в первую очередь, как ИМИДЖЕВЫЙ инструмент. Даже на форму заявки заказчика уговорила я — мало ли, вдруг захочется потом завоевывать другой рынок.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3532-3238-4536-b233-383738353934__-__empty__10540821_10204314406.jpg)
Ирина
Руководитель проекта
На этапе агрегации мы столкнулись с морем отзывов о перевозчиках, которые из рук вон плохо поступали со своими клиентами, вообще не думая о лояльности:
Часто это объясняется тем, что игроков много, и незаменимых нет. Другими словами, не нравится — найди другого подрядчика, делов-то.
Анализируя целевых персон, мы выяснили, что для заказчиков одинаково важны проверенность компании-партнёра и прозрачность условий работы: это влияет на выбор как «прошаренных» клиентов, так и тех, кто решил воспользоваться услугами логистики впервые.
Анализируя целевых персон, мы выяснили, что для заказчиков одинаково важны проверенность компании-партнёра и прозрачность условий работы: это влияет на выбор как «прошаренных» клиентов, так и тех, кто решил воспользоваться услугами логистики впервые.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6365-3637-4034-a332-303364656262__-__empty__CA.png)
И чтобы клиент с первой секунды понимал, насколько подрядчик соответствует его запросам, на главной мы разместили самую важную информацию: типы перевозок, ключевые факты о компании, реализованные проекты и фотографии команды.
На обсуждении проекта в голову пришло позиционирование, которое помогло бы отстроиться от других компаний при отсутствии явных преимуществ: логистика без Х***НИ. Мы так и сделали на прототипе: мол, вот так чётко, смело и дерзко заявляем, что клиент не столкнется ни с одной проблемой. Так мы решали задачу «запомниться». Потом помедитировали на прототип и таки заменили слово на более цензурное — фигни. Показали клиенту — он посмеялся и сказал, что клёво.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3039-6135-4862-b537-396530663966__-__empty__10540821_10204314406.jpg)
Ирина
Руководитель проекта
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3866-3733-4736-a430-663734303366__-__empty__proto.png)
Блок с фотографиями команды и с описанием проектов вызывает доверие. А на странице контактов к карте дополнительно добавлены реквизиты — это как раз та прозрачность, которая помогает клиенту принять решение в пользу New Way Logistic.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6633-3635-4164-b332-623639376364__-__empty__new_way_logistic_con.png)
Дизайн
На мудборде мы собрали фишки других представителей отрасли, разбавив их вдохновляющими примерами дизайна из других сфер. Также предложили интересные эффекты с наложениями фотографий и необычные буквы-иллюстрации. Идея с фотоматериалами возникла ещё на этапе обсуждения прототипа — в этом было что-то очень трендовое, камерное, классное, будто привет из сериала «Настоящий детектив».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6265-6535-4737-b066-323932306434__-__empty__doubleexpo.png)
В дополнение к двойной экспозиции мы придумали сделать рваные края между блоками на первом макете. Альтернативный вариант получился более лаконичным:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3635-3263-4637-b061-653665663461__-__empty__vars.png)
Команду мы предложили показать в том же стиле и разработать для каждого её члена свой уникальный образ.
Изначально у заказчика не было фотоматериалов, и на макетах мы показали идею на примере двух картинок, сразу договорившись, что заказчик отправляется на фотосессию. На полученных фотографиях все работники в тёмной одежде, и нам было легко сделать двойную экспозицию. Единственное, клиент попросил подобрать не слишком мрачные фото для подложек к портретам, и чтобы те были связаны всё-таки с логистикой.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3132-3830-4137-b030-373835633332__-__empty__lubamorozevskaya.png)
Любовь
Дизайнер
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6565-6565-4961-b264-326331666566__-__empty__fotof.png)
Мне прислали одного человека в нескольких ракурсах, и мы вместе с дизайнером выбрали именно нужные нам ракурсы и выражение лица. А после, на этапе сборки, к эффектным фото присоединилась классная анимация.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3630-6562-4662-b966-323834613738__-__empty__10540821_10204314406.jpg)
Ирина
Руководитель проекта
Разработка
На сайте компании-перевозчика нам хотелось видеть много динамики, потому что деятельность связана с перемещениями грузов в пространстве. Поэтому здесь анимация повсюду, куда ни ткни :)
В промо-блоке на главной, помимо гипнотизирующе-плывущих облаков мы реализовали «живой» текст: буквы меняются хаотично, будто на электронном табло на вокзале или в аэропорту. Сменяющиеся слова также появились на главной в блоке ниже и на странице услуг:
В промо-блоке на главной, помимо гипнотизирующе-плывущих облаков мы реализовали «живой» текст: буквы меняются хаотично, будто на электронном табло на вокзале или в аэропорту. Сменяющиеся слова также появились на главной в блоке ниже и на странице услуг:
Пришлось немного помучиться, чтобы анимировать смену слов. Сложность была в том, чтобы сделать какой-то универсальный приём, который одинаково работал бы везде, где задумана смена текста. Получилось даже лучше, чем хотелось: теперь в админке можно задать вообще любой набор слов, и всё будет работать :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3138-3533-4661-b931-633036656565__-__empty__garbuz.jpg)
Сергей
Разработчик
Особенную анимацию сделали для сотрудников: при наведении на фото фоновое изображение увеличивается.
На странице 404 тоже плывут облака. А в футере слона доставляют контейнером :)
На детальной странице услуг мы реализовали пересчёт дней доставки для автомобильных и ж/д перевозок. Сроки зависят от направления: эти данные вносятся в админке, а на странице сменяются автоматически при нажатии на иконку справа.
На странице для авиа и ж/д перевозок добавлен блок «Позаботятся о грузе», где под фото ответственного сотрудника высвечивается его цитата. Также для каждого типа отправлений есть блок с частыми вопросами: они оформлены как ссылки, и при нажатии раскрывается описание с ответом.
Форма заявки максимально простая, чтобы клиенту легко было её заполнить, а менеджерам проще обработать новый входящий запрос.
Форма заявки максимально простая, чтобы клиенту легко было её заполнить, а менеджерам проще обработать новый входящий запрос.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild6339-3032-4365-b236-623538633365__-__empty__new_way_logistic_mod.png)
И, конечно, для удобства пользователей сайта мы не забыли про адаптивность:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3537-6633-4265-a432-313031636232__-__empty__devices2.png)
«Нью Вей Лоджистик» — проект, который очень сильно греет мне душу. Мне слишком нравится прием с двойной экспозицией и анимация, чтобы я могла об этом промолчать :) Я очень благодарна Антону Боровскому, нашему заказчику. За смелость, конструктив и вечера, посвященные проекту: так уж получилось, что общались мы, в основном, суровыми владивостокскими ночами. В планах у нас — разработка внутренней системы для заказчиков компании.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1573187259/tild3764-3434-4633-a265-326638343335__-__empty__10540821_10204314406.jpg)
Ирина
Руководитель проекта
Готовый проект