Помните новогоднюю рекламу Кока-Колы из 90-х? Паровозик из красных светящихся фур едет в снегопаде под песенку «Праздник к нам приходит» — и сразу как-то очень празднично становится :) Но логистика — совсем не праздник, а работа для тех, кто умеет держать своё слово. Так вот, транспортно-логистическая компания TRASKO — настоящая Кока-Кола в мире логистики :) Потому что как без колы нет Нового года, так и без TRASKO нет надежных грузоперевозок из любой точки мира.

У компании в автопарке 400 автопоездов, 21 офис по всей России, более 3000 клиентов. На текущем сайте не хватало инструментов для удобства клиентов, а дизайн устарел — это нам и предстояло изменить.

Работая с клиентом New Way Logistic в 2017-м, который тоже занимается грузоперевозками, мы уже окунулись в особенности рынка логистики — он ультраконкурентный, беспощадный и редко даёт второй шанс, если ты ошибся. А риски самые разные: от человеческого фактора на любом из этапов перевозки (таможенные проволочки, ошибки в документах) до забастовки работников аэропорта, гражданского переворота и ещё бог весть чего. Результат будет один: поедут сроки, и лояльность клиента будет очень сложно вернуть. На лояльности и доверии мы решили сделать особенный акцент.


Предыдущий сайт клиента

Вы задумывались, как вообще устаревают сайты? Вот сделали вы в 2010-м проект: тогда он казался супер-современным, классным и удобным. Дизайн устаревает — факт. Но не это главное: главное, как за годы меняется пользователь — у него появляются определенные ожидания, накапливается опыт взаимодействия. И у него всё меньше времени на то, чтобы найти нужное.

Мы провели аудит предыдущего сайта клиента и выявили несколько проблем:

• инструменты расчёта стоимости грузоперевозок не учитывали некоторых важных критериев;
  
• отдельные таблицы с прайсами путали пользователей — проще их объединить в простой калькулятор для большей вовлеченности и удобства,
  
• на главной было слишком много целевых действий, которые спорили между собой (две формы обратной связи, множество разделов) — их стоило оптимизировать.
  
  

Целевые персоны

На фоне высокой конкуренции в отрасли потенциальному клиенту не так важно, какими будут анимашки на сайте (а они будут!), насколько он красивый и модный. Важнее — функциональность и быстрота поиска нужной информации. А ищет посетитель много всего: и перечень услуг, и преимущества (чтобы быстро составить впечатление), и компетенции компании по отраслям (а есть ли опыт перевозки специфичных грузов?!), и географию. А еще желательно бы калькулятор для расчёта стоимости на виду и какие-то реальные кейсы. Желательно?! Обязательно!

В калькуляторе есть 4 вкладки: сборный груз, отдельный автомобиль, контейнер или авиадоставка. Поля у них только кажутся похожими — на самом деле там множество нюансов на каждом шагу. В общем, наш верстальщик посыпал голову пеплом, но сделал конфетку: при заполнении появляются подсказки, разворачиваются поля, появляются чек-боксы и всё такое :)

Но вёрстка — это только цветочки. Сюрпризов подкинула интеграция с 1С (ожидаемо). При вводе названия города в поле появляется список возможных вариантов. Изначально заказчик планировал, что он на лету будет подхватываться из его 1С-ки. Мы отговорили: предложили забирать список на сайт раз в сутки (думая, что там будет каких-нибудь 100−150 городов). Реально городов оказалось 426 000 — и конечно, тестовый сервер под их натиском падал в обморок. Пришлось сделать по-другому: теперь мы сначала сохраняем ответ от 1С заказчика к себе в файл, а следом грузим его в базу — фактически разбили процесс импорта на 2 этапа. Сейчас в актуальной базе 220 000 городов, и всё летает.

Москва и Санкт-Петербург — особенные в списке российских городов: для них есть отдельные чек-боксы в опциях «Забрать у отправителя» и «Доставить до получателя». Если вы живёте в пределах 1-го транспортного кольца, цена будет одной, если за МКАДом или КАДом (в Спб) — другой. У других российских городов можно указать только километры за город (тоже влияет на стоимость).

Постоянные клиенты оценят — внутри личного кабинета хранится весь документооборот по сделкам (документы можно скачать и распечатать). Заказчик хотел, чтобы версии документов для скачивания всегда были максимально актуальными. Мы не храним их на стороне сайта — когда пользователь заходит на страницу с документами, сайт посылает запрос в 1С-ку, она выдаёт данные. А когда пользователь нажимает на кнопку "скачать", формируется новый запрос к 1С — она формирует документ, присылает его нам, мы скачиваем, сохраняем и выводим для печати.

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

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

Для компании, которая занимается грузоперевозками по всему миру, без английской версии — никуда. В стандартной реализации Битрикса для каждой языковой версии — свои страницы с инфоблоками для заполнения. Но поскольку информации очень много, мы закастомили админку так, что для любого текста есть две вкладки для ввода: на русском и английском. +100 500 к скорости контент-менеджера. И минус сотни нервных клеток наших кодеров :)

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

В промо-блоке на главной — анимированные полосы с иконками грузовиков, самолётов, пароходов и поездов и указанием маршрутов, которые движутся по экрану с разной скоростью и наматывают километраж. Такие же элементы встречаются и на других страницах проекта.

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

С анимацией карты на главной было посложнее: хотели реализовать её средствами CSS, но из-за многослойности (элементы движутся между слоями) от этой идеи отказались. Вместо этого дизайнер отрисовал карту в формате svg, где каждая полоска — отдельный элемент, которым можно управлять с помощью JS (приводим их в движение с помощью скриптов).