BookBerry × OutglowРеальный проект
BookBerry: прямое бронирование отеля, где цена и условия видны до оплаты
Движок прямого бронирования для мобильного и десктопа: цена «включая все сборы» и условия видны на каждом шаге, а дизайн-система готова к переносу в код.
- Проблема
- Отель платит OTA комиссию с каждой брони, а на сайте отеля гостю не хватает причины бронировать напрямую
- Моя роль
- Продуктовый дизайн флоу, экранов и дизайн-системы — вместе с агентством Outglow
- Срок и команда
- 2026 · BookBerry AI + агентство Outglow
- Результат
- Пилот с отелем-партнёром. Цифры не публикую — измеряем конверсию в бронь и долю прямых бронирований
DBS app — движок прямого бронирования для гостей отеля (B2C) · Мобильный веб + десктоп · Figma (variables, компоненты)
01 · Проблема
Прямая бронь должна быть не сложнее, чем на OTA
Гостю нужно
- видеть итоговую цену со всеми сборами до оплаты, а не на последнем шаге;
- понимать условия отмены и допуслуги до ввода карты;
- забронировать с телефона за несколько шагов.
Отелю нужно
- получать бронирования напрямую, без комиссии OTA;
- показывать номера и тарифы под своим брендом.
Контекст
BookBerry AI (бывший BnBerry) приводит отелям гостей из AI-ассистентов, Google и от креаторов. DBS app — B2C-часть платформы: движок бронирования под брендом отеля. Пилот сделан для отеля-партнёра вместе с агентством Outglow.
02 · Ключевые решения
Цена и условия видны до оплаты — на каждом шаге
Решение 1
Цена за ночь — прямо в календаре
Гость сразу видит, какие даты дешевле, и ему не нужно уходить сравнивать на OTA. Внизу всегда сводка «4 nights · 2 adults · 1 room» и одна кнопка.
Решение 2
Одна цена «включая все сборы»
В выдаче и дальше по флоу — цена за весь срок с пометкой «includes all fees», поэтому сумма не вырастает на последнем шаге.
Решение 3
Условия — до ввода карты
На «Review & book» сводка брони с «Edit», итог, условия тарифа и бесплатной отмены — до формы оплаты. Apple Pay первым, карта вторым.
Решение 4
Ошибка — не тупик
У каждой ошибки свой экран и следующий шаг: при сбое оплаты — «Try again» и «Update your payment method», при неудачном запросе — «Back to rooms».
Все экраны (10)
Десктоп и остальные экраны
Десктоп повторяет логику мобильного в две колонки: справа закреплены цена, даты, условия и допуслуги, перед оплатой — «You won't be charged yet» и разбивка «Pay today / Due at property».
03 · Дизайн-система
Дизайн-система, которую можно перенести в код без перевода
Структура как в коде
Токены в три слоя — Core → Semantic → Component (больше 1 200 переменных). Библиотека разбита на те же разделы, что и код: Primitives, Actions, Forms, Navigation, Feedback, Patterns.
Паспорт у каждого компонента
Назначение в одном предложении, анатомия, props с теми же именами, что в коде, и статус draft · ready · deprecated. Плюс доменные паттерны: RoomCard, Calendar 6×7, PriceSummary.
Все экраны (3)
04 · Результат
Как измеряем
Цифры пилота не публикую. Решение проверяем по четырём метрикам:
| Метрика | Зачем | Ожидание |
|---|---|---|
| Конверсия в бронь | Доля сессий от выбора дат до подтверждения — главный сигнал, что флоу работает | ↑ растёт |
| Доля прямых бронирований | Сколько броней отель получает без OTA и комиссии | ↑ растёт |
| Время до брони | От выбора дат до оплаты: показывает, нет ли лишних шагов | ↓ снижается |
| Восстановление после ошибки | Доля гостей, которые после сбоя оплаты всё-таки завершили бронь | ↑ растёт |