Личный B2B кабинет для отелей по управлению номерами и ценами на сервисе Отелло от 2ГИС

Главное о кейсе

2,5 месяца — разработка и запуск MVP

2000+ уникальных отелей — получили доступ к площадке

4000+ номеров — зарегистрировано в разных ценовых категориях

Задача

‍

Весной 2022 приостановили работу международные провайдеры онлайн-бронирования Booking и Airbnb, занимавшие до 80% рынка. Спрос оставался высоким: в мае – августе в России путешествовало около 25 млн человек.

Пользователи переключились на российские сервисы. Так был запущен Отелло от 2ГИС – онлайн-сервис для бронирования отелей и гостиниц. Сервис стал заменой зарубежным провайдерам, обеспечивая бесшовный опыт пользования при путешествиях.

Команда Отелло обратилась к нам за разработкой личного кабинета, с помощью которого малые и средние игроки бизнеса могли бы обеспечить себе загрузку. У R&D центра не было ресурсов для параллельной разработки основного сервиса и экспериментального сервиса, поэтому выбор пал на аутсорс-разработку.

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

Мы предложили этап аналитики перед началом работ: чтобы сформировать функционал MVP и ТЗ, запланировать загрузку и ресурсы, тестировать на выборке пользователей перед запуском.

Процесс

У команды не было готового ТЗ на разработку, но была идея, референсы для функционала. А ещё было ограничение по срокам запуска – 3 месяца – из-за подготовки к сезону отпусков (май-август).

Мы предложили этап аналитики перед началом работ: чтобы сформировать функционал MVP и ТЗ, запланировать загрузку и ресурсы, тестировать на выборке пользователей перед запуском.

В первую неделю после принятия решения о старте провели встречу с РП, аналитиком и архитектором, заказчиком.

За 2 недели описали бизнес-аналитику проекта, подготовили CJM, составили User Stories и определили функционал MVP. Параллельно описывали системные требования, чтобы запустить разработку и первый спринт, дорабатывать аналитику на следующие.

На 3 неделю подготовили макеты ЛК и запустили разработку. В процессе масштабировали команду и добавляли специалистов нужных ролей по необходимости.

Разработка

Фронтенд

Использовали библиотеку компонентов Material UI с готовыми решениями, которые кастомизировали под проект.

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

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

Подключили lazy components для загрузки страниц по бандлам. Это экономит ресурсы, повышает скорость загрузки.

После завершения основной работы начали покрывать фронтенд тестами с помощью jest и @testing-library/react. С их помощью мы тестируем утилиты, функции, компоненты, чтобы проверить корректную работу небольших элементов кода, выявить места, где возможны поломки.

Бэкенд

При создании архитектуры бэкенда ориентировались на ограничения и размер команды. Выбрали монолит на Django – Python-фреймворке для быстрого создания веб-сайтов. Содержит инструменты для удобной работы “из коробки”.

Взаимодействие фронтенда и бэкенда происходит через Swagger – это набор инструментов, который позволяет автоматически описывать API на основе его кода.

‍

Мы завершили работы по проекту за 3 месяца:
— Первая неделя: приняли решение о старте, провели встречу с РП, аналитиком, архитектором, заказчиком.
— Вторая неделя: завершили бизнес-аналитику, подготовили CJM, составили User Stories, финализировали функционал MVP. Зафиксировали образ и границы проекта.Параллельно описывали системные требования для запуска разработки.
— Третья неделя: подготовили макеты ЛК, стартовали первый спринт, дорабатывали аналитику и детализировали следующие этапы. По потребности масштабировали команду специалистами нужных ролей.
— Далее работа шла недельными спринтами. По методу набегающей волны: с верхнеуровневым описанием этапов и детализацией по потребности. По результатам недельных спринтов проводили демо заказчику с получением обратной связи. Показывали отчёт по задачам, которые планировали взять в работу, с теми, которые реализовали по факту.
— Завершили работу по MVP за 2,5 месяцев, реализовали на 20% больше функционала и продолжаем развивать продукт

Технический челленж

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

Для шахматки взяли микс: TanStack Table для рендера таблицы, фильтры Material UI, добавили календарь с B2C-сервиса – react date picker.

Для виртуализации – отображения компонентов по мере потребности пользователя – использовали tablevirtuoso. Это тоже помогает ускорить загрузку: например, приходят данные на 2000 ячеек, но пользователь видит только 500, больше – если проскроллит.

Таблица позволяет редактировать данные по номерному фонду в удобном для пользователей формате: актуальная информация попадает в модальное окно и при завершении редактирования уходит на сервер, становится доступной для пользователей Отелло.

После релиза MVP-версии мы продолжили работу по оптимизации хранения и передачи данных: каждая комбинация сохраняется в базе данных, актуализируется или помечается на удаление, если пользователь хочет вернуть прежние данные. Это значительно повысило скорость отображения данных для пользователей. При создании архитектуры ориентировались на технологии, которые позволят автоматизировать рутинные процессы и сократить скорость разработки: Nx React Standalone, Vite, TypeScript, Django, Postgres, Redis, Celery

Результат

Первую версию ЛК запустили в 2023 за 3 месяца.

ЛК автоматизирует и облегчает неприятную рутину: добавление и редактирование номерного фонда, доступности по датам. Благодаря простому и понятному UI даже непрофессиональные отельеры без проблем адаптируются к сервису. А чтобы не пропустить новое бронирование, мы подключили оповещение через Телеграм-бота.

ЛК автоматизирует и облегчает неприятную рутину: добавление и редактирование номерного фонда, доступности по датам. Благодаря простому и понятному UI даже непрофессиональные отельеры без проблем адаптируются к сервису. А чтобы не пропустить новое бронирование, мы подключили оповещение через Телеграм-бота.

За 4,5 месяцев с момента запуска было зарегистрировано более 2000 уникальных отелей, которые получили доступ к площадке. Команда Отелло не тратила внутренние ресурсы для реализации проекта, зато взамен получила работающий и развивающийся продукт, который подтвердил гипотезу. Как следствие – кратный рост уникальной базы номерного фонда.

За 4,5 месяца с момента запуска было зарегистрировано более 2000 уникальных отелей, которые получили доступ к площадке. Команда Отелло не тратила внутренние ресурсы для реализации проекта, зато взамен получила работающий и развивающийся продукт, который подтвердил гипотезу. Как следствие – кратный рост уникальной базы номерного фонда.