Автоматизированный личный кабинет для ипотеки: рост продаж с минимальными затратами для компании БазисДом

1. Вводная задача от заказчика, проблематика, цели

«Базис Девелопмент» специализируется на сопровождении сделок с новостройками, ипотеке и разработке методик продаж для застройщиков. На рынке недвижимости с 2017 года. Работает с застройщиками, агентствами недвижимости и брокерами, сотрудничает с банками и ипотечными платформами.

О проекте и задачах

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

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

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

Личный кабинет станет цифровым инструментом продаж. Партнёр в одном месте сможет вести все заявки. Работать с документами, видеть комментарии менеджеров и понимать, на каком этапе каждая сделка. Всё это — в привычной логике, аналогичной интерфейсам ЦИАН и банковских платформ, таких как ДомКлик и Банки.ру.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

С учётом требований клиента мы реализовали платформу на базе «1С-Битрикс: Управление сайтом» с интеграцией в облачный Битрикс24 на стороне клиента. Такая связка позволила соединить внешний интерфейс с бизнес-процессами.

Личным кабинетом пользуются партнёры «Базис Девелопмент»: сотрудники агентств недвижимости, брокеры, представители застройщиков. Они ведут сделки на объектах, помогают клиентам с покупкой жилья и ипотекой.

Через личный кабинет партнёры оформляют заявки на ипотеку от лица покупателей. Эти заявки становятся цифровой заменой Excel-таблиц, писем и звонков, с помощью которых раньше проводился процесс.

После создания заявки партнёр может пригласить клиента в систему через ссылку на регистрацию. Покупатель заходит в ЛК, подтверждает данные и загружает документы для верификации. Это экономит время, снижает риски ошибок и даёт контроль над процессом. Клиент отслеживает статус обработки и может связываться с менеджером.

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

С учётом особенностей Битрикс и логики CRM, мы реализовали:

• простую и расширенную формы подачи заявки с возможностью прикреплять файлы;
• настройку статусов и уведомлений внутри ЛК;
• отображение истории взаимодействия и комментариев;
• базовую фильтрацию по типу объекта, дате и этапу;
• возможность отслеживать несколько заявок одновременно.

Интерфейс строили модульно. Команда заказчика сможет в будущем масштабировать систему, не переписывая её заново. Мы создали чистую архитектуру, интуитивно понятные названия блоков и единый стиль подачи.

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

ЭТАП 1. Прототипы и техническое задание

Работу начали с глубокого погружения в бизнес-процессы и пользовательский путь. Простота использования кабинета партнерами — ключевое требование к интерфейсу.

Ориентировались на лучшие практики рынка. В качестве референсов рассматривали ЦИАН, ДомКлик и Банки.ру. Это помогло сохранить баланс между требованиями бизнеса и привычной логикой для пользователей.

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

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

Поэтапно проектировали флоу: от регистрации до создания и отслеживания заявок, настройки профиля, сложных сценариев и диалоговых окон.

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

Большую часть времени заняло прототипирование. Клиент подошел к задаче вовлеченно. Каждый элемент макетов мы утверждали отдельно. Все детали прорисовывали вручную и доводили до идеала.

Мы разработали 84 интерактивных прототипа, охватывающих путь пользователя в ЛК. Все прототипы визуализировали задачи и роли: подача заявки, фильтрация, статус, комментарии, личный профиль, документы. Такой подход позволил избежать доработок на поздних этапах. Весь фронт работ согласовали до старта разработки.

ЭТАП 2. Дизайн

В дизайне соблюдали баланс между функциональностью и внешним видом. Стремились создать интуитивно понятный личный кабинет. Было важно сделать конкурентоспособный интерфейс с визуальными фишками и без перегруза. Задать акцент на бренд и на экспертизу «Базис Девелопмент».

Мы опирались на:

• брендбук и бриф от клиента;
• предоставленные референсы;
• ЦА — людей, зарабатывающих на недвижимости и ипотеке.

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

Для упрощения восприятия и навигации мы применили модульную сетку. Блоки между собой отделены отступами и визуально выделены тенями.

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

Создали UI-кит с основными элементами, чтобы на этапах верстки и разработки экономить время команды.

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

У клиента не было готового цифрового прототипа процесса. Все анкеты и шаблоны ранее заполнялись вручную. Мы получили исходники: рабочие таблицы, фото, прообразы заявок и сканов. На основе разрозненных источников выстроили логичный цифровой процесс подачи и обработки заявки.

Что именно мы сделали:

1. Разработали пошаговый сценарий подачи заявки: от выбора заёмщика и созаёмщика до загрузки документов и генерации финального пакета документов с онлайн-подписью анкеты

2. Детально проработали каждое состояние интерфейса:

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

3. Перевели сложные анкеты и таблицы в интерактивные формы. Логические блоки помогут пользователю проще ориентироваться.

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

5. Разработали ролевую модель партнёра и его команды. Используются три типа роли со своим функционалом и правами доступа. Адаптировали под это весь интерфейс.

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

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

Интерфейс получился чистым и насыщенным. Он отличается от типовых решений конкурентов, сохраняя внятную структуру, лёгкость и логику.

ЭТАП 3. Разработка

Frontend

Разработка началась с десктоп-версии ЛК. Сверстали ее первой и адаптировали под мобильные устройства. Задача была сделать кабинет удобным.

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

Что сделано с нуля:

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

Подписи документов разработали сами, без готовых библиотек. Реализовали ручную подпись PDF-документов, без ЭЦП и интеграций.

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

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

