

Сайт ЖК JOIS от MR Group
UX-проектирование, UI-дизайн, разработка на Next.js, интеграция с CRM
MR Group — один из лидеров в девелопменте жилой и коммерческой недвижимости бизнес-класса.

Контекст и задача
Задача — вовлечь пользователя в знакомство с объектом и сконвертировать первичный интерес в заявку на бронирование или визит в офис продаж.
Работа велась поэтапно: при получении РНС был запущен лендинг, далее он был переработан в главную страницу сайта и запускались остальные страницы, включая листинг квартир и интеграцию с CRM.


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


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


Дизайн
Адаптировали айдентику брендбука JOIS к диджитал среде, отобразив их в визуальных элементах, градиентных бликах, героях.
Диджитал-атрибуты — сетка, вёрстка блоков, принцип работы конкретных интерфейсных элементов, микроанимации — не только не противоречат брендбуку, а развивают и дополняют его. В результате сайт выглядит очень цельным, и визуально отражает идею бренда.



Frontend
Стек — NextJS, создание анимаций — GSAP.
Взаимодействие с CRM по API.
Основные разделы сайта включают две страницы подбора: большой список-каталог с гибкими фильтрами и визуальный раздел — генплан. Который был самой трудоёмкой частью front-end’а. К базовым параметрам генплана мы добавили возможность выбора здания, этажа и квартиры на схеме. С помощью генплана можно узнать подробную информацию о квартире, цену, количество комнат и площадь, а также использовать 3D-панораму. В разработке генплана уделялось много внимания адаптивности и удобству для пользователей, с учётом интерактивности и UX-деталей.


Расширение функционала
В разделах с информацией о покупке есть калькулятор ипотеки. В него интегрирован сервис ДВИЖ на GraphQL, предоставляющий широкий спектр возможностей работы с недвижимостью — от бронирования до подбора ипотеки.
Работали с динамической структурой PDF — на основе данных сгенерировали для каждой квартиры презентацию в формате PDF со своей схемой и параметрами. Это небольшая, но приятная деталь пользовательского опыта.
Основываясь на предоставленных планах этажей, мы отрисовали поэтажные планы в стилистике проекта, подготовили их к интеграции на сайт.

Backend
Особенность проекта с точки зрения бэкенда — в интеграции с CRM MR Group. После анализа технических требований мы настроили интеграции с внешней CRM-системой заказчика, подготовили панель администратора и разработали REST API.
Несмотря на то, что Битрикс обычно не используют для создания API, у нас успешно получилось запустить работающий продукт.



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