«Ситидрайв» запустил прогрессивное веб-приложение

Продакт-менеджер рассказывает, как работали над проектом и чем PWA отличается от обычной «вебки».

«Ситидрайв» запустил прогрессивное веб-приложение

В августе 2024 года каршеринг-сервис Ситидрайв выпустил бета-версию прогрессивного веб-приложения для мобильных браузеров. Теперь для аренды автомобиля не нужно скачивать отдельное приложение – достаточно зайти на сайт с телефона. В этой статье Анастасия Голованова, менеджер по продукту, рассказала о своём первом проекте в компании – создании веб-приложения, сложностях, с которыми ей пришлось столкнуться, и дальнейшими планами по развитию проекта.

Зачем каршерингу веб-приложение?

В декабре 2023 года приложение Ситидрайва было удалено из App Store – стало невозможно привлекать новых пользователей на IOS, а также взаимодействовать с ними из-за отключения пуш-уведомлений. В поисках решения этой проблемы было запущено несколько проектов, одним из которых стала разработка веб-версии сервиса. После возвращения приложения в стор мы по-прежнему видим необходимость в развитии веб-версии, как альтернативной платформы. Это решение сделает наш сервис ещё более независимым и стабильным в работе с пользователями.

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

Разработка MVP

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

В компании уже были наработки веб-версии – приложение начинали разрабатывать в 2022 году, поэтому первое, с чего началась работа – это анализ качества кода и проверка наличия всех модулей. Несмотря на то, что большая часть была написана – код сильно устарел и не работал, так как за два года бэкэнд был усовершенствован и переписан.

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

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

  • LTV
  • CAC
  • Регистрация (новый пользователь)
  • Авторизация
  • Заказы
  • Поездки
  • View to order
  • View to ride
  • Соотношение новых пользователей/старые пользователи (кого больше привлекаем)
  • Длина поездки
  • Gmv per user
  • Retention

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

В результате был сформирован план по разработке MVP (минимально жизнеспособный продукт), с помощью которого пользователь сможет осуществить полный цикл поездки – от авторизации до завершения аренды. Все модули, без которых возможно совершить поездку – заправка, абонементы, промокоды, раздел «вопрос-ответ» и другие были скрыты. По сути, это была страница в браузере с очень узким набором функций, не было даже регистрации: пользователь мог авторизоваться, выбрать авто на карте, забронировать его и совершить поездку.

Фрагмент таблицы с описанием MVP
Фрагмент таблицы с описанием MVP

В разработку были пущены только 9 ключевых модулей:

  • Главный экран с картой (карта с пинами, зелёные зоны, сайдбар, кнопка геолокации, выбор кода страны, авторизация по существующему в админке телефону, ссылка на документ о персональных данных, кнопка 2gis)
  • Карточка авто (название модели, картинка авто, государственный номер, запас топлива, дистанция до машины, выбранный способ оплаты, тариф "минутки", информация по тарифу, кнопка забронировать)
  • Способы оплаты (список привязанных карт, выбор приоритетной карты, добавление новой карты)
  • Бронирование авто (затемнение экрана и лоадер установки связи с автомобилем, таймер отсчёта бесплатного ожидания, открытие дверей, запрос селфи, экран “двери автомобиля открыты”, проверка комплектации, экран “время на прогрев”, карточка авто, режимы аренды и парковки, завершить аренду, парковка с суммой за парковку)
  • Чек
  • Сайдбар (профиль, служба поддержки, страховые продукты)
  • Профиль (ФИО, телефон и почта, способы оплаты, страховые продукты, договор, выйти из аккаунта)
  • Страховые продукты (каско, страхование жизни)
  • Поддержка (номер телефона, написать текстовое сообщение в поддержку)

Разработка длилась 1,5 месяца, у нас не было спринтов, а задачи постоянно менялись по приоритету. Можно сказать, что команда подстраивалась под ограничения реализации как технических, так и временных. В результате это сработало – без готовности гибко адаптироваться под новые вводные в начале проект бы не удалось запустить.

Первый релиз веб-версии состоялся в начале июля, всего через 1,5 месяца после начала разработки. Важную роль в успешном запуске сыграло тесное взаимодействие с командой мобильной версии. Нам не приходилось создавать новый функционал с нуля, а только изучать реализацию в мобильной версии и использовать накопленный опыт других команд.

Веб-версия приложения
Веб-версия приложения

Первое тестирование провели в узком кругу сотрудников, создав отдельный чат для сбора отзывов и сообщения о багах. За месяц 26 человек протестировали веб-версию и совершили 19 поездок. Результаты подтвердили работоспособность основного сценария и отсутствие критических ошибок в реальных условиях.

Нужно отметить, что для команды разработчиков, тестировщиков и других специалистов веб-версия была новой территорией, тестирование проводилось «ковбойским» методом, приходилось описывать нестандартные ситуации, чтобы минимизировать риск непредвиденных ошибок. В результате было обнаружено 45 багов.

Публичный релиз

В следующих релизах мы начали выстраивать систему – команда увеличилась, появились спринты. Никто не заходил с рандомными вбросами и доработками, всё было запланировано – в разработку был взят список багов и 2 новых модуля: регистрация и пред-осмотр авто, что заняло около месяца. В этот раз тестирование проводилось на более широкой аудитории – лояльных пользователях, близких и друзьях сотрудников. В итоге более 950 пользователей вошли в веб-версию, был сделан 101 заказ (60 поездок).

Сразу после этого началась подготовка к публичному релизу – был поставлен план выпустить не просто страничку в браузере, а прогрессивное веб-приложение, чтобы при его выносе на главный экран телефона, появлялась иконка. При этом PWA занимает мало места, а клиент получает полноценный функционал сервиса. Из фичей добавили программу лояльности и всеми любимые драйв-бонусы, которые можно копить и списывать. Появились фильтры, чтобы выбрать авто на любой вкус, страница с вопросами и ответами, чтобы пользователи могли найти всю необходимую информацию. При входе в сервис пользователь подписывает оферту, ее обновление мы тоже добавили, чтобы клиенты были всегда в курсе изменений. Конечно же, поправили баги, собранные по итогам тестирования прошлых релизов.

PWA приложение

Чему научилась команда

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

1. Еженедельная приоритезация задач по HADI циклу. Важно регулярно тестировать гипотезы и смотреть на показатели – аналитика вовлечённости пользователей в ту или иную фичу приложения и сложность разработки поможет приоритизировать между собой модули приложения и аргументировать появление какой-то части функционала раньше или позже.

2. Оценивать сроки реализации всего проекта и эффект от дополнительных людей в команде. Идти к топ-менеджменту и аргументированно доказывать потребность в ресурсах. Так, в команде PWA появился технический лид команды и ещё один веб-разработчик.

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

«Ситидрайв» запустил прогрессивное веб-приложение

Появился план релизов, теперь вся команда знает, куда мы идём.

План релизов
План релизов

В работу не берутся задачи без дизайна и описания бизнес-требований, так как в дальнейшем они не пройдут дизайн-ревью и будут смотреться криво на проде. Есть технические особенности веба, о которых дизайнеры могут не знать, поэтому мы настраиваем взаимодействие команд, чтобы макеты были приземлёнными и не требовали акробатических элементов от разработки. При этом гибкость в команде всё ещё присутствует, но она умеренно регулируема и зависит от аналитики и обратной связи пользователей на продукт. Например, мы часто сталкивались с багами вёрстки на маленьких экранах, поэтому начали исследовать долю пользователей с такими девайсами, чтобы понять масштаб проблемы – имеет ли смысл приоритезировать их выше развития веб-версии и новых фичей в ней.

Будет ли Ситидрайв развивать веб-версию приложения?

Сейчас мы поддерживаем веб-версию только на мобильных устройствах – команде предстоит понять, имеет ли смысл развитие десктопа. У нас есть гипотеза, что пользователям будет удобно бесшовно переключаться между ноутбуком и телефоном. Например, бронируешь машину на рабочем компьютере, а потом подходишь и открываешь уже с телефона. Если мы увидим, что с компьютера заходит много людей, мы доработаем десктоп.

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

Наша команда всегда отличалась открытостью в общении с пользователями, этот проект не исключение, поэтому пользуйтесь веб-версией и делитесь своим мнением и идеями по улучшению на почту поддержки we@citydrive.ru с темой письма «Веб-версия».

3737
55
19 комментариев

Збс написано, пасиба за инфо😼👌🏼
Можно кидать в джунов и говорить «посмотри, как работает у других» :)

5
Ответить

Привет 0100010011100

Ответить

Спасибо за статью! Преподнесение информации на высоте.
Появился вопрос, получается в силу развития веба вы заберете пользователей с мобильной версии? Если так, то коллеги из команды мобильной версии не смотрят на Вас с презрением?))

4
Ответить

Просто веб-приложение для статьи не интересно. Оно у них ПРОГРЕССИВНОЕ. 🤡

1
Ответить

Загуглить термин PWA не можем а в комментариях выебываемся

9
Ответить

Лучший сервис каршеринга ! Спасибо !!!

2
Ответить

Спасибо за подробный рассказ!

Было бы интересно про техническую часть реализации почитать - на каком тех. стеке собирали фронт? Смотрели ли на Ionic?

Ответить