Сдается дом! Как мы разрабатывали сайт для клубного дома — проекта, которому нет аналогов в России

Хотели бы ощутить комфорт, находясь в длительной командировке? Или снять квартиру без посредников и назойливых хозяев? Или даже получить временную прописку? Если да, добро пожаловать в клубный дом «Вэлко»!

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

«Вэлко» помогает местным жителям и командированным в Иркутск арендовать квартиру на любой срок. Аналогов такого проекта в России нет. Это не подобие Авито, Booking и ЦИАНа. Фишка в том, что здесь сдается весь 17-этажный дом. Без дотошных хозяев и посредников. В каждой квартире есть все необходимое — мебель и бытовая техника, не говоря уже о дизайнерском ремонте. На территории находится паркинг, детский сад, круглосуточная консьерж-служба и охрана с видеонаблюдением. Внутри зона ожидания гостей и курьеров. Но и это не все — в «Вэлко» можно оформить временную прописку!  

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

Виктор Захаров

Директор ООО «Сервико»

Название происходит от английского «Welcome»

Цель

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

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

Квартиры отличаются планировкой и ценой. Те, что этажом повыше — стоят дороже.

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

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

Составили видение проекта

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

Провели анализ целевой аудитории

  То есть будущих арендаторов. И вот что для них было важно:

1. Безопасность сделки;
2. Отсутствие предвзятости, как это часто бывает — никаких ограничений по полу, национальности и «парам нельзя»;
3. Возможность посмотреть и забронировать квартиру заранее;
4. Возможность получить официальные документы (например, для работодателя);
5. Все удобства — техника, мебель, хороший ремонт;
6. Возможность поселиться в квартиру с маленьким ребенком или пушистым другом;
7. Чистота после прошлых жильцов.

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

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

Прототип

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

На этом этапе мы развили идею главной фишки — интерактивной модели дома на главной странице.  

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

Дизайн

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

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

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

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

Как взаимодействует арендодатель и арендатор

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

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

Если клиент забыл про бронь, поленился ее отменить или просто не приехал, сумма сгорает.

Размер депозита зависит от того, если ли у арендатора домашние животные. Если человек заезжает с кошкой, размер депозита увеличится в 1,5 раз

Николай 

Аналитик Pyrobyte

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

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

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

Что может делать пользователь в личном кабинете

Получать документы, выписки и чеки

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

Контролировать свои финансы

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

 Видеть, сколько квартир уже забронировано и сколько арендовано

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

Заказывать дополнительные услуги

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

С чем мы настроили интеграции

С платежными системами

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

С ЮКассой никаких сложностей не было.  

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

СберБизнес убрали систему webhook. Информация о платеже теперь не возвращается на сервер в автоматическом режиме. Статус операции «выполнено», «не выполнено» приходится отслеживать вручную, потому что информация об оплате появляется только через 5-20 минут.

Для того, чтобы пользователь мог узнать статус оплаты, после редиректа на его проверку выводится окно, что оплата в обработке.  

С системой 1С

Так как для компаний интеграция 1С с сайтом — демонстрация высокого уровня сервиса и основное условие эффективности, то мы не упустили этот момент. Да и упустишь его! Для «Вэлко» интеграция с 1С автоматизирует рутинные процессы, потому что:

1. Хранит информацию о ценах на квартиры, услуги и коммунальные платежи. Кстати, забылы сказать, что они тоже входят в счет месячной оплаты;
2. Автоматически формирует счета на оплату;
3. Записывает информацию о статусе проведенных платежей;
4. Сохраняет данные о арендаторах.

  Но без подводных камней, конечно, никуда.

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

Что это значит для нас, как для разработчика?

 Во-первых, нужно подготовить клиента к тесному общению на этом этапе. Мало просто добавить кусок кода в нужное место, чтобы все работало. Разработка осложняется особенностями бизнес-процессов. На любое, даже самое маленькое несоответствие параметров или методов, 1С выдает ошибку и стопорит всю работу.

Во-вторых, нужно заложить время на ожидания исправления багов в самой системе от 1С.  

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

Что может делать администратор сайта в админ-панели?

Изменять информацию квартир

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

Управлять услугами

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

Отслеживать платежи и договор

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

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

Все загруженные через админку выписки будут доступны в его личном кабинете.  

Что может делать администратор зала в админ-панели?

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

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

У тебя есть список → ты нажал кнопку → произошло действие

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

Если кликнуть на нужную квартиру, сбоку откроется панель, в которой можно:

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

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

Что в итоге?

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

Администраторам приходится держать в голове кучу важных нюансов. Наша административная панель как нельзя лучше решает эту проблему. Многие вещи, которые раньше отнимали время, сейчас решаются по клику. “Вэлко” окружают своих жителей заботой и комфортом, а разработанный нами сервис помогает им в этой нелегкой работе

Дарья 

Менеджер проекта

Если у вас появились вопросы напишите нам!

Чтобы не пропустить интересное, следите за нами:
В телеграм-канале
Во ВКонтакте
На нашем сайте