Транспортная компания «ПЭК» пользуется известностью на рынке транспортно-экспедиционных услуг благодаря минимальным срокам доставки груза, широкой филиальной сети, высокому уровню сервиса и оптимальной ценовой политике. Созданная в 2001 году, на сегодняшний день Компания «ПЭК» доставляет грузы по всей территории РФ (включая Крым) и территории Казахстана посредством авто- и авиатранспорта. С 2014 года также выполняет доставку грузов из Китая.
В зону обслуживания Компании «ПЭК» входят около 100 000 населенных пунктов.
Задача — сделать понятный и удобный ресурс для корпоративных и частных клиентов.
Аналитика
На старте работ мы проанализировали информацию, полученную от клиента, а также данные счетчиков сайта, чтобы определить основные параметры проекта.
Мы изучили структуру и навигацию на сайте, главную и ключевые внутренние страницы, протестировали удобство использования веб-форм. Провели анализ сайтов конкурентов, отметили удачные решения и сервисы.
Проектирование
На основе результатов анализа мы подготовили прототип сайта.
Разделили аудиторию на корпоративных и частных клиентов, спроектировали структуру сайта таким образом, чтобы представитель каждого из сегментов мог удобно и быстро решать свои задачи. Мы разместили в основном меню самые востребованные разделы, а на главной странице дали пользователям возможность сразу рассчитать стоимость доставки груза и отследить статус заявки. Это самые используемые сервисы среди клиентов ПЭК.
Разработка
Для сайта мы разработали сервисы, интегрированные по API с внутренними системами автоматизации компании: заявка на перевозку, калькулятор, проверка статуса груза.
Из-за особенностей работы внутренней системы автоматизации клиента нам приходилось разрабатывать новые сервисы на базе предыдущих. И это усложняло нам задачу. Не было подробной документации по взаимодействию внутренней корпоративной системы и сервисов сайта, работа строилась на базе гипотез наших специалистов, а документация создавалась с нуля. Для отладки мы разработали более 30 основных тест-кейсов.
Калькулятор и заявку на базе frontend мы переписали заново. Заявка — более 3000 строк кода — написана в виде отдельного компонента. В заявке и калькуляторе постоянно используются XHR-запросы, что снижает нагрузку на сервер при первой загрузке страницы. В заявке использована сложная клиентская валидация, чтобы избежать ошибок еще на этапе заполнения форм.
При программировании мобильной версии использовался фреймворк Vue.js, генерирующий необходимую разметку из шаблонов на лету в соответствии с состоянием данных формы. Верстка производилась с использованием HTML5/CSS3. Ресурсы обрабатываются и сжимаются при помощи gulp.