Оптимизация производительности. Большинство элементов реализованы на стилях, без тяжёлого JavaScript, поэтому сайт работает быстро.

В чем особенности проекта:

1. Ипотечный калькулятор стал удобным инструментом внутри ЛК: партнер заполняет параметры, а система предлагает банки с расчетами и рекомендациями. Можно сохранить черновик, отправить клиенту по ссылке или в мессенджере, а заявка автоматически создаётся по заполненным данным.

2. Хранение пользователя и повторные заявки. Мы сохраняем данные пользователей для повторных заявок. Это экономит время менеджера.

3. Многоуровневая система управления заявками. Продумали сценарии заполнения, отслеживания статусов, загрузки документов и финализации заявки. С учетом статуса заявки меняется и функционал. В черновиках мы можем удалить заявку, загрузить и отредактировать документ, выбрать галочками и отправить предварительные параметры ипотеки клиенту на почту или СМС. Можем добавить другие банки по этим параметрам. Продумали блокировки от изменений персональных данных. Заявка может быть отправлена в несколько банков. Если статус положительный, можно выбрать банк с лучшими условиями.

Проработали статусы доработок заявок с дозагрузкой файлов, после отправки которых идёт уведомление партнёру и менеджеру в Б24 с постановкой задачи. Решения банков по этапам мы отображаем рядом с заявкой, получая их из API, связанного с CRM Б24 в виде сделок. При смене этапа в ЛК меняется статус заявки. Продумали уведомления по статусам заявки в “Колокольчике”, чтобы менеджер видел изменения.

4. Система поддержки пользователя. Разработаны онлайн-чаты по поддержке пользователя по общим вопросам и конкретным заявкам. Чат реализован в связке с Открытыми линиями Б24. При создании чата продумана система ответственных лиц, при запросе помощи из заявки автоматически чат переключается на ответственного за текущий этап.

5. Экспорт данных в PDF. В определенных блоках разработан механизм создания pdf-файлов в зависимости от данных. Можно выбрать типы документов и вид недвижимости, и система сформирует красивый файл. Его можно сохранить, отправить клиенту по e-mail или СМС и распечатать. После выбора банков в заявке можно отправить клиенту предложения банков с их условиями. В ЛК предусмотрено ручное и автоматическое сохранение актов в pdf с указанием финансовых результатов.

6. Информация для партнёров. В ЛК доступна полезная информация. Раздел новости с банковскими условиями, акциями, программами. Каталог недвижимости с базой объектов по новостройками и ИЖС. Ипотечные продукты — раздел с перечнем всех условий банков. Есть раздел вопрос-ответ с популярными вопросами.

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

Стек технологий: Проект реализован на 1С-Битрикс: Управление сайтом с интеграцией с Битрикс24. Библиотеки для графиков, карт и форм: Vite.js, Sass, Tailwind, Swiper.js, Chart.js, Popper.js, Air-datepicker.js, Imask.js. Кастомные модули для взаимодействия с документами.

Работа с бизнес-логикой и интерфейсами кабинета

Мы проработали процесс регистрации и настройку связи с CRM. Важно было, чтобы данные проходили базовую проверку при вводе и корректно передавались в сущности Битрикс24. Настроили автоматическое назначение ответственного сотрудника. Система учитывает, кто инициирует действие и выбирает специалиста под задачу.

Реализовали логику отображения заявок: в личном кабинете видны их актуальные статусы и история действий. Интеграция с финансовыми модулями позволяет отслеживать графики выплат и просматривать документы в формате PDF.

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

Backend

Ключевой задачей стал модуль заявок. Он потребовал наибольшей проработки. Все от структуры до логики реализовано с нуля. При этом не было чёткого ТЗ. Мы спроектировали поведение системы с командой клиента. Как должны работать статусы, какие данные передаются, когда подключается отправка.

Особенности работы над бэкендом:

• Сложная логика последовательностей: одна заявка может быть черновиком, отправленной, доработанной, одобренной или связанной с конкретной сделкой.
• Документы прикрепляются к заявке партиями. Заявки могут относиться к разным клиентам. Важно обеспечить корректную маршрутизацию, привязку и права доступа.
• Все модули кастомные, с доработками под клиентский бизнес-процесс.

Подключение личного кабинета к API клиента стало трудоёмким этапом. У «Базис Девелопмент» использовался облачный Б24, без возможности менять его логику и переписывать компоненты. Это наложило ограничения. Работали с тем, что есть и аккуратно подстраивали ЛК под архитектуру CRM. Документации по API не было — архитектуру восстанавливали вручную.

В рамках интеграции мы:

• настроили передачу данных по заявкам между ЛК и Битрикс24;
• подключили чаты с открытыми линиями для диалога с клиентами внутри CRM;
• реализовали автоматическое распределение кураторов на новых клиентов и заявки;
• синхронизировали статусы сделок между ЛК и воронкой продаж в Б24;
• обеспечили корректную маршрутизацию истории общения и документов;
• проработали валидации и ограничения на этапе отправки и обработки данных.

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

3. Результаты сотрудничества

Проект успешно завершен и запущен. Мы разработали и внедрили сложный личный кабинет с глубокой кастомизацией:

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

Спроектировано 84 прототипа, включая промежуточные состояния, черновики и исключения. Собрали точную логику бизнес-процессов, многие из которых ранее многие существовали как скриншоты, таблицы и устные описания.

Мы с «Базис Девелопмент» прошли полный цикл от ТЗ до запуска, плотно сотрудничая в рамках проекта. Поработали с нестандартным API и кастомным Битрикс24 и восполнили отсутствие документации.

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