Связаться

Бронирование авиабилетов в Telegram

2023–2024 • Clickavia • Telegram-приложение и веб-версия

Покупая билет, человек выбирает всю поездку: сколько времени проведёт в дороге, где будет пересадка, что можно взять с собой и получится ли изменить планы. В Clickavia этот выбор и бронирование нужно было уместить в Telegram.

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

Понять маршрут до оформления

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

Например, в макете маршрут Минеральные Воды — Казань занимает больше суток: пересадка в Москве длится 22 часа. Это видно до перехода к оформлению. Человек может сразу решить, подходит ли ему такое ожидание, и продолжить сравнение вариантов.

Clickavia: выдача вариантов сложного маршрута с пересадками, тарифами и быстрыми фильтрами
Открыть изображение в полном размере ↗

Сохранить выбранную поездку на всём пути

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

Перелёт раскрывается по участкам: откуда и куда летит самолёт, когда вылетает и прибывает, сколько ждать следующего рейса. Отдельно указано, что время местное. Это помогает проверить стыковку и даты ещё до ввода данных пассажиров.

Clickavia: состав выбранного маршрута и шаги мобильного бронирования
Открыть изображение в полном размере ↗

Выбрать условия до оплаты

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

Если билет без багажа, об этом напоминает отдельный блок на этапе выбора тарифа. Здесь ещё можно изменить выбор. Затем человек заполняет данные пассажиров, выбирает дополнительные услуги и переходит к оплате картой или через СБП. Эти решения составляют один путь бронирования внутри Telegram.

Clickavia: выбор тарифа, правила обмена и возврата, багаж и данные пассажиров
Открыть изображение в полном размере ↗
Clickavia: оплата билета через СБП или банковскую карту внутри Telegram Web App
Открыть изображение в полном размере ↗

Вернуться к заказу, когда планы изменились

Мобильное оформление я проектировал и как вход в дальнейшую работу с заказом. Купленный билет остаётся основой: к нему можно добавить услугу, а при изменении планов — перейти к смене даты или направления. Для пассажира это продолжение работы со своей поездкой.

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

Одна основа для Telegram и веба

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

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

Что получил пассажир

Командой мы выпустили первую версию с основными сценариями бронирования. Человек мог найти перелёт, рассмотреть маршрут и пересадки, выбрать тариф, заполнить данные пассажиров и оплатить билет внутри Telegram. В одном приложении собрались выбор поездки, её оформление и обращение в поддержку.

Моя работа связывала эти действия: условия появлялись в тот момент, когда ещё можно принять решение, а маршрут можно было проверить до ввода данных и оплаты. Так небольшой интерфейс мессенджера вмещал сервис с несколькими перелётами, тарифами, пассажирами и дополнительными услугами.