Клубный дом «Вэлко»

Задача клубного дома

С заказчиком у нас вышла долгая история. В 2021 году мы разрабатывали для Сервико-Авто корпоративное приложение , а через год компания пришла в Пиробайт с другим запросом — создать сайт для клубного дома «Вэлко».

«Вэлко» — клубный дом в Иркутске, в котором сдаются квартиры на всех 17 этажах. Жильцы арендуют готовые апартаменты с мебелью, техникой и дополнительными услугами: парковкой, уборкой и обслуживанием.

Цель — разработать сервис, через который можно забронировать апартаменты с дизайнерским ремонтом и пулом дополнительных услуг. Например, клинингом и парковкой. Для этого мы продумали функционал:

• Разработали личный кабинет арендатора;
• Создали панель управления для администратора;
• Добавили возможность забронировать и отфильтровать квартиры;
• Разработали функционал дополнительных услуг;
• Настроили интеграцию с платежными системами и 1С;
• Полностью автоматизировали документооборот;
• Сделали административную панель для управления бронирования.

Исследование арендаторов и сотрудников

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

Анализируя стейкхолдеров (всех заинтересованных в проекте людей), мы выявили их самые злободневные боли. У клиента болело одно, у арендаторов — второе, у администратора сайта — третье. Посмотрите сами.

• Безопасность сделки;
• Возможность посмотреть и забронировать квартиру заранее;
• Возможность получить официальные документы (например, для работодателя);
• Все удобства — техника, мебель, хороший ремонт;
• Возможность поселиться в квартиру с маленьким ребенком или пушистым другом;
• Чистота после прошлых жильцов.

Главными стали Авито, Airbnb, ЦИАН, Домофонд, Юла и Booking. Посмотрели, что они предлагают, проанализировали сайты, структуру, навигацию, оформление. Подглядели фишки и придумали свои. Например, реферальную программу, подбор похожих предложений, доску объявлений и удобную форму оплаты, в которой цена считается сразу за весь срок аренды. Но самой главной особенностью стала сама идея того, что у «Вэлко» сдается весь 17-этажный дом.

Прототип и интерактивная модель дома

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

Правда, наше видение не всегда совпадало с клиентским. Так бывает, и это нормально. Не все идеи, отраженные в прототипе, были реализованы. Например, из финальной версии убрали вкладку «акции», «новости» и полностью переработали внешний вид карточек в каталоге.

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

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

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

Мы отрисовали каждый полигон в Figma, а потом наложили их поверх плана. И еще связали их с данными, которые передаются с бэкенда, чтобы полигон менял свой цвет в зависимости от того, свободна сейчас квартира или нет!

Бронирование и заселение

Заехать в апартаменты день в день не получится, их нужно забронировать заранее. У клубного дома нет горничных, которые обслуживают квартиры на постоянной основе. Перед заселением нового жильца им нужно подготовиться — заказать клининг и сделать мелкий ремонт. Вдруг где-то открутилась ручка.

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

Счет формируется в 1С. Арендатор может оплатить проживание через:

• СберБизнес;
• Юкассу;
• Реквизиты;
• QR-код.

Информацию о начислениях и списаниях можно посмотреть в разделе «финансы».

Личный кабинет жильца

Документы и чеки

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

Финансы и сроки аренды

Пользователь может посмотреть, какую сумму он положил на депозит, следить за историей списания и поступлений платежей.

Может посмотреть дату заезда и выезда.

Дополнительные услуги

Например, в личном кабинете можно забронировать подземную парковку или заказать уборку квартиры. Кстати, своим резидентам «Вэлко» дарит доступ в закрытый тренажерный зал и релакс-зону!

Интеграции и задержки платежей

С «ЮКассой» и «СберБизнесом», потому что арендовать квартиру могут и физические лица, и юридические. Изначально планировалась только СберОплата b2c. Но когда с нашей стороны было почти все готово, клиент попросил переехать на ЮКассу, так как первый вариант стал для них неактуален. Благо, что SCRUM, по которому мы работаем, позволяет внедрять что-то новое уже в процессе. B2b оплату мы сделали через СберБизнес.

У них четко описанная API и есть SDK, что очень упрощает интеграцию. В SDK заранее прописана вся логика, ее остается только внедрить в проект и протестировать. А вот со СберБизнесом пришлось попотеть.

В использованном на проекте платёжном сценарии СберБизнеса не было автоматического webhook-уведомления. Подтверждение могло приходить с задержкой 5–20 минут, поэтому после оплаты показывали понятный статус обработки.

1С хранит тарифы на квартиры, услуги и коммунальные платежи, формирует счета, передаёт статусы оплат и данные арендаторов.

Чтобы воплотить все задумки, нужно подробно описывать методы и параметры, которыми сайт будет обмениваться с системой. В этом нет ничего сложного. Но нужно заложить дополнительное время на согласования действий со стороны заказчика и поддержки 1С. Бывали случаи, когда 1С выдавал ошибку в ответ на корректные данные — типичная логическая ошибка на их стороне. Но самый главный бич — долгие ответы системы на запросы.

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

Шахматка для администраторов

Он может поменять описание, добавить фото, установить максимальное количество жильцов, указать дополнительные удобства.

Устанавливать их цену, менять название и описание.

В админке он может посмотреть статус операций и с какой платежной системы пришла оплата, а еще выгрузить подписанные договора.

Если, например, у арендатора не получается выгрузить какой-то документ из личного кабинета, он может позвонить администратору и сказать, мол, так и так — нет доступа. Администратор «достанет» этот документ через свою админку и отправит его клиенту.

А вот тут самое интересное! Для администратора зала мы разработали шахматку, но шахматку нетипичную. Не ту, что встречается в киноатеатрах, где зритель бронирует места онлайн.

Но чтобы администраторам было удобно пользоваться админкой, мы подключили к серверной части визуальную, и табличная информация теперь отображается графически. Прямых способов реализовать такую штуку нет, мы шли окольным путем — Backend-разработчик брал часть кода у Frontend-разработчика и переделывал его под свои данные. Теперь мы можем кликнуть на ячейку, и у нас выведется информация о пользователе, который проживает в этой квартире.

• Забронировать квартиру для клиента, на случай, если тот позвонил по телефону;
• Загрузить договоры и акты в его личный кабинет;
• Посмотреть, по каким квартирам есть задолженности;
• Узнать, кто какие услуги заказывал;
• Заблокировать квартиру на время ремонта.

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

Результат

Собрали сервис, в котором связаны выбор квартиры, бронирование, оплата, документы и дополнительные услуги. Жильцы пользуются личным кабинетом, а сотрудники управляют домом через административную панель и шахматку.

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