Whoosh

Мы начали разработку проекта Whoosh в 2020 году. Заказчик обратился за созданием сервиса экспресс-доставки для пользователей, проживающих в США. Начинать планировалось с Нью-Йорка с дальнейшим расширением территории обслуживания.

Behance 2020

Награда в номинации UI

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

На данный момент Whoosh оказывает услуги курьерской экспресс-доставки по городу как для физических, так и для юридических лиц. Срочная доставка документов и посылок для организаций, корреспонденции, покупок, цветов, продуктов питания, подарков и товаров до 1,5 тонн — самые частые заказы компании.

Особенности разработки

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

1. Разница в системах изменений
Как известно, в Америке используются другие форматы записи практически для всего. Для удобства целевой аудитории мы настроили отображение времени, под американские стандарты. Привычный нам 24-часовой формат времени был форматирован в 12-часовой с инпутами AM и PM для обозначения времени суток (до и после полудня соответственно)

2. Менталитет
В отличие от нашей страны, в Америке распространена практика, когда посылки оставляют перед входной дверью. Мы добавили такой способ получения, чтобы упростить процесс доставки.

3. Геолокация
Сложности возникали и на этапе работы с геолокацией. Связано это во многом с особенностью работы иностранных сервисов. Если в России найти нужную точку на карте и подсказки к ней не составляет труда, то в Америке этот же процесс даже с учетом всех оптимизаций происходит медленнее.

Это связано с особенностью обработки данных непосредственно в самом сервисе Google Maps, а также с записью адресов в Американской практике, когда один и тот же адрес может быть записан различными способами.

Дизайн

Специально для проекта мы провели работы по разработке брендинга и нейминга. Это было необходимо для того, чтобы понять, в каком направлении двигаться при создании дизайна.

В качестве названия было выбрано «whoosh». В английском языке это слово является обозначением скорости и соотносится со звуком рассекаемого при движении воздуха.

При разработке логотипа мы обратили внимание, что буквы «о» в названии похожи на пины. Две точки геолокации в слове «whoosh» стали обозначением быстрой доставкой из одного места в другое.

Антон Лисицкий

Арт-директор

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

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

Работа над данным проектом была интересна еще и благодаря тому, что мы впервые применили технологию Lottie, и с её помощью реализовали сложные анимации. Их создание заняло куда меньше времени, чем мы представляли. Также понравилось работать над анимациями, которые отлично вписались в общую картину дизайна.

Артем Сафаров

Дизайнер

Использование Lottie-анимаций в дизайне помогло нам улучшить восприятие информации пользователям и создать запоминающиеся страницы. Подробно о Lottie-анимациях мы рассказали в статье на VC.ru.

Интеграция с платежными системами

Настроили интеграцию сайта с иностранной платежной системой Stripe. Это международная платежная система, обеспечивающая безопасный сервис по работе с онлайн-платежами как для бизнеса, так и для покупателей. .

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

Настройка геолокации

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

Автозаполнение адресов
Одной из важнейших функций для реализации удобной геологации стало автозаполнение адресов при создании заказа. Для этого мы настроили интеграцию с сервисом Geoapify.

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

Александр Саморуков

Бэкенд

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

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

В процессе интеграции мы настроили следующие возможности:

Отслеживание местонахождения курьера в процессе перемещения;
Использование контрольных точек курьерами, с помощью которых можно отметить статус доставки;
Прокладывание оптимального маршрута между контрольными точками;
Многоуровневые карточки заказов.

Если несколько заказов находятся в одном многоэтажном здании, то один заказ по умолчанию будет перекрывать другие. Чтобы это исправить, мы добавили курьеру возможность выбрать, какой заказ ему необходимо отметить. Таким образом он сможет выполнять их в удобном для себя порядке, не подстраиваясь под Google Maps.

Сергей Дудченко

Фронтэнд

Автоматизация документации

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

DocuSign - один из самых проблематичных для интеграции сервисов. Тем, кто ни разу не сталкивался с этой программой, будет сложно с ней разобраться в том.

Александр Саморуков

Бэкенд

Основные проблемы DocuSign:

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

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

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

Кабинет отправителя позволяет:

Создавать заявку на отправку посылки
Отслеживать перемещение курьера
Отслеживать статус доставки в режиме онлайн
Вносить денежные средства на кошелек в личном кабинете, чтобы избежать постоянной комиссии при оплате услуг

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

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

После этого курьер получит возможность:

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

Внутренний калькулятор

В Whoosh реализована функция автоматического подсчета стоимости доставки. Это полезно как для курьеров, так и для их клиентов.

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

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

Николай Оноприенко

Аналитик

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

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

Николай Оноприенко

Аналитик

Админ панель

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

Отслеживания платежей
Администратор имеет возможность посмотреть, когда и какие платежи были совершены пользователями. Также отслеживается статус подтверждения транзакции со стороны банка.

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

Николай Оноприенко

Аналитик

Настройки коэффициентов
Администратор сайта может вручную выставить коэффициенты для автоматических расчетов стоимости доставки.

Настройки способов доставки
В админке есть возможность настроить параметры способов доставки. Всего их три: пешая, на машине и на велосипеде. У каждого из способов есть свой базовый рейт, а также коэффициенты, зависящие от веса посылки.

Отслеживание заказов
В системе управления хранится информация о всех созданных заявках на доставку. В карточке заказа хранится вся необходимая информация: данные заказчика, курьера, информация о посылке и адрес доставки.

Заключение

Мы разработали функциональный сервис доставки с удобными личными кабинетами для каждого типа пользователя с приятной анимацией и плавным адаптивом. Сервис постоянно развивается и дополняется новыми функциями.

Смотреть сайт

Заключение

Мы разработали функциональный сервис доставки с удобными личными кабинетами для каждого типа пользователя с приятной анимацией и плавным адаптивом. Сервис постоянно развивается и дополняется новыми функциями.

Смотреть сайт