ПЭК: разработка сайта и личного кабинета

Один из крупнейших российских грузоперевозчиков, специализирующийся на транспортировке сборных грузов.

Клиент: Транспортная компания «ПЭК»
Экспертиза: Проектирование, дизайн, разработка и развитие сайта, сложная интеграция с внутренними корпоративными системами
ДАТА ЗАПУСКА: август 2015

pecom.ru

Транспортная компания «ПЭК» пользуется известностью на рынке транспортно-экспедиционных услуг благодаря минимальным срокам доставки груза, широкой филиальной сети, высокому уровню сервиса и оптимальной ценовой политике. Созданная в 2001 году, на сегодняшний день Компания «ПЭК» доставляет грузы по всей территории РФ (включая Крым) и территории Казахстана посредством авто- и авиатранспорта. С 2014 года также выполняет доставку грузов из Китая.

В зону обслуживания Компании «ПЭК» входят около 100 000 населенных пунктов.

Задача — сделать понятный и удобный ресурс для корпоративных и частных клиентов.

На старте работ мы проанализировали информацию, полученную от клиента, а также данные счетчиков сайта, чтобы определить основные параметры проекта.

характеристики целевой аудитории
наиболее востребованные разделы и сервисы на сайте
устройства и браузеры, с которых заходят на сайт
пользовательские сценарии — успешное/неуспешное прохождение.

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

На основе результатов анализа мы подготовили прототип сайта.

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

Для сайта мы разработали сервисы, интегрированные по API с внутренними системами автоматизации компании: заявка на перевозку, калькулятор, проверка статуса груза.

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

Калькулятор и заявку на базе frontend мы переписали заново. Заявка — более 3000 строк кода — написана в виде отдельного компонента. В заявке и калькуляторе постоянно используются AJAX-запросы, что снижает нагрузку на сервер при первой загрузке страницы. В заявке использована сложная клиентская валидация, чтобы избежать ошибок еще на этапе заполнения форм.

Денис Ежков

технический директор

01/04

Личный кабинет

Регистрация в личном кабинете теперь мгновенная и не требует заключения дополнительного соглашения. Зарегистрированные пользователи имеют доступ к истории своих заявок и могут использовать ранее оформленные заявки как образец.

02/04

Решение для интернет-магазинов

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

03/04

API для корпоративных клиентов

Для интеграции функций личного кабинета с собственной информационной системой (интернет-магазином, 1С: Предприятие и т. п.) для корпоративных клиентов доступен API. С его помощью можно в автоматическом режиме узнавать статус грузов, оформлять заявки, получать список грузов за период.

04/04

Cайт HR-департамента

В компании ПЭК более 8000 сотрудников, она активно продвигает свой HR-бренда и корпоративные ценности. Для привлечения и работы с соискателями мы создали отдельный сайт, посвященный карьере в компании и ее корпоративной культуре.

При программировании мобильной версии использовался фреймворк Vue.js, генерирующий необходимую разметку из шаблонов на лету в соответствии с состоянием данных формы. Верстка производилась с использованием HTML5/CSS3. Ресурсы обрабатываются и сжимаются при помощи gulp.

Денис Ежков

технический директор