Решение
Как проходил процесс разработки
С учётом требований клиента мы реализовали платформу на базе «1С-Битрикс: Управление сайтом» с интеграцией в облачный Битрикс24 на стороне клиента. Такая связка позволила соединить внешний интерфейс с бизнес-процессами.
Личным кабинетом пользуются партнёры «Базис Девелопмент»: сотрудники агентств недвижимости, брокеры, представители застройщиков. Они ведут сделки на объектах, помогают клиентам с покупкой жилья и ипотекой.
Через личный кабинет партнёры оформляют заявки на ипотеку от лица покупателей. Эти заявки становятся цифровой заменой Excel-таблиц, писем и звонков, с помощью которых раньше проводился процесс.
После создания заявки партнёр может пригласить клиента в систему через ссылку на регистрацию. Покупатель заходит в ЛК, подтверждает данные и загружает документы для верификации. Это экономит время, снижает риски ошибок и даёт контроль над процессом. Клиент отслеживает статус обработки и может связываться с менеджером.
Сценарии прорабатывались на основе реальных задач. Клиент передал нам таблицы, документы и скриншоты, с которыми раньше работа шла вручную. Мы перенесли логику процессов в ЛК и автоматизировали процесс сделок.
С учётом особенностей Битрикс и логики CRM, мы реализовали:
- простую и расширенную формы подачи заявки с возможностью прикреплять файлы;
- настройку статусов и уведомлений внутри ЛК;
- отображение истории взаимодействия и комментариев;
- базовую фильтрацию по типу объекта, дате и этапу;
- возможность отслеживать несколько заявок одновременно.
Интерфейс строили модульно. Команда заказчика сможет в будущем масштабировать систему, не переписывая её заново. Мы создали чистую архитектуру, интуитивно понятные названия блоков и единый стиль подачи.
Уделили внимание скорости загрузки и совместимости с мобильными устройствами. ЛК удобно работает на десктопе и с телефона. Пользователи могут заполнять и отслеживать заявки онлайн, что экономит их время.
Этап 1. Прототипы и техническое задание
Работу начали с глубокого погружения в бизнес-процессы и пользовательский путь. Простота использования кабинета партнерами — ключевое требование к интерфейсу.
Ориентировались на лучшие практики рынка. В качестве референсов рассматривали ЦИАН, ДомКлик и Банки.ру. Это помогло сохранить баланс между требованиями бизнеса и привычной логикой для пользователей.
Интерфейс создавался под задачи опытных агентов, которые работают с ипотекой каждый день. Они ожидают от системы такой же прозрачности и гибкости, как от банковских платформ.
Команда провела исследование, детально зафиксировала роли и сценарии взаимодействия на сайте. Составила подробное техническое задание, разбив его на логические блоки. Проработала базовые элементы: группы пользователей, структура ролей, требования к доступу.
Поэтапно проектировали флоу: от регистрации до создания и отслеживания заявок, настройки профиля, сложных сценариев и диалоговых окон.
Учли, как происходит поток операций, какая может быть последовательность действий и процесс реализации рабочего цикла, алгоритмы действий и цепочка процессов. Определили технологическую последовательность.
Большую часть времени заняло прототипирование. Клиент подошел к задаче вовлеченно. Каждый элемент макетов мы утверждали отдельно. Все детали прорисовывали вручную и доводили до идеала.
Мы разработали 84 интерактивных прототипа, охватывающих путь пользователя в ЛК. Все прототипы визуализировали задачи и роли: подача заявки, фильтрация, статус, комментарии, личный профиль, документы. Такой подход позволил избежать доработок на поздних этапах. Весь фронт работ согласовали до старта разработки.
Этап 2. Дизайн
В дизайне соблюдали баланс между функциональностью и внешним видом. Стремились создать интуитивно понятный личный кабинет. Было важно сделать конкурентоспособный интерфейс с визуальными фишками и без перегруза. Задать акцент на бренд и на экспертизу «Базис Девелопмент».
Мы опирались на:
- брендбук и бриф от клиента;
- предоставленные референсы;
- ЦА — людей, зарабатывающих на недвижимости и ипотеке.
Использовали красный и чёрный цвета из брендбука для концентрации внимания на важных блоках. Сохранили равновесие цветовой концепции страниц. Для создания контраста и воздуха в макетах взяли белый и чистые оттенки серого.
Для упрощения восприятия и навигации мы применили модульную сетку. Блоки между собой отделены отступами и визуально выделены тенями.
Работая с интерфейсом, учли много специальных параметров и логики. В ипотечном калькуляторе мы не только уместили сложный функционал, но и сделали так, чтобы пользователь мог проще вводить данные. Он сразу видит выгодные предложения от банков и не теряется в деталях.
Создали UI-кит с основными элементами, чтобы на этапах верстки и разработки экономить время команды.
Cложной частью работы стал раздел с заявками. В нем сосредоточена основная бизнес-логика сервиса. От его удобства зависит эффективность работы пользователей.
У клиента не было готового цифрового прототипа процесса. Все анкеты и шаблоны ранее заполнялись вручную. Мы получили исходники: рабочие таблицы, фото, прообразы заявок и сканов. На основе разрозненных источников выстроили логичный цифровой процесс подачи и обработки заявки.
Что именно мы сделали:
- Разработали пошаговый сценарий подачи заявки: от выбора заёмщика и созаёмщика до загрузки документов и генерации финального пакета документов с онлайн-подписью анкеты
- Детально проработали каждое состояние интерфейса:
- стартовые шаги (регистрация, выбор объекта);
- последовательное добавление документов и доработок по ним;
- промежуточные статусы, комментарии для менеджера, дозагрузка файлов;
- уведомления об ошибках и вывод результатов по статусам.
- Перевели сложные анкеты и таблицы в интерактивные формы. Логические блоки помогут пользователю проще ориентироваться.
- Подготовили десятки промежуточных макетов, чтобы согласовать с клиентом поведение системы и избежать недопонимания
- Разработали ролевую модель партнёра и его команды. Используются три типа роли со своим функционалом и правами доступа. Адаптировали под это весь интерфейс.
- Подобрали способы компактного отображения таблиц. Они будут хорошо читаться на всех устройствах.
Раздел заявок получился насыщенным по функциям и структурированным. Благодаря предварительной работе с данными и активному участию клиента, мы сохранили бизнес-логику и перенесли ее в цифровой формат.
Интерфейс получился чистым и насыщенным. Он отличается от типовых решений конкурентов, сохраняя внятную структуру, лёгкость и логику.
Этап 3. Разработка
Frontend
Разработка началась с десктоп-версии ЛК. Сверстали ее первой и адаптировали под мобильные устройства. Задача была сделать кабинет удобным.
Мы хорошо подготовили все элементы вёрстки и сверстали их в планируемый срок. Финальные этапы потребовали нестандартных решений, поэтому мы донесли это до клиента и пересмотрели дедлайны.
Что сделано с нуля:
Блок с финансовыми показателями и графиками. Использовали отдельную библиотеку для визуализации, чтобы графики можно было интерактивно выделять и сравнивать.
Подписи документов разработали сами, без готовых библиотек. Реализовали ручную подпись PDF-документов, без ЭЦП и интеграций.
После генерации документа система предлагает пользователю скачать PDF, подписать его от руки и загрузить обратно в интерфейс. Такое решение стало компромиссом между удобством и юридической значимостью. Мы учли специфику работы с ипотекой и персональными данными.
Интерактивная карта. Пользователь может добавлять офисы, редактировать информацию, открывать всплывающие подсказки. Хотя мы использовали наработки с прошлых проектов, решение получилось кастомным.
Оптимизация производительности. Большинство элементов реализованы на стилях, без тяжёлого JavaScript, поэтому сайт работает быстро.
В чем особенности проекта:
- Ипотечный калькулятор стал удобным инструментом внутри ЛК: партнер заполняет параметры, а система предлагает банки с расчетами и рекомендациями. Можно сохранить черновик, отправить клиенту по ссылке или в мессенджере, а заявка автоматически создаётся по заполненным данным.
- Хранение пользователя и повторные заявки. Мы сохраняем данные пользователей для повторных заявок. Это экономит время менеджера.
- Многоуровневая система управления заявками. Продумали сценарии заполнения, отслеживания статусов, загрузки документов и финализации заявки. С учетом статуса заявки меняется и функционал. В черновиках мы можем удалить заявку, загрузить и отредактировать документ, выбрать галочками и отправить предварительные параметры ипотеки клиенту на почту или СМС. Можем добавить другие банки по этим параметрам. Продумали блокировки от изменений персональных данных. Заявка может быть отправлена в несколько банков. Если статус положительный, можно выбрать банк с лучшими условиями.
Проработали статусы доработок заявок с дозагрузкой файлов, после отправки которых идёт уведомление партнёру и менеджеру в Б24 с постановкой задачи. Решения банков по этапам мы отображаем рядом с заявкой, получая их из API, связанного с CRM Б24 в виде сделок. При смене этапа в ЛК меняется статус заявки. Продумали уведомления по статусам заявки в “Колокольчике”, чтобы менеджер видел изменения.
- Система поддержки пользователя. Разработаны онлайн-чаты по поддержке пользователя по общим вопросам и конкретным заявкам. Чат реализован в связке с Открытыми линиями Б24. При создании чата продумана система ответственных лиц, при запросе помощи из заявки автоматически чат переключается на ответственного за текущий этап.
- Экспорт данных в PDF. В определенных блоках разработан механизм создания pdf-файлов в зависимости от данных. Можно выбрать типы документов и вид недвижимости, и система сформирует красивый файл. Его можно сохранить, отправить клиенту по e-mail или СМС и распечатать. После выбора банков в заявке можно отправить клиенту предложения банков с их условиями. В ЛК предусмотрено ручное и автоматическое сохранение актов в pdf с указанием финансовых результатов.
- Информация для партнёров. В ЛК доступна полезная информация. Раздел новости с банковскими условиями, акциями, программами. Каталог недвижимости с базой объектов по новостройками и ИЖС. Ипотечные продукты — раздел с перечнем всех условий банков. Есть раздел вопрос-ответ с популярными вопросами.
- Финансы — в этом разделе можно увидеть свой финансовый результат, подписать акты, посмотреть текущие и архивные оферты.
Стек технологий: Проект реализован на 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, чтобы обмен данными шел корректно.
Результат
Проект успешно завершен и запущен. Мы разработали и внедрили сложный личный кабинет с глубокой кастомизацией:
- многоуровневая система управления заявками;
- полноценный документооборот с возможностью ручной подписи;
- ипотечный калькулятор;
- визуализация финансовых показателей;
- импорт и экспорт данных;
- система распределения кураторов;
- гибкие роли.
Спроектировано 84 прототипа, включая промежуточные состояния, черновики и исключения. Собрали точную логику бизнес-процессов, многие из которых ранее многие существовали как скриншоты, таблицы и устные описания.
Мы с «Базис Девелопмент» прошли полный цикл от ТЗ до запуска, плотно сотрудничая в рамках проекта. Поработали с нестандартным API и кастомным Битрикс24 и восполнили отсутствие документации.
Это один из самых глубоких и непростых проектов, над которыми мы работали за последние два года. Было много нестандартных задач и совместной работы с командой заказчика. Это дало сильный результат, которым мы гордимся вместе с клиентом.
