Мы начали разработку проекта Whoosh в 2020 году. Заказчик обратился за созданием сервиса экспресс-доставки для пользователей, проживающих в США. Начинать планировалось с Нью-Йорка с дальнейшим расширением территории обслуживания.
В планы входило создать сайт для компании, которая с одной стороны станет надежным логистическим партнером для бизнеса, а с другой — удобной площадкой для курьеров, позволяющей оформиться на работу в режиме онлайн и отслеживать свой доход.
На данный момент Whoosh оказывает услуги курьерской экспресс-доставки по городу как для физических, так и для юридических лиц. Срочная доставка документов и посылок для организаций, корреспонденции, покупок, цветов, продуктов питания, подарков и товаров до 1,5 тонн — самые частые заказы компании.
Whoosh создавался в первую очередь для иностранной аудитории. Это наложило свой отпечаток на проекте и особенностях работы с ним. Благодаря отзывчивости заказчика, многие из этих особенностей мы отработали достаточно быстро, не совершая ошибок в процессе.
Как известно, в Америке используются другие форматы записи практически для всего. Для удобства целевой аудитории мы настроили отображение времени, под американские стандарты. Привычный нам 24-часовой формат времени был форматирован в 12-часовой с инпутами AM и PM для обозначения времени суток (до и после полудня соответственно).
В отличие от нашей страны, в Америке распространена практика, когда посылки оставляют перед входной дверью. Мы добавили такой способ получения, чтобы упростить процесс доставки.
Сложности возникали и на этапе работы с геолокацией. Связано это во многом с особенностью работы иностранных сервисов. Если в России найти нужную точку на карте и подсказки к ней не составляет труда, то в Америке этот же процесс даже с учетом всех оптимизаций происходит медленнее.
Это связано с особенностью обработки данных непосредственно в самом сервисе Google Maps, а также с записью адресов в Американской практике, когда один и тот же адрес может быть записан различными способами.
Специально для проекта мы провели работы по разработке брендинга и нейминга. Это было необходимо для того, чтобы понять, в каком направлении двигаться при создании дизайна.
В качестве названия было выбрано «whoosh». В английском языке это слово является обозначением скорости и соотносится со звуком рассекаемого при движении воздуха.
«При разработке логотипа мы обратили внимание, что буквы „о“ в названии похожи на пины. Две точки геолокации в слове „whoosh“ стали обозначением быстрой доставкой из одного места в другое»
Антон
Арт-директор
В основе лежат приятные оттенки синего и желтого цветов, а также простая «плоская» графика. Схематичность изображений помогает сфокусировать внимание пользователя на интерфейсе и функционале сайта.
«Работа над данным проектом была интересна еще и благодаря тому, что мы впервые применили технологию Lottie, и с её помощью реализовали сложные анимации. Их создание заняло куда меньше времени, чем мы представляли. Также понравилось работать над анимациями, которые отлично вписались в общую картину дизайна»
Артем
Дизайнер
Использование Lottie-анимаций в дизайне помогло нам улучшить восприятие информации пользователям и создать запоминающиеся страницы. Подробно о Lottie-анимациях мы рассказали в статье на VC.ru.
Настроили интеграцию сайта с иностранной платежной системой Stripe. Это международная платежная система, обеспечивающая безопасный сервис по работе с онлайн-платежами как для бизнеса, так и для покупателей.
Одним из плюсов Stripe можно выделить наличие подробной документации, а также большого сообщества пользователей, которые помогают оперативно решать проблемы, возникающие при работе с сервисом. Также Stripe известна своими инструментами для разработчиков, которые позволяют интегрировать и настраивать обработку платежей с использованием различных языков программирования.
Ни один сервис доставки не может обойтись без геолокации. Она необходима курьерам для прокладывания оптимальных маршрутов, а заказчикам — для отслеживания местонахождения курьеров в режиме онлайн.
Одной из важнейших функций для реализации удобной геологации стало автозаполнение адресов при создании заказа. Для этого мы настроили интеграцию с сервисом Geoapify.
«С самим сервисом проблем не возникало, проблемы возникают скорее в самой системе записи адресов. В крупных американских городах есть боро (административные округа), в которых возможно повторение названий улиц, переулков и так далее. В Geoapify боро указаны не во всех случаях, из-за чего возникает путаница»
Александр
Backend-разработчик
Для решения проблемы с автозаполнением, в код Whoosh была добавлена функция сопоставления адресов с их записью в других источниках. При совпадении отдельных элементов адреса (название улицы, город, район и т. д.), система сопоставляет адрес с боро, в котором он находится.
Интеграция с картами была необходима не только для прокладывания маршрутов. Google помог рассчитать расстояние между точками, что важно для определения конечной стоимости заказа.
В процессе интеграции мы настроили следующие возможности:
Отслеживание местонахождения курьера в процессе перемещения;
Использование контрольных точек курьерами, с помощью которых можно отметить статус доставки;
Прокладывание оптимального маршрута между контрольными точками;
Многоуровневые карточки заказов.
«Если несколько заказов находятся в одном многоэтажном здании, то один заказ по умолчанию будет перекрывать другие. Чтобы это исправить, мы добавили курьеру возможность выбрать, какой заказ ему необходимо отметить. Таким образом он сможет выполнять их в удобном для себя порядке, не подстраиваясь под Google Maps»
Сергей
Frontend-разработчик
Для подписания документов в режиме онлайн, настроили интеграцию с сервисом DocuSign. Это сервис, позволяющий загружать, отправлять на подписание, просматривать, подписывать и отслеживать статус документов.
«DocuSign — один из самых проблематичных для интеграции сервисов. Тем, кто ни разу не сталкивался с этой программой, будет сложно с ней разобраться»
Александр
Backend-разработчик
Основные проблемы DocuSign:
Регистрация. На сайте программы нет прямой ссылки на регистрацию аккаунта разработчика, хотя именно он нужен для настройки интеграции;
Нет доступных шаблонов. Для каждого отдельного аккаунта необходимо создавать отдельный шаблон, которому будет присвоен уникальный id. Другая компания использовать тот же шаблон не сможет, несмотря на то что он хранится в базе данных DocuSign.
Личные кабинеты
Разработали отдельные личные кабинеты для курьера и отправителя. У каждого личного кабинета есть свой функционал, закрывающий основные потребности пользователей.
Кабинет отправителя позволяет:
Создавать заявку на отправку посылки;
Отслеживать перемещение курьера;
Отслеживать статус доставки в режиме онлайн;
Вносить денежные средства на кошелек в личном кабинете, чтобы избежать постоянной комиссии при оплате услуг.
Для регистрации этого типа пользователя нет особых требований. Для пользования сервисом будет достаточно указать фамилию, имя и номер телефона, начинающийся с +1 (т.е. номера Северной Америки).
Для регистрации в качестве курьера необходимо дополнительно пройти идентификацию по паспортным данным, а также заполнить и подписать документы, которые автоматически уйдут в обработку.
После этого курьер получит возможность:
Видеть доступные заказы;
Пользоваться удобной картой для прокладывания оптимального маршрута;
Отслеживать доступные к выводу средства.
Внутренний калькулятор
В Whoosh реализована функция автоматического подсчета стоимости доставки. Это полезно как для курьеров, так и для их клиентов.
Цена рассчитывается по формуле, в которой учитывается вес посылки, расстояние и оплата услуг курьера. Также были введены дополнительные коэффициенты. Например, если на маршруте курьера образуются пробки или работа идет во время повышенного спроса.
«Через админку можно настроить ставку курьера в разное время. Например, утром пониже, днем повыше и т.д. Эти значения автоматически подставляются в формулу»
Николай
Аналитик
В то же время расчет стоимости для курьеров немного отличается. Это связано с дополнительными факторами в виде процента, который забирает себе компания, а также чаевые, полученные за заказ.
«Прозрачность таких данных критически важна, так как американцы заполняют налоговую декларацию самостоятельно. А потому им нужно понимать, какую сумму они получили в качестве заработной платы, а какую — чаевыми, которые не облагаются налогом»
Николай
Аналитик
Админ панель
Чтобы администраторам было удобно управлять наполнением и работой сайта, мы сделали многофункциональную административную панель. Помимо стандартного управления пользователями, мы добавили функции:
Отслеживание платежей
Администратор имеет возможность посмотреть, когда и какие платежи были совершены пользователями. Также отслеживается статус подтверждения транзакции со стороны банка.
«На западе банковские процессы работают несколько иначе. У нас запросы обрабатываются в течение нескольких секунд, тогда как иностранные платежные системы делают то же самое в течение часов, а иногда и дней. Поэтому важно, чтобы администраторы могли отследить, принял банк платеж или нет»
Николай
Аналитик
Настройки коэффициентов
Администратор сайта может вручную выставить коэффициенты для автоматических расчетов стоимости доставки.
Настройки способов доставки
В админке есть возможность настроить параметры способов доставки. Всего их три: пешая, на машине и на велосипеде. У каждого из способов есть свой базовый рейт, а также коэффициенты, зависящие от веса посылки.
Отслеживание заказов
В системе управления хранится информация о всех созданных заявках на доставку. В карточке заказа хранится вся необходимая информация: данные заказчика, курьера, информация о посылке и адрес доставки.
Заключение
Мы разработали функциональный сервис доставки с удобными личными кабинетами для каждого типа пользователя с приятной анимацией и плавным адаптивом. Сервис постоянно развивается и дополняется новыми функциями.
![Пиробайт [Pyrobyte]](https://assets-global.website-files.com/655d9f72b952a7dd4b815c27/655d9f72b952a7dd4b815dcd_telegram.svg){kind=icon}
