«Летим»: одна цена от выдачи до оплаты
Спроектировала с нуля приложение подбора туров с одним правилом: цена «за двоих со всеми сборами» остаётся неизменной от выдачи до кнопки «Оплатить».
Задача
В четырёх из пяти сервисов цена тура менялась перед оплатой: на 18–35 тысяч или за счёт поздно появившегося сбора.
Решение
Я спроектировала одну цену «за двоих со всеми сборами» на всём пути. Если стоимость меняется, интерфейс сразу показывает причину и разницу.
Результат
Работающий React-прототип: 45 экранов, 115 кадров и дизайн-система из 55 компонентов. Тест с шестью участниками выявил две проблемы; сценарий выбора состава туристов я исправила, ретеста пока не было.
Концепт-проект по заданию условного туроператора, доведённый до работающего прототипа. Название, логотип и визуальная система созданы для проекта. Анализ рынка основан на реальных продуктах, а персоны смоделированы. Интерфейс, React-прототип и каталог компонентов работают по ссылкам.
Проблема
Цена ломается в одной точке — между выдачей и оплатой
Я прошла воронки пяти конкурентов. У четверых сумма меняется на последнем шаге. У Травелаты к оформлению она вырастает на 18–35 тысяч. У Onlinetours появляется топливный сбор 18 650 ₽ — около десяти процентов тура.
Такой скачок обесценивает всё предыдущее сравнение: человек выбирал тур по цене, которая оказалась неполной. В результате он либо бросает оформление, либо уточняет у поддержки, сколько поездка стоит на самом деле.
Рынок: справка Onlinetours — отдельная статья о том, почему цена меняется, пока человек сравнивает варианты.
Я: экран оплаты — состав цены и строка «Цена не изменилась с прошлого шага».
Отдельная статья Onlinetours подтвердила вывод: проблема не в формулировке на экране, а в устройстве самой воронки.
Конкурентный ландшафт
Ни у кого нет честной цены вместе с сопровождением
Я сравнила воронки пяти конкурентов по двум признакам: насколько прозрачно показана цена и помогает ли сервис пройти путь до оплаты. Ни один продукт не совмещал оба качества. Так появилась позиция «Летим»: честная цена вместе с сопровождением.
Кто и чего боится
Мотивации разные, точка ухода одна
Три персоны ищут тур по-разному, но каждая уходит, когда перестаёт доверять цене.
- Марина долго сравнивает варианты и боится скрытых сборов. Для неё цена везде указана «за двоих со всеми сборами», а на оформлении видно, сколько времени она удерживается.
- Алексей организует семейную поездку и боится ошибок после оплаты. Поэтому состав туристов включает возраст детей, данные из профиля подставляются латиницей, а статус брони виден по шагам.
- Даша ищет горящий тур и не готова тратить время на регистрацию и десятки фильтров. Для неё доступен гостевой путь до брони, гибкие даты и поиск обычными словами.
Скоуп
В релиз вошло только то, что поддерживает честную цену
Единым критерием отбора стало обещание честной цены. По нему 59 функций разделились на первый релиз, следующую версию, резерв и отказ.
- 59
- функций прошли через отбор
- 33
- вошли в первый релиз
- 26
- отложены или отклонены
- 3
- решения я потом пересмотрела
Девять решений, которые дались труднее всего
Отбор — это ещё не решение. Пока фичи не разложены по экранам, тридцать три строки в таблице остаются списком: непонятно, куда человек попадёт и что с чем соседствует.
Затем я разложила функции по карте экранов: пять вкладок и 29 маршрутов. Сравнение вошло в «Избранное», а заказы и их детали — в «Мои заказы». Для «Экскурсий» оставила один входной экран: полноценный контент-раздел отложен до следующей версии.
Пользовательский путь
Цена остаётся видимой на всём пути до брони
Я собрала путь из трёх шагов: найти, выбрать, забронировать. На каждом экране цена указана «за двоих со всеми сборами». В избранном вместе с отелем сохраняются даты и состав туристов, а на кнопке «Забронировать» остаётся сумма из выдачи.
Там, где точной цены быть не может, её и нет: у отеля несколько туров, поэтому в выдаче стоит «от». Если цена выбранного тура меняется, интерфейс показывает старую сумму, новую, разницу и причину. Введённые данные при этом сохраняются.
Разбор решений
Каждый экран — из исследования в интерфейс
Ниже — восемь ключевых экранов и 43 решения. Для каждого указан источник: требование брифа, анализ конкурентов, сценарий персоны, моё продуктовое решение или результат пользовательского теста.
AI в продукте
AI встроен в воронку, а не приклеен сбоку
У Слетать.ру AI работает как отдельный чат рядом с основной воронкой. Я встроила его в четыре шага, где он сокращает ручную работу: поиск, сравнение, отзывы и план поездки. При этом AI не придумывает цену или наличие.
Главное ограничение: AI не придумывает цену и наличие. Каждый ответ ведёт к туру, который действительно можно забронировать.
Отвергнутые альтернативы
Что я спроектировала и почему отказалась
Тап по строке AI, вариант 1 — ввод текстом
Тап по строке AI, вариант 2 — голосом
Совет AI над выдачей
Тап по строке AI: три варианта
Полный экран. Просторно и красиво, но он уводит с основного экрана поиска. Пять из шести полей формы открывают шторку — ради одной строки ломать это правило я не стала.
Отдельный голосовой экран. Голосовой ввод оставила, отдельный экран — нет: он нужен, только если голос станет основным способом поиска. Поэтому микрофон поставила прямо в поле.
Выбрала шторку: она работает так же, как остальные поля формы.
Совет AI над выдачей — отклонила
Сначала хотела показать над результатами, что AI понял из запроса и что советует. Отказалась: ассистент уже переводит запрос в фильтры, и на этом его работа заканчивается. Дальше человек выбирает отель, а пересказ над выдачей только отвлекает.
Состояния
Ошибки не оставляют на экране ложных данных
Доверие особенно важно в ошибках и ожидании. Поэтому я спроектировала 72 кадра состояний. Если данные не загрузились, интерфейс не показывает противоречащую информацию — например, рядом с ошибкой не остаётся счётчик «3 отеля».
Система
Ни одно значение на макете не выбрано на глаз
Я собрала экраны из общей системы: цвета и размеры заданы переменными, повторяющиеся элементы — компонентами. Ниже показаны токены, UI-кит и темы.
Цвет приходит из роли, а не из палитры
Цветовая система состоит из двух уровней. Первый — 84 базовых значения: цвета, размеры, радиусы и отступы. Второй — 49 смысловых ролей вроде «поверхность» или «приглушённый текст». Компоненты используют роли, поэтому для смены темы не нужно перекрашивать каждый экран.
55 компонентов в Figma, 62 в React
В Figma-ките 55 компонентов и 200 вариантов. В React — 62: ещё семь нужны только для структуры кода и не имеют собственного вида. В открытом каталоге показаны 59 компонентов, их состояния и 278 примеров сборки.
Тёмная тема — спроектированный режим, а не инверсия светлой
Для тёмной темы я не перерисовывала компоненты, а задала новые значения смысловых ролей. При этом тёмный режим спроектирован отдельно, а не получен автоматической инверсией.
- В светлой теме фон и приподнятая поверхность — одна и та же белая, высоту держат тень и обводка. В тёмной приподнятая на ступень светлее фона: перевёрнутая палитра сделала бы карточку неотличимой от подложки.
- Главная кнопка в светлой теме при наведении темнеет, в тёмной — светлеет. Направление шага задаёт режим, а не отражение.
- Тени в светлой теме — 6–12 % чёрного, в тёмной 40–55 %. На тёмной подложке восемь процентов не видно вовсе, и высоту нечем было бы показать.
Проверка на людях
Дашборд поймал странность, человек объяснил её
Я встроила в прототип аналитику: она записывает путь, время и клики, а дашборд собирает их по сессиям. 10 августа шесть человек выполнили четыре задания примерно за час.
Главная метрика — потерянность: насколько путь пользователя длиннее прямого. Ноль означает кратчайший путь, значение выше 0,5 — заметные отклонения и возвраты.
Метрики показывали успех, человек — проблему
Участник выполнил задачу за сто секунд и девять экранов без лишних кликов. Но потерянность составила 0,78 при пороге 0,4 — путь оказался заметно длиннее прямого.
Что сказал человек
«Не смог выбрать количество туристов»
«Перейдя в горящий тур, я больше не смог выбрать количество туристов. И на оплате нельзя ни добавить, ни удалить».
Что сказали метрики
Образцовый проход
Цель взята, сто секунд, лишних кликов нет.
Что было на самом деле
Состав задавался только на главной
Кто входил в тур мимо формы поиска, получал «2 взрослых» по умолчанию и не мог их изменить до самой оплаты. А экран честно писал «Итого за 2 взрослых».
После теста я вынесла состав туристов из подписи в отдельную редактируемую строку. Теперь количество можно изменить на экране тура независимо от точки входа.
Шести участников хватило, чтобы обнаружить две проблемы, но не чтобы оценить их частоту. После исправлений ретеста не было, поэтому их эффект пока не измерен.
Итоги
Цена сохранилась до оплаты, разрыв в сценарии исправлен
Что получилось
В прототипе цена из выдачи сохраняется до кнопки «Оплатить», а все сборы видны заранее. Тест с шестью участниками выявил разрыв при входе в тур не с главной: состав туристов нельзя было изменить. Я исправила этот сценарий.
Чему научилась
- Чтобы найти продуктовую возможность, полезно пройти путь конкурентов целиком: проблема с ценой стала видна только на последних шагах оплаты.
- Скоуп начинается с критерия: из 59 функций в первый релиз вошли 33, которые поддерживают главное обещание.
- Доверие строится не только на основном сценарии, но и на состояниях ошибки, ожидания и пустого результата.
- Смысловые токены позволяют сделать тёмную тему отдельным режимом, не создавая второй комплект компонентов.
- Автоматические метрики показывают отклонение, но только разговор с человеком объясняет, почему оно возникло.
Что осталось непроверенным
После исправлений ретеста не было. Поэтому я не утверждаю, что найденные проблемы закрыты для всех пользователей.
Посмотреть самому
Прототип, компоненты и макеты открыты
Пройдите сценарий в прототипе, откройте каталог компонентов или посмотрите макеты и PRD. Все материалы доступны без входа.