Сервис заказа такси во «ВКонтакте»

Ситимобил. Сервис заказа такси во «ВКонтакте»

В 2018–2019 годах мы разработали VK Taxi: мини-приложение для заказа такси «Ситимобил» внутри «ВКонтакте». Пассажир может выбрать адрес из сообщества социальной сети, следить за водителем и разделить стоимость поездки с друзьями.

Такси внутри социальной сети

«Ситимобил» принимал заказы через собственное мобильное приложение, сайт и оператора. Мы уже сотрудничали с сервисом над другими проектами, а на этот раз работали над заказом поездок во «ВКонтакте». Платформа VK Mini Apps позволяет открывать мини-приложения внутри социальной сети. На старте проекта таких приложений было ещё немного, и задачи разработки мы решали вместе с командой платформы.

Новый канал заказа

Заказчик хотел создать официальный сервис вызова такси от VK и получить дополнительный канал привлечения пассажиров. Расширение аудитории и повышение её лояльности были целями проекта. Нам предстояло встроить заказ поездки в социальную сеть и связать его с её возможностями. При этом привычные для такси карту и движение автомобилей нужно было реализовать в веб-приложении: работа с движущимися объектами здесь отличалась от нативных мобильных приложений.

От адреса до поездки

В официальных приложениях «ВКонтакте» для iOS и Android VK Taxi открывается во встроенном окне. При выборе пункта назначения пассажир может указать адрес из сообщества, например магазина или кафе. За расчёт стоимости и оформление заказа отвечает сервер «Ситимобил»: он также хранит историю поездок и адреса, организует логистику и передаёт данные о заказах. Платформа социальной сети предоставляет сведения о пользователях. После подтверждения заказа водителем пассажир видит местоположение такси на карте.

Выбор адреса назначения в VK Taxi: строка поиска, варианты адресов и действие «Сообщество».

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

Карта VK Taxi с жёлтым значком автомобиля, адресной отметкой и состоянием «В пути».

Поездку можно оплатить банковской картой или через платёжный сервис VK Pay, а стоимость разделить с другими пользователями «ВКонтакте». В период проекта при оплате через VK Pay действовала скидка 15 % на первые десять поездок. После поездки пассажир оценивает заказ. Если оценка ниже пяти, приложение предлагает указать причину или оставить комментарий.

Исходная композиция VK Taxi: карта такси и крупный экран оценки поездки с четырьмя выбранными звёздами.

Сервис по правилам платформы

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

Частые вопросы

Какую задачу «Ситимобил» поставил перед командой VK Taxi?

Создать официальный сервис вызова такси во «ВКонтакте». Заказчик рассматривал его как дополнительный канал привлечения пользователей и ставил цели расширить аудиторию и сделать заказ поездки проще.

Какая часть заказа оставалась на стороне «Ситимобил»?

Расчёт стоимости и оформление заказа выполнял сервер «Ситимобил». Он также организовывал логистику и передавал данные о заказах.

Какие социальные функции «ВКонтакте» использовали в VK Taxi?

Пассажир мог разделить стоимость поездки с друзьями и выбрать пунктом назначения адрес магазина, кафе или другого места, указанный в сообществе «ВКонтакте». В официальных приложениях соцсети для Android и iOS VK Taxi открывался во встроенном окне и взаимодействовал с основным приложением через инструменты платформы.

Что пассажир видел на карте после заказа такси?

Поиск водителя отображался на карте. Когда водитель подтверждал заказ, пассажир видел местоположение такси и его движение.

Обсудим ваш проект

Расскажите о задаче — поможем найти подходящее решение.