Кейс: Сервико-АвтоКорпоративное приложение для планшетов крупной логистической компании Сервико

Кейс разработки СервикоАвто

Проблемы и задачи

СервикоАвто — крупнейшая дистрибьюторская и логистическая компания в восточно-сибирском регионе.

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

Требовалось:

  • Создать функционал, который бы упростил взаимодействие между водителем и менеджером (диспетчером);

  • Разработать систему оповещений при отклонении водителя от маршрута;

  • Создать функционал, позволяющий собирать, хранить и редактировать данные о водителях и грузовике;

  • Интегрировать приложение с порталом топливных организаций и «Дорожной сетью»;

  • Оптимизировать время на построение маршрута от точек погрузки и разгрузки в приложении;

  • Уменьшить время ответа менеджера.

Логотип СервикоАвто

Как мы решили задачи клиента

Разработали приложение, которое закрывает потребности всех участников: и заказчика, и менеджеров, и самих водителей.

Разработка приложения

Водителям приложение позволяет:

  • Автоматизировать свой путь — внутри есть встроенный навигатор для крупнотоннажных авто, на экране отображаются заправки и опасные зоны;

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

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

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

Диспетчерам (менеджерам) приложение позволяет:

  • Каждые 8 часов получать информацию о том, опаздывает водитель или идет в графике, чтобы корректировать следующий маршрут;

  • Отправлять оповещения как конкретному человеку, так и всем водителям сразу;

  • При необходимости удаленно отключать водителя от системы.

Возможности диспетчеров

Аналитика

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

«Так как это приложение для внутреннего пользования, основной проблемой было найти и изучить прямых конкурентов. Было негде подсмотреть какие-то фишки и решения, ведь никто не публикует такие продукты в сторы. Приняли решение, что за основу работы возьмем смежных конкурентов. Брали автомобильные проекты и приложения со встроенными картами. Смотрели, что можно взять от них»

Вячеслав

Аналитик

Это помогло нам спроектировать все экраны на этапе прототипирования, не упустив ни одной детали.

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

Для этого мы составили формулу, которая позволяет рассчитать, сколько времени на преодоление маршрута есть, сколько прошло, высчитать среднюю скорость движения и спрогнозировать, успеет ли водитель вовремя доставить груз.

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

Николай

Аналитик

Проведение предпроектной аналитики

Прототипирование

Перед отрисовкой дизайна мы разработали прототип интерфейса в Figma. Это позволило оценить логику работы интерфейса и заранее внести корректировки.

Разработка прототипа интерфейса

Дизайн

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

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

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

Илья

Дизайнер

Проектирование дизайна

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

Разработка нового логотипа и фирменного стиля

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

Блок новостей

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

Lottie — это библиотека для веб-разработки iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение.

От скорости грузовика зависит интенсивность движения анимации. Когда он стоит, анимация не движется. Как только водитель тронулся с места, она «оживает».

Создание анимации для грузовиков

Разработка

Для реализации функционала навигации водителя по маршрутам мы использовали Яндекс.Карты в виде пакета для React Native, который написан с использованием Yandex MapKit. В пакете не были реализованы полноценные функции навигации и движения по маршруту. Их мы воплотили на нативном языке Java и успешно использовали в основной части приложения (в React Native).

«Передача новой заявки и сообщений водителям происходит посредством протокола связи WebSocket. Он устанавливает постоянное соединение между клиентом (в данном случае приложение) и сервером, и если серверу есть что сообщить клиенту, то он отправляет сообщение, которое обрабатывается приложением мгновенно, без задержек»

Алексей

Fullstack-разработчик

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

Разработка функционала навигации

Интеграция с Яндекс.Картами и настройка геолокации

Заказчику была критически важна функция получения уведомлений об опоздании/опережении водителем графика и отклонении от маршрута. Для этого нужно было решить проблему с координатами, полученными от GPS.

В Яндекс. Картах они не всегда соответствуют реальному положению объекта. При сбоях GPS происходит отклонение: точка может прыгать по карте, исчезать или отображаться за пределами маршрута.

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

Интеграция с Яндекс.Картами и настройка геолокации

«Если водитель отклоняется более, чем на 20 км, то маршрут перестраивается, и диспетчеру приходит уведомление. Сложность была в том, что не всегда это корректно работало. Трудно было отследить именно эти 20 км. Приходилось сверять по гугл-картам, после чего в эмуляторе выверять все до пикселя»

Владимир

Тестировщик

Тестирование

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

Проводились тесты на эмуляторе Android Studio. В чем плюсы этой программы? В ней есть встроенный GPS-навигатор, в котором можно задавать начальную и конечную точку, и как бы двигаться по маршруту.

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

Владимир

Тестировщик

Тестирование проекта

Резюме

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

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

Александр

CEO Pyrobyte

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

Все кейсы