Вэлко

• Сайт

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

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

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

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

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

Что требовалось

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

Для этого мы придумали функционал:

• Разработали личный кабинет арендатора

• Создали панель управления для администратора

• Добавили возможность забронировать и отфильтровать квартиры

• Разработали функционал дополнительных услуг

• Настроили интеграцию с платежными системами и 1С

• Полностью автоматизировали документооборот

• Сделали административную панель для управления бронирования

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

Этапы разработки

Аналитика

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

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

Провели анализ целевой аудитории, вот что было важно будущим арендаторам:

• Безопасность сделки

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

• Возможность посмотреть и забронировать квартиру заранее

• Возможность получить официальные документы (например, для работодателя)

• Все удобства — техника, мебель, хороший ремонт

• Возможность поселиться в квартиру с маленьким ребенком или пушистым другом

• Чистота после прошлых жильцов

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

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

Дизайн

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

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

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

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

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

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

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

Разработка

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

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

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

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

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

• СберБизнес

• Юкассу

• Реквизиты

• QR-код

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

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

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

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

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

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

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

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

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

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

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

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

Настроили интеграцию с 1С

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

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

• Автоматически формирует счета на оплату

• Записывает информацию о статусе проведенных платежей

• Сохраняет данные о арендаторах

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

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

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

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

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

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

Что есть в админ-панели у администратора? А вот тут самое интересное! В админпанели мы разработали шахматку, но шахматку нетипичную — похожую на ту, что встречается в киноатеатрах, где зритель бронирует места онлайн.

Только при нажатии выводится информация о пользователе, который проживает в этой квартире.

Такое решение мы разрабатывали на самописном решении, созданном внутри студии. За основу был взят шаблон Inspinia, и для него написана переиспользуемая логика на PHP, чтобы оперативно решить задачу. Ниже поясним, почему так.

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

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

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

Админ кликает на нужную квартиру и сразу видит все необходимое.

Кликнув на ячейку, можно:

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

• Загрузить договоры и акты в его личный кабинет

• Изменить информацию о квартирах и услугах (стоимость, количество, описание)

• Отследить поступление платежей и узнать, есть ли у кого-то долги

• Узнать, кто какие доп. услуги заказывал

• Добавлять объявления и актуальную инфу в новостной раздел

• Заблокировать квартиру на время ремонта, чтобы ее не могли арендовать

В общем, админ может контролировать все, что касается наполнения сайта.

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

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

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