- Заказчик
- Ситимобил — один из ведущих сервисов заказа такси в России.
- Задача
- Расширить аудиторию «Ситимобил», сделать заказ такси проще и удобнее для пользователей «ВКонтакте».
В 2018 году один из ведущих сервисов такси, компания «Ситимобил», приняла решение расширять аудиторию пользователей. В качестве новой перспективной площадки рассматривали соцсети. На тот момент VK Mini Apps была молодой платформой с большими перспективами. Тогда для VK Mini Apps существовало не так много приложений. Нам предстояло выступить в роли первопроходцев и решать нетривиальные задачи совместно с командой VK Mini Apps.
Решение
Нам предстояло:
- Разработать VK Mini App для заказа такси.
- Интегрировать приложение с социальными функциями «ВКонтакте».
- Сделать его привычным и удобным для пользователя.
Мы стремимся улучшать взаимодействие с нашими пассажирами и хотим, чтобы они могли заказывать такси, не совершая при этом лишних действий. Кроме того, такая синергия — это уникальная история, в России нет больше ни одного крупного игрока на рынке такси, который в рамках партнерства был бы интегрирован в крупнейшую российскую социальную сеть. Благодаря таким сотрудничествам с другими проектами Mail.ru Group мы можем объединять экспертизу и помогать пользователям решать их повседневные задачи. В рамках проекта заказа поездок через «ВКонтакте» мы, как самый быстрорастущий сервис такси, планируем не только повысить лояльность нашей текущей аудитории, уже присутствующей на платформе «ВКонтакте», но и привлечь новых пользователей благодаря интеграции нашего сервиса в соцсеть.
Арам Аракелян
генеральный директор «Ситимобил»
Сложности
Классические приложения заказа такси, к которым мы привыкли — это нативные мобильные приложения. VK Taxi написано с использованием фреймворка React и библиотек VK UI и VK Connect. Привычные нам фичи — карта, движение и поворот машинок — понятно реализуются в нативных приложениях, а в вебе с ними возникает много вопросов.
Основная особенность — интеграции с соцсетью: пользователи могут разделить стоимость поездки с друзьями, а также выбрать в качестве пункта назначения адреса, указанные в сообществах «ВКонтакте» (магазины, кафе). В официальных приложениях под Android и iOS встраиваемое приложение открывается в WebView и интегрируется с основным с помощью библиотеки VK Connect.
Интеграции
В процессе работы мы интегрировали между собой три системы: соцсеть «ВКонтакте», сервис аналитики и бэкенд-сервер оформления заказов «Ситимобил».
- Социальная сеть «ВКонтакте» предоставляет платформу VK Mini Apps и информацию о пользователе.
- Сервис аналитики JavaScript SDK отслеживает события в приложении и передает команде аналитиков.
- Сервер «Ситимобил» используется для расчёта стоимости поездки, оформления заказа, хранения истории поездок и адресов, а также организует логистику и передаёт данные о заказах.
Карта и отображение машин
Процесс поиска водителя отображается на карте. Когда водитель подтверждает заказ, пользователь видит местоположение такси. Важно отображать передвижение автомобиля на карте плавно и непрерывно — анимация должна начинаться сразу.
Мы пробовали использовать пять различных алгоритмов, но каждый из них был далёк от идеала. Где-то машина не поворачивалась, где-то криво отображалась карта. Движение машин легко сделать в нативных приложениях, но в вебе при отображении динамических объектов на карте возникают сложности. Мы изучили все возможные источники и нашли всего одну статью на английском в блоге индийского каршеринга с описанием, сделали по аналогии, и все заработало.
Константин Тарачёв
технический директор arcsinus
Выбор адреса и история поездок
Пункт назначения можно ввести вручную, поставить точку на карте или ввести название сообщества «ВКонтакте». Мы добавили опцию быстрого выбора: в окне ввода отображаются те адреса, по которым пользователь ездил раньше. Любимые адреса можно добавить в «Избранное». Все поездки сгруппированы по дням и доступны в «Истории поездок».
Оплата и завершение поездки
Оплатить поездку можно через VK Pay или банковской картой. Сумму легко разделить с другими пользователями ВКонтакте. При оплате через VK Pay пользователи получают скидку 15 % на первые 10 поездок.
По окончании поездки пользователь оценивает заказ, как и в классическом приложении. Если оценка не максимальная, его просят указать одну из причин или написать свои комментарии.
Результат
Работа над проектом длилась полгода. После бета-тестирования исправили ошибки и добавили возможность оплаты картой. Дизайн приложения сделан по гайдам «ВКонтакте» под авторским надзором дизайнеров главной соцсети Рунета. Над VK Taxi работали 8 сотрудников arcsinus: аналитик, проектировщик, два разработчика, менеджер, дизайнер, верстальщик и тестировщик. Это был не первый проект для «Ситимобил», нас связывает долгая история продуктивного сотрудничества.
За 13 месяцев работы «Такси ВКонтакте» обработал порядка 3,9 млн заказов, причем треть от этого числа пришлась на июль 2020 года. В компании рассказали, что в пиковые дни на мини-приложение VK приходится до 10 % от всех поездок с «Ситимобил» и в отдельных городах эта цифра достигает порядка 20–30 %.
Совместно с arcsinus мы разработали несколько проектов, и в каждом возникала необходимость решать нестандартные задачи. Отличительная черта коллег — способность глубоко погружаться в проект, применять новые технологические решения и достигать результата несмотря ни на что. Это крайне важно для нас
Оганес Аракелян
соучредитель «Ситимобил»
