- Заказчик
- ООО «Каскад девелопмент специализированный застройщик» входит в ГК КАСКАД. Всесторонний подход позволяет ГК КАСКАД двигаться в сторону лидирующих мест на рынке жилой недвижимости Н. Новгород
- Задача
- Разработать промо-сайт Жилого комплекса, который выделится на фоне конкурентов и запомнится Пользователю. Реализовать удобный интерфейс для подбора квартир, машино-мест и сити-боксов
ЖК «Каскад на Линдовской» - пятый проект, который мы реализуем с девелопером ГК «Каскад».
Главная цель: объединить эстетику и эффективность, создать инструмент, который будет одинаково удобен и для покупателя, и для отдела продаж. И, конечно, клиент предоставил полную свободу в творческих решениях, о чем только и мечтали наши дизайнеры.
Основные задачи:
- выделиться среди застройщиков Нижнего Новгорода, где конкуренция крайне высока;
- передать философию и атмосферу жилого комплекса;
- сделать процесс подбора квартир, сити-боксов и парковок максимально удобным.
Анализ и концепция
Нижний Новгород - город, где клиент строит свои жилые комплексы, население здесь более 1 млн. человек. Город продолжает активно застраиваться и конкуренция среди компаний-застройщиков высока.
Рынок конкурентов Н. Новгорода мы хорошо знаем, так как не только реализовали тут много проектов в сфере недвижимости, но и являемся жителями этого города. Мы знали, чего не хватает другим сайтам, и хотели создать нечто более удобное и привлекательное, чтобы выделить клиента на их фоне.
Наш дизайнер собрала референсы лучших проектов со всего мира и составила мудборд, а project менеджер занялся CJM и разработал структуру каждой страницы сайта используя контент от заказчика.
Стало ясно, что для достижения цели нам нужно не только красивое оформление, но и интуитивный интерфейс с удобным подбором квартир.
Выделяем на фоне конкурентов с помощью дизайна
Web-дизайн - это, пожалуй, самый важный для заказчика этап, так как front и back для директоров что-то техническое, а дизайн - то, что перед глазами. Поэтому при разработке данного проекта, мы особый акцент сделали на подачу информации.
Мы реализовали Главную страницу и страницу “О проекте” с горизонтальным скроллом. Да, это не новое решение, но оно выделяет проект на фоне конкурентов и позволяет интересно донести информацию до пользователя.
Разработали дизайн мобильной (адаптивной) версии. Каждая страница с телефона не только визуально приятна и информативна, но и крайне удобна. Тут не нужно задумываться куда нажать, чтобы открылась нужная страница. Все под рукой: хочешь перейти в подбор квартир - кнопка всегда закреплена в нижней части экрана и доступна для клика.
От мечты до метража: как мы спроектировали подбор квартиры
Пользователь заходит на сайт ЖК не просто посмотреть визуал, но и подобрать квартиру быстро и удобно. Особенно важно, чтобы этот процесс был комфортным на любом устройстве: от смартфона до большого монитора.
Поэтому мы сделали систему подбора, которая объединяет простоту, визуальную логику и скорость реакции интерфейса:
- Шахматка квартир: классический инструмент, но реализованный с максимальной наглядностью. Здесь представлены все квартиры дома с расположением на этаже. Сразу понимаешь, где и какие квартиры доступные для покупки.
- Список квартир: в виде карточек, как в интернет-магазине. Такой подход привычен пользователю и упрощает сравнение: можно листать, фильтровать, выбирать без необходимости переходить между страницами.
- Фильтры: крайне важный инструмент для пользователя. Нужен конкретный диапазон бюджета, этаж, планировка или количество комнат. Всё доступно в один клик. Для мобильных устройств фильтр реализован в виде отдельного полноэкранного окна, которое открывается нажатием одной кнопки. Выбрали параметры, нажали “Посмотреть результаты” и нужные квартиры как на ладони.
Кристина (наш дизайнер) прорисовала все в таких пропорциях, которые крайне удобны для работы с сайтом на любом устройстве: iPhone Mini, Планшет, 4К монитор. Удобно, просто, понятно, красиво.
Это не просто адаптация, а полноценная оптимизация под сценарии взаимодействия: ничего не перекрывает и не теряется.
Интерфейс получился таким, каким должен быть сайт застройщика: понятным, визуально чистым и удобным.
Мы разработали 15+ страниц с уникальным дизайном, адаптированных под 6 разрешений экрана: от смартфонов до 4К-мониторов.
Каждый раздел работает на общий опыт пользователя среди которых:
- Парковки
- Сити-боксы
- Расположение
- Ход строительства
- Новости
- Контакты и другие.
То, что остается за кадром для заказчика
Когда сайт уже визуально выглядит готовым, основная работа только начинается техническая реализация, без которой ни одна деталь не заработает так, как задумано. И это техническая реализация. Frontend и Backend для многих заказчиков остается за кадром, но это огромная работа. Макеты из Figma должны появляться по ссылке, функции - работать, а посетители наслаждаться удобством и скоростью работы сайта.
Мы выстроили архитектуру сайта так, чтобы она была и лёгкой, и масштабируемой:
- Frontend реализовали на фреймворках Nuxt.js и Vue.js, что позволяет увеличить скорость загрузки сайта, повысить эффективность SEO-продвижения и упростить процесс масштабирования сайта.
- Backend - на фреймворке Symfony, что позволяет масштабировать проект, реализовать функциональные решения любой сложности и интегрировать сторонние сервисы.
- Разработали упрощенную систему администрирования сайта на Headless CMS Drupal.
- Разработали индивидуальную инструкцию по редактированию контента на сайте.
Технические решения проекта в разработке
- Анимация. Сделать горизонтальный скролл - нестандартное, но набирающее обороты решение. В этом нет особых сложностей, но сделать его удобным, с эффектами появления элементов, при этом адаптированным под различные разрешения экрана - уже не такая простая задача. Можно сказать, что мы перфекционисты в этом плане, поэтому тут все должно работать в WEB и работать без изъянов на всех разрешениях.
- Интеграция с CRM. Облегчаем работу отдела продаж через настройку синхронизации (импорт/экспорт данных) с CRM M2Lab. Из CRM выгружаются на сайт данные по квартирам: планировка, метраж, количество комнат, статус (бронь, свободна, продана) и т.д. А с сайта в CRM отправляются данные о бронях и из форм обратной связи.
- Система подбора квартир. Мы создали систему подбора, где адаптивные фильтры позволяют выбирать параметры так, чтобы остальные обновлялись автоматически. Карты и шахматки квартир построены на Vue.js - это даёт скорость и стабильность даже при большом объёме данных. Аналогичная логика реализована и для паркингов: интерактивная схема парковки реализована таким образом, что каждое машиноместо активное для клика. При клике вы можете его забронировать, а при просмотре схемы понимаете, какие места заняты, а какие доступны для покупки. Можете купить ближе к лифту, выезду или стене. Просто и удобно для пользователя.
- Ипотечный калькулятор. Крайне удобный инструмент. Чтобы пользователь не уходил искать расчёты на сторонних сайтах, мы встроили адаптивный ипотечный калькулятор. Тут разместили все параметры (процентная ставка, срок кредита и т.д.), которые можно менять. Данные обновляются в режиме реального времени. Подобрали наилучший вариант - кликайте “График платежей”. Настроенная нами система подготовит график персонально под вас.
Что же получил заказчик?
ЖК «Каскад на Линдовской» стал примером того, как можно соединить эстетику, технологию и бизнес-цель в одном решении:
Выделились среди конкурентов:
- Минималистичный дизайн с горизонтальным скроллом. Выгодно выделяет проект в сегменте застройщиков региона. Без перегрузки — чистая визуальная логика и премиальное ощущение.
- Погружение в философию проекта. Сайт не навязывает, а вовлекает: пользователь буквально проживает путь — от архитектуры до выбора квартиры.Мы не только рассказали про проект, но и сделали так, чтобы пользователь погрузился в его философию и стал на какое-то время его частью и ощутил себя уже жителем ЖК..
- Удобство для всех сторон. Для покупателя - быстрый и интуитивный подбор квартир. Для заказчика - автоматическая синхронизация с CRM и управление контентом без помощи разработчиков.
С нетерпением ждали, когда же нам одобрят публикацию этого кейса. И вот, сайт запустили, а мы рассказали, каким может быть классным сайт застройщика.
