Главная/Портфолио/Приложение для курьерской службы доставки
СДЭКПриложение для курьерской службы доставки
Рассказываем, как всё началось. Шёл 2017 год. У федеральной службы доставки СДЭК на счету 17 лет работы в логистике, сотни офисов и тысячи пользователей. А мобильного приложения до сих пор не было.
Тендер на разработку выиграли мы. Предстояло реализовать непростой функционал в красивой UI/UX упаковке, чтобы пользователи:
- отслеживали статус посылки,
- рассчитывали стоимость доставки,
- вызывали курьера,
- находили ближайшие офисы,
- связывались с колл-центром.
Подготовка к работе
Мы знали, что у СДЭК есть своя экспертиза в Android-разработке и они могут ревьюить наш код. Поэтому было логично начать именно с Android приложения. План был такой: сначала выкатываем нативное приложение под Android и уже потом, с учётом накопленного опыта, разрабатываем iOS версию. Предстояло много работы, поэтому на написание документации ушло довольно много времени. Чтобы дело пошло быстрее, СДЭК выделил нам отдельного менеджера. Закончив с этим этапом, дальше мы решили двигаться малыми итерациями.
Первая версия Android приложения
Начали с нескольких базовых функций:
- уточнение статуса заказа по номеру накладной,
- поиск офисов в радиусе 1, 3 и 10 км, по графику работы и условиям приема,
- звонок в колл-центр,
- заказ обратного звонка.
Первую фазу мы завершили осенью 2017. Релиз в Google Play состоялся 20 сентября.
На этом этапе хочется отметить работу с картой. Геопозиция в приложении определяется автоматически, но при необходимости можно задать её и вручную. Приложение сохраняет геолокацию и подставляет нужные данные на всех экранах.
Вторая версия Android приложения
Здесь мы разработали оставшиеся функции:
- калькулятор стоимости доставки
- вызов курьера
Важным моментом была работа с фильтрами. И калькулятор, и вызов курьера учитывают несколько основных параметров:
- кто пользуется приложением: отправитель или получатель
- откуда забрать груз и куда доставить
- сколько весит посылка и какого она размера
- в какое время лучше доставить груз получателю
После ввода параметров форма калькулятора меняется, подстраивается под запросы пользователя. За интуитивно понятным интерфейсом спрятан непростой скринфлоу, учитывающий самые разные сценарии. Пользователь может свободно перемещаться между экранами — данные, которые он ввёл, сохраняются автоматически.
Ещё одна фишка калькулятора — несколько вариантов расчёта. От самого дешёвого, но долгого, до быстрого, но подороже. История расчётов тоже сохраняется.
Кроме того, в калькуляторе есть список с дополнительными опциями. Подъём на этаж, СМС-уведомления и другие мелочи, которые так или иначе влияют на стоимость. При необходимости пользователь управляет ими на отдельном экране с помощью кастомных контролов.
В целом, самой трудозатратной, но вместе с тем и самой интересной частью проекта стал именно калькулятор. Его функционал расширялся буквально на ходу. Все изменения были согласованы с заказчиком и, несмотря на них, уже через пару месяцев мы выкатили вторую версию приложения. Всего через пару месяцев после первой.
iOS приложение
На третьем этапе разработали iOS приложение с функционалом I и II фаз. У нас уже был багаж знаний и опыта, поэтому этот этап мы прошли без проблем. В App Store СДЭК появился в апреле 2018.
UI/UX дизайн
Сначала дизайн был простым. По желанию клиента сделали меню в виде SpringBoard. На экране с картой сделали поиск: пользователи искали по городу, следом вводили адрес. Добавили карточки офисов с базовой информацией: адрес, время работы, весовые ограничения и номер телефона.
Но в жизненном цикле мобильного продукта так или иначе наступает момент, когда нужно обновиться. С момента запуска требования бизнеса и клиентов выросли. Тогда с учётом пожеланий пользователей и наших рекомендаций, СДЭК решил изменить дизайн под современные тренды. В новой концепции главный экран заменили более современные Tab Bars. Пункты меню «Наши офисы», «Рассчитать доставку», «Вызвать курьера», «Отследить заказ» — стали таб барами «Найти», «Офисы», «Расчеты», «Курьер», «Меню» в нижней части экрана.
Карту сделали информативнее и удобнее. Раньше пользователи указывали город в России, а потом искали офис доставки. Теперь один запрос — и вы нашли отделение СДЭК по названию страны, города, адреса. Обновили карточку офиса: можно посмотреть адрес и время работы офиса, а также название ближайшей наземной остановки. Ещё пользователи могут строить маршрут от текущего или выбранного местоположения до офиса.
Дальше будем наводить красоту в калькуляторе — сделаем редизайн. Продолжение следует!
Новые возможности приложения
Сейчас помимо дизайна улучшаем приложение и с технической стороны. Прикрутили пуш-нотификации, чтобы оповещать юзеров, что посылка отправлена, прибыла в пункт выдачи, передана курьеру на доставку или вручена. Для Android версии обеспечили поддержку AndroidX и добавили SSL Pinning, чтобы препятствовать перехвату трафика третьей стороной — MITM-атакам.
Ещё добавили авторизацию: теперь пользователи в своем профиле могут просматривать список заказов.
Выводы
Результатом гордимся: получилось мобильное приложение с интуитивно понятным UI/UX дизайном и гибким калькулятором для расчёта доставки. Сегодня у приложения в Google Play и App Store суммарно более 1 200 000 скачиваний. Средний рейтинг оценок в App Store и Google Play — 4,7 и 4,5 соответственно.
Подход с последовательной разработкой нативных Android и iOS приложений полностью себя оправдал. Как и планировали, мы обкатали все трудные места на одной платформе, а потом быстро портировали приложение на другую. Помогли клиенту сэкономить средства и минимизировали число переделок.
Еще один приятный вывод касается тестирования двумя командами: нашей и заказчика. Некоторые баги были связаны со сложной спецификой логистического бизнеса. В этой ситуации тестирование двумя командами сработало на пять с плюсом.
Стек технологий
Android: Java, Databinding, Rxjava, Dagger 2, Retrofit, Objectbox
iOS: Swift, VIPER, Dependency Injection, Realm, Eureka
Server-Side: Java 8, Spring, Hibernate, PostgreSQL, MapStruct, Flyway
Integrations: Fabric, Firebase, Appsflyer, UXCam, Google Maps