На главную

Приложение по прокату
и аренде автомобилей в Омске

Компания
Водимобиль
Период
Июнь – ноябрь 2024
Домен
Autotech
Платформа
IOS • Android
Экраны приложения Водимобиль

О компании

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

Сайт компании Водимобиль

Команда

PO, PM, продуктовый UX/UI дизайнер, тестировщик, маркетолог, техлид, iOS- и Android-разработчики.

Моя роль

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

Понимание и разбор задачи

Брифинг с заказчиком

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

У компании уже был сайт со своим визуальным стилем, но дизайн системы не было. Моей задачей было собрать ui kit под iOS и Android, сохранив узнаваемость бренда.

Точка А продукта

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

Как сейчас устроено бронирование

Боли пользователей

  • Бронирование через менеджера. Чтобы арендовать машину, клиент должен позвонить менеджеру. Менеджер тратит время на каждый запрос, клиент — на ожидание ответа.
  • Повторный сбор данных. Личного кабинета нет: при каждом обращении менеджер заново уточняет данные клиента.
  • Выбор машины вслепую. Клиент выбирает машину раньше, чем узнаёт, свободна ли она на нужные даты, и машина может оказаться занята.
  • Цену нельзя рассчитать заранее. На сайте указана только минимальная ставка, а итоговая сумма можно узнать только у менеджер уже во время звонка.

Миссия для пользователя

Дать возможность самостоятельно арендовать автомобиль через приложение.

Цель для бизнеса

Сократить объём ручной работы менеджера при обработке заявок на аренду.

Аудитория

Жители и гости Омска от 22 лет со стажем от 2 лет, которым нужна машина без водителя на срок от суток до нескольких недель.

Задача

За 6 месяцев разработать MVP нативного приложения для iOS и Android с ключевыми функциями бронирования автомобиля и отслеживания статуса аренды.

Критерии успеха

Минимум (MVP)

  1. Клиент проходит путь от выбора дат до отправки заявки без звонка менеджеру.
  2. Данные клиента вводятся один раз и подставляются в следующие заявки.
  3. Клиент видит статус заявки и может сам изменить или отменить её.
  4. Менеджеру остаётся только подтвердить заявку: данные клиента и итоговая цена приходят в ней сразу.
  5. Уложиться в 6 месяцев и выпустить приложение на iOS и Android.

Процесс работы над проектом

User flow

Продумала путь пользователя и составила user flow — диаграмму переходов между экранами. Так я заранее проверила логику сценария и определила набор экранов и состояний, которые понадобятся для MVP.

User flow приложения

Анализ конкурентов

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

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

UI-kit

Я использовала компоненты Material UI и HIG как основу для UI-kit и дополнила их элементами из сайта. У iOS и Android разные платформенные паттерны, поэтому компоненты стилизовала отдельно под каждую платформу с учётом нативных гайдлайнов.

UI-kit для iOS и Android

Edge cases и работа компонентов

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

Edge cases и состояния компонентов

Решения

1. Регистрация вместо повторного ввода данных

Проблема: Раньше клиенту приходилось каждый раз связываться с менеджером и заново передавать свои данные.

Теперь пользователь один раз указывает ФИО и номер телефона при регистрации, и эти данные сохраняются в профиле и используются при оформлении следующих заявок.
Экраны регистрации

2. Выбор машины по датам

Проблема: на сайте клиент сначала выбирал машину, а затем отдельно звонил и узнавал, свободна ли она на нужные даты.

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

3. Бронирование с расчётом стоимости

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

Теперь пользователь указывает место и время получения и возврата и сразу получает итоговую стоимость аренды. Так до отправки заявки он понимает, что именно бронирует и сколько это будет стоить.
Экраны бронирования с расчётом стоимости

4. Отслеживание заявки

Проблема: после оформления заявки клиент не видел её статус и звонил менеджеру за каждым уточнением.

Теперь после отправки заявки клиент отслеживает статус в разделе «Мои заказы» с полными деталями брони. Здесь же можно изменить или отменить заявку самостоятельно, без звонка менеджеру.
Экраны отслеживания заявки

5. Профиль: данные и справка в одном месте

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

Экраны профиля

6. Тёмная тема

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

Экраны в тёмной теме

Общий scope работы

Общий scope работы

Дизайн-ревью реализации

После передачи макетов регулярно проверяли сборку вместе с командой. Я находила расхождения с дизайном на iOS и Android и показывала их в Figma, а тестировщик фиксировала их в общем баг-трекере в Notion.

Дизайн-ревью реализации

Точка Б продукта

Ручная работа менеджера сократилась с пяти действий до двух: всё, что раньше выяснялось по телефону, клиент делает в приложении сам. За менеджером остались проверка документов и подтверждение брони.

Точка Б продукта

Результат

За 6 месяцев собрали MVP мобильного приложения для бронирования автомобилей с отслеживанием статуса аренды. Проект прошёл экспертизу хакатона и вышел в финал.

  • 266 экранов в Figma для iOS и Android
  • нативные приложения, доступные в RuStore и через TestFlight.

Что дальше

Часть решений вынесена за рамки MVP в следующие итерации

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

фотки команды :)

Фотография команды проекта