22 / СВЯЗАННЫЕ ПРОЕКТЫ
«Платформа продажи квартир для петербургского застройщика AAG: визуальный и параметрический выборщик квартир по плану дома, ипотечный калькулятор, акции и личный кабинет — плюс админ-панель, которой холдинг сам ведёт сайт.»
AAG — инвестиционно-строительный холдинг из Санкт-Петербурга, основанный в 2007 году: строит и продаёт жилые комплексы премиум- и бизнес-класса и клубные дома — AKZENT, AMO, ALTER, «Маленькая Франция», «Ренессанс». Мы прошли с холдингом путь от поддержки отдельных лендингов проектов до большого нового сайта застройщика — единой платформы для продажи квартир онлайн. В её основе сразу два способа выбрать квартиру: визуальный выборщик, где покупатель кликает по плану дома и спускается от рендера здания к секции, этажу и конкретной квартире, и параметрический выборщик с взаимозависимыми фильтрами (цена, площадь, число спален, вид, планировка, особенности). К этому — страница квартиры, ипотечный калькулятор, акции и спецпредложения с закреплением «горящих» квартир в топе выдачи, личный кабинет покупателя и собственная админ-панель с блочным конструктором страниц, которой команда холдинга ведёт сайт сама. Это многолетняя работа большой команды — разработка, дизайн, аналитика, проджект-менеджмент — с сотнями задач по нескольким крупным модулям и постоянным сопровождением лендингов параллельно с основной разработкой.
Новый сайт холдинга вышел как единая платформа продаж: два способа выбрать квартиру — визуальный по плану дома и параметрический по фильтрам, — страница квартиры и планировки, ипотечный калькулятор, акции и спецпредложения, личный кабинет покупателя и собственная админ-панель, которой команда AAG ведёт сайт сама. К запуску добрали последние крупные узлы: третий уровень вложенности фильтров, новую логику фильтра-слайдера, открытие карточки квартиры в новой вкладке и прямую ссылку на лот, выгрузку PDF-отчёта по подбору и партнёрские фиды. Дальше — поддержка и точечные доработки тянулись до 2025 года. Финальную дизайн-систему собрала студия «Чипса»; мы переиспользовали её гайды при сборке новых страниц.
Главная нового сайта AAG: герой «Энергия изменений / Создавая прекрасное» с 3D-рендером дома и переходом к выбору квартиры.
Спроектировали и собрали личный кабинет: авторизация и регистрация по номеру телефона с кодом из SMS, профиль покупателя, привязка к данным из CRM застройщика. Перед разработкой провели отдельную аналитику авторизации и профиля, сверили логику интеграции с CRM по личному кабинету с командой холдинга. Кабинет стал точкой, куда сходятся подбор квартиры, ипотечные расчёты и заявки покупателя.
Прототип флоу регистрации и входа в личный кабинет: ввод номера телефона и кода из СМС, состояния ошибок.
Расскажите о задаче — предложим архитектуру решения. Без шаблонных КП и абстрактных смет: конкретика на старте.
Реализовали генерацию PDF-отчёта: по данным о квартире и рендерам собирается файл с описанием лота и планировкой, доступный по фиксированной ссылке — его можно переслать покупателю. Формат отчёта меняется в зависимости от числа этажей. Генерацию вынесли в отдельный запуск через Docker и отрефакторили логику создания PDF, чтобы стабильно собирать файлы под нагрузкой. Это бэкенд-узел без собственного экрана — результат виден только в готовом документе.
Связали платформу с внешними системами: выгрузка квартир в API и партнёрские фиды с той же нумерацией объектов, что приходит из собственной CRM застройщика, чтобы у партнёров и на сайте лоты совпадали один в один; в фид добавили акционную стоимость. Форму подписки интегрировали с Mindbox (с подтверждением), формы обратной связи и бронирования завели на сквозную аналитику Calltouch с подменой номеров. Изучили API партнёрского сервиса, чтобы понимать, какие параметры можно забирать и отдавать. Чистая интеграционная работа без экранов.
Калькулятор спроектировали в трёх режимах под разные сценарии. Упрощённый — прямо на странице квартиры, показывает минимальный ежемесячный платёж «от …/мес» под планировкой. Развёрнутый параметрический — с общим и конкретным режимами, фильтром по виду ипотеки и подбором банковских программ. Сервисный — в админ-кабинете под паролем, с вводом любой стоимости для менеджера. Перед сборкой провели аналитику калькулятора и отработали комментарии с созвонов с заказчиком.
Ипотечный калькулятор на проекте: подбор программы и расчёт ежемесячного платежа.
Собрали слой акций и спецпредложений поверх выдачи: акционные цены с настройкой периодичности, теги «горящая квартира», «спецпредложение», «квартира месяца» (тег подтягивается из CRM), статус «в резерве» и скрытие отдельных лотов. Квартиры со свойством закрепления всегда поднимаются в топ выдачи вне зависимости от сортировки, при этом продолжают участвовать в работе фильтров. Добавили возможность вывести две акционные квартиры в начало списка с отдельными шильдиками.
Выдача квартир с категориями (квартиры, машиноместа, кладовые, коммерция), статусом «в продаже» и шильдиками «горящая квартира» / «квартира месяца», закреплёнными вверху списка.
Отдельная страница условий продаж с ипотекой, рассрочкой и trade-in и предложениями ведущих банков. Макет перенесли из Adobe в Figma, отрисовали адаптивы под все разрешения вплоть до 1680 и планшетов, реализовали на фронте и подвязали к API. В админке завели новый раздел с доступными блоками для этой страницы. Чтобы корректно работала анимация при якорной навигации по разделам, переписали архитектуру страницы под якоря; добавили скелетоны-заглушки и боковой заголовок.
Страница «Условия продаж» — ипотека: программы «от 0,5%», предложения банков (Сбербанк, АльфаБанк, ВТБ) и калькулятор ежемесячного платежа «от 149 299 ₽/мес».
Страница «Условия продаж» — трейд-ин: обмен старой квартиры на новую, с переключением табов условий и адаптивами.
Сердце параметрического выборщика — фильтры, которые зависят друг от друга: каждый выбранный параметр сужает выдачу, а не расширяет, и недоступные особенности гаснут. Реализовали зависимость всех фильтров друг от друга (по отдельной аналитике), зависимость доступных особенностей, фильтры «вид», «планировка», «санузел», секцию и этаж с чекбоксом «не первый / не последний», ручной ввод значений и сортировку по цене и площади. Размерность подтянули из CRM (S/M/L вместо площади), число спален расширили до «4+». Выборщик прошёл две итерации доработок и редизайн.
Параметрический выборщик квартир: взаимозависимые фильтры (проект, спальни, размер, цена, секция, этаж, планировка, вид, особенности) и список планировок.
Сделали второй способ выбора — визуальный: покупатель кликает квартиру прямо на изображении дома и спускается рендер дома → секция → этаж → квартира. Технически это парсер SVG-масок поверх рендеров с строгой структурой медиа на CDN — отдельные рендеры и маски для всего дома, каждой секции и каждого этажа. Поэтажный план показывается с подсветкой выбранной квартиры. Параллельно держали разбор уровней сложных проектов («Маленькая Франция» — нулевой и первый уровни) и сверку, на чьей стороне расхождения в данных.
Перевели платформу на инфраструктуру AAG без остановки продаж: тестовый перенос данных, привязка доменов к серверам, миграция базы данных с SQLite на PostgreSQL. Настроили десятки 301-редиректов с исторических поддоменов проектов на новый сайт, проверили сниппеты (title, OG-теги), подняли тестовый стенд для бэкенда. Закрыли сайт от индексации на время сборки и открыли к запуску. Инфраструктурный слой без собственного интерфейса.
На период параллельной работы двух сайтов поставили баннеры-перемычки: со старого сайта — приглашение на новый, с нового — возможность вернуться на старый, плюс уведомления о переезде с отрисованными адаптивами. На старом сайте открыли цены для всех квартир и затем скрыли их перед полным переключением. Поп-апы перехода завязали на UTM-метки, чтобы не терять источники трафика. Так покупатели мягко переходили на новую платформу, пока шла финальная сборка.
Старый сайт холдинга (A-Estate, «Центр продаж недвижимости») с баннером-перемычкой «Попробовать новую версию сайта холдинга AAG».
Вместо стороннего конструктора собрали в собственной админ-панели визуальный редактор и блочный конструктор: команда холдинга сама собирает и правит страницы из готовых блоков — карточки, карусель, кнопки, текст, цифры, преимущества, карта, видео, архитектор — без участия разработчиков. Реализовали добавление новых страниц с конструктором на фронт и публикацию статических страниц на прод. Довели UX: хлебные крошки и кнопки «назад», выбор блоков, скелетоны-заглушки, типограф во всех текстовых полях (с правкой бага двойного применения).
Админ-панель AAG, страница «О проекте»: блочный конструктор с палитрой блоков (хиро, карусель, видео, карта, архитектор) и кнопками «Опубликовать» / «Добавить новый блок».
Админ-панель AAG: настройка блока страницы — заголовок, текст и галерея изображений.
Один из самых объёмных модулей проекта: спроектировали прототип административной панели и собрали ядро собственной CMS — бэкенд-методы выдачи списка квартир и проектов в API, приём заявок из форм, страница «Ход строительства» (API + админка), управление статусами машиномест и кладовых, акционные цены и выборочное скрытие цен. На этом же бэкенде встал первый ипотечный калькулятор и блок «Условия продаж». Позже админку перенесли на Strapi.
Админ-панель AAG: раздел «Проекты» — управление проектами холдинга.
Админ-панель AAG: раздел «Выбор квартиры» — управление каталогом квартир и статусами.
От поддержки лендингов перешли к проектированию большого сайта: провели бизнес-аналитику нового сайта, нарисовали UX-прототипы, разобрали дизайн-систему. Параллельно вели текущие задачи холдинга — переверстку office.aag.company, замену и установку планировок (AMO), обновление планировок паркинга и кладовых, анкету для дольщиков, «реинтеграцию» ситихаусов и пентхаусов «Маленькой Франции», настройку форм бронирования. Из этой аналитики выросли все ключевые модули будущей платформы.
UX-прототипы сделки и личного кабинета: выбор и бронирование объекта, способ приобретения (100% оплата / рассрочка / ипотека), оформление сделки и загрузка документов.
Работа с холдингом началась с сопровождения сайта и отдельных лендингов проектов — AKZENT, ALTER, «Маленькая Франция», «Ренессанс». Выгружали квартиры из CRM застройщика в «выборщик квартир» на лендингах, заводили проекты и разделы, обновляли ход строительства, готовили партнёрские фиды. Ставили ипотечные блоки с логотипами банков, подключали формы к Calltouch, выставляли статусы машиномест, добавляли карты на схемах домов. Эта поддержка лендингов шла параллельно с основной разработкой всё время проекта — отсюда и вырос большой новый сайт.