Вэлко Сервис для бронирования апартаментов

Вэлко

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

С заказчиком у нас вышла долгая история. В 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’а и переделывал его под свои данные.

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

Административная панель паркинг

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

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

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

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

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

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

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

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

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

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

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

Административная панель

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

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

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

Другие кейсы

Гриль № 1

  • Фудтех
  • Сервис

Сайт и мобильное приложение для доставки из сети ресторанов быстрого питания. Интеграция с iiko

Tagline Awards. Бронза

WDA. Золото

WDA. Серебро

Dropfile. Интерфейсы

Сервико

  • Автотех
  • Логистика
  • Приложение для планшета

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

WDA. Серебро

Tagline Awards. Серебро

CarClick

  • Сервис
  • E-commerce
  • Автотех

Маркетплейс и аукцион для покупки автомобилей онлайн. Разработали веб-сервис и мобильное приложение.

Вэлко

  • Сервис
  • ERP

Сайт для аренды квартир в доме повышенной комфортности с услугами отеля.

Yaves

  • Сервис

Сервис аренды яхт в Сочи. Удобный кастомный календарь, функциональный каталог с онлайн бронированием, личный кабинет владельца яхты и арендатора.

Стройпарк

  • Мобильное приложениe
  • E-commerce

Мобильное приложение интернет-магазина строительных материалов.

Tarkett

  • Сервис
  • ERP

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

Trainet

  • Социальная сеть
  • Мобильное приложениe

Приложение-соцсеть для спортсменов и тренеров. Онлайн-тренировки, бронь занятий, блоги.

WDA. Серебро

Fish2o

  • Сервис
  • Фудтех

Корпоративный сайт для компании-производителя премиум лосося и форели.

WDA. Бронза

Behance

Whoosh

  • Автотех
  • Логистика
  • Сервис

Сервис для курьерской службы и экспресс-доставки для жителей США.

Спроси Врача

  • Медтех
  • Сервисы

Автоматизированный сервис для медицинских консультаций онлайн

ФССП.РФ

  • Сервис

Сайт и приложение, с помощью которых пользователь может проверить и уплатить штрафы в ФССП и ГИБДД.

Telemetron

  • Фудтех
  • Мобильное приложениe
  • Сайты

Мобильное приложение для управления сетью вендинговых автоматов.

Dropfile. Интерфейсы

ТутCервис

  • Мобильное приложениe
  • Автотех

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

Behance

Киномир

  • Мобильное приложениe

Мобильное приложение для сети кинотеатров в Сибирском федеральном округе.

Happens

  • Социальная сеть
  • Мобильное приложениe

Соцсеть, собрала лучшие фичи конкурентов. Возможность публикации постов, сторис, общение в чатах, отметок событий на карте.

Корона Авто

  • Сервисы
  • Автотех

Сервис для крупной компании-поставщика автозапчастей для импортных грузовых и легковых автомобилей.

Обменник

  • Сервисы
  • Финансы

Сервис для автоматического обменника электронных валют.

Pikemedia

  • Сервисы
  • E-commerce
  • Сайты

Корпоративный сайт для компании по производству телеканалов, трансляций видеоконференций под ключ.

ArTravel

  • Сайты
  • Концепция

Мобильное приложение-путеводитель с AR.

StayHome

  • Мобильное приложениe

Игровое мобильное приложение, призывающее соблюдать карантин во время пандемии COVID-19.

Incognito

  • Социальная сеть
  • Мобильное приложениe

Мобильное приложение-социальная сеть для анонимной оценки человека.

Reporter

  • Сервисы

Система подсчета эффективности проектов и исполнителей.

Места Будды

  • Сайты
  • Концепция

Приложение-путеводитель по буддийским местам России.

Обложка кейса НяняГуру

Tagline Awards. Бронза

Made on Tilda

НяняГуру

  • Мобильное приложениe

Мобильное приложение для поиска нянь и их трудоустройства

Обложка кейса Lutch

Lutch

  • Сайты
  • Концепция

Ведущий российский производитель хоккейной и футбольной спортивной формы, одежды и экипировки для разных видов спорта.

Обложка кейса образовательной онлайн-платформы

Онлайн-школа

  • Сайты
  • Концепция

Открытая школа 2035 — образовательная онлайн-платформа для учителей и школьников 7-18 лет из России и Казахстана.

Обложка кейса Mriya Resort

Mriya Resort

  • Сайты
  • Концепция

Mriya Resort & SPA — пятизвездочный отель на Южном берегу Крыма, на территории которого есть медицинский и SPA-центр, современный конгресс-центр, парк и собственный пляж.