LOYO · Интерактивный каталог

LOYO Development продаёт 10+ жилых комплексов по всему Бали, и агентам нужно было одно место, чтобы их показывать: сами объекты, что вокруг них, финансовые модели, документы. Каталог ведёт инвестора от карты острова до карточки одного юнита — на каждом шаге карточка с фото и ключевыми цифрами.

Весь дизайн-концепт — навигация, карта, drill-down, карточки юнитов — был готов в Figma ещё до кода. Я подключился на фрилансе и работал над прод-фронтендом по этому концепту.

Бриф укладывался в одну картинку: свести карты, инфраструктуру, цены, документы и финмодели по десятку с лишним комплексов в один инструмент, из которого агент может вести презентацию — в том числе онлайн, шаря экран на Zoom с удалённым покупателем.

Просмотр начинается с карты, потому что район выбирают раньше, чем сам объект. Комплексы сгруппированы по регионам — Убуд, Букит, Чангу, — а точки интереса рядом (пляжи, отели, клубы) открываются в тех же карточках-панелях, что и сами проекты. Один язык карточек на всё: и объект, и то, что вокруг него, читаются одинаково.

Открыв комплекс, агент попадает на 3D-вид с воздуха: реальные цены приколоты прямо к зданиям, а суть сделки — ROI, цена входа, due diligence, текущие акции — лежит в боковой панели. Не надо переключаться между таблицей, презентацией и папкой с ценами: то, из-за чего инвестор задаёт вопросы, стоит у него перед глазами.

Визуал здесь работает наравне с цифрами. Каждая страница комплекса ставит рядом с числами галерею: рендеры, видеотуры, 360°-панорамы и апдейты со стройки. Ровно то, что удалённый покупатель хочет увидеть, прежде чем поверить в объект, который не может потрогать.

Дальше каталог сужается так же, как сужается сделка: остров → регион → комплекс → этаж → юнит. Наведёшь на этаж — подсвечиваются юниты, попадающие под активные фильтры. Карточка юнита собирает в одном месте цену, метраж, ROI и документы, а полноэкранный план открывает панорамы уже самого юнита.

Весь опыт был спроектирован и показан в Figma ещё до того, как написали первую строку кода: по готовому концепту провели демо, так что модель взаимодействия проверили до разработки. Моя часть началась там, где заканчивался концепт, — прод-фронтенд по нему.

Каталог работает на loyo-unitsystem.com и даёт отделу продаж и агентам один инструмент под презентации, финмодели и документы — от карты острова до карточки одного юнита.