Этот сайт использует cookie файлы для хранения данных. Продолжая использовать сайт, вы даете согласие на работу с этими файлами.
Принять

Агрегатор для СЗ Андор

01
10
© 2012-2025 WEBSHOP

СЗ «Андор» — крупный региональный застройщик. За 25 лет работы построили более 60 объектов, среди которых жилые дома, коммерческая недвижимость и жилые комплексы комфорт и премиум класса.

маркетинговый анализ
Проектирование
Дизайн
Фронтенд
Бэкенд
Настройка интеграций с Домопланер
andornn.ru

Цели и задачи сайта

  1. Разработать современный сайт для крупного регионального застройщка с упором на интуитивно понятный интерфейс.

  2. Разработать удобную систему администрирования, чтобы сотрудники компании сами могли без труда заменить, добавить или удалить информацию на сайте.

  3. Разработать сквозную по всем ЖК систему фильтрации недвижимости, которая позволит быстро найти подходящую квартиру, парковку или коммерческую недвижимость.

  4. Автоматизировать процессы. Разработать двустороннюю синхронизацию с CRM Заказчика, чтобы вся ключевая информация автоматически добавлялась и редактировалась на сайте в режиме реального времени.

Исследование

Начали разработку сайта с брифинга. Так мы выяснили все пожелания клиента, важные нюансы и необходимый функционал. Также провели анализ ЦА, изучили проекты лидеров в отрасли и выполнили аудит старого сайта, выделив основные ошибки. И основная проблема старого сайта заключалась в том, что он устарел, как визуально, так и с точки зрения пользовательского опыта.

  • Этап исследования

    • Аудит текущего сайта
    • Анализ конкурентов
    • Пользовательские исследования
    • Анализ метрик
    • Построение CJM
  • Проектирование

    • Проработка User Flow
    • Обновленные CJM ключевых сценариев
  • Прототипы

    • Разработка прототипов
    • Переработка устаревшего контента
  • Визуализация

    • Составление мудборда
    • Подбор референсов
    • Визуальный концепт
    • Разработка дизайна страниц
Андор исследование главный экран
Андор исследование экран ипотека

Фирменный стиль

Фирменный стиль компании не изменился. Поэтому в дизайне было важно сохранить преемственность со старым сайтом. При работе с типографикой, мы использовали более современный и легко читаемый шрифт Raleway. Цветовая палитра осталась в рамках фирменного стиля компании, но была немного освежена.

Шрифт
Aa Raleway
#ED3F3F
#312929
#EEEEF9

Главная страница

Главная страница содержит краткую информацию о компании, и основной её задачей является подбор проектов. Мы разработали удобный фильтр, который позволит быстро найти подходящий ЖК по необходимым параметрам. Также для дополнительного удобства реализовали переключение на подбор проектов на карте.

Скриншот главной страницы Вид главной страницы на iPad

Навигация

Проработали навигацию, чтобы можно было легко добраться до всех разделов сайта. Основные страницы вынесли в первый уровень меню, а второстепенные находятся внутри, чтобы не нагружать интерфейс.

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

Скриншот шапки с открытыми проектами Скриншот шапки c открытыми подменю 'Еще'
Мокап Мокап Мокап Мокап

Карточка ЖК

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

Также доступна функция просмотра 3D-планировок квартир, что помогает наглядно оценить их организацию и площадь. Дополнительно можно ознакомиться с альбомами, в которых регулярно публикуются фотоотчеты о ходе строительства жилого комплекса.

Скриншот карточки ЖК Скриншот карточки ЖК

Подбор квартир

Разработали удобную систему подбора квартир с возможностью фильтрации по жилым комплексам и ключевым параметрам квартир.

Для дополнительного удобства реализована функция выбора квартиры на шахматке – вы можете наглядно увидеть доступные варианты и их расположение на этаже.

Скриншот выбора квартир Адаптив выбора квартир

Карточка квартиры

Карточка квартиры содержит в себе подробные характеристики, выбранной квартиры, различные варианты планировок. Пользователь может добавить квартиру в избранное или поделиться ей в соцсетях с автоматически сгенерированным PDF файлом. Также дополнительно добавили информацию об отделке и ипотечный калькулятор.

Скриншот карточки квартиры Адаптив карточки квартиры

Подбор нежилых
помещений

На странице подбора нежилых помещений реализовали переключение между типами недвижимости: машино-места, сити-боксы и коммерческая. И также выделили основные параметры для удобной фильтрации.

Мокап подбора нежилых помещений Адаптив подбора нежилых помещений

Ипотека

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

Скриншот страницы Ипотека Адаптив ипотечного калькулятора

Ход строительства

Разработали отдельную страницу «Ход строительства», которая включает:

  1. Возможность переключения Фото/Видео галереи
  2. Фильтрацию по ЖК
  3. Карточку каждого дома, в которой по годам разделены альбомы хода строительства соотвтствующего дома
Скриншот Хода строительства Скриншот детальной страницы хода строительства
Адаптив Хода строительства Адаптив детальной страницы хода строительства

Другие страницы

Проработали ряд внутренних страниц с информацией о компании, сданных объектах и ипотеке, а также раздел со статьями и акциями.

Скриншот страницы Ипотека Скриншот страницы Сданный объект Скриншот страницы Сравнение Скриншот страницы Гарантия Скриншот страницы Статьи Скриншот страницы Контакты Скриншот страницы О директоре
Скриншот страницы Ипотека Скриншот страницы Сданный объект Скриншот страницы Сравнение Скриншот страницы Гарантия Скриншот страницы Статьи Скриншот страницы Контакты Скриншот страницы О директоре

Технологический стек

Мы уделяем особое внимание выбору правильных инструментов для каждого этапа разработки, чтобы обеспечить оптимальное сочетание функциональности, производительности и удобства использования продукта

  • Дизайн Фигма
  • Frontend Vue и Nuxt
  • Backend Vue и Nuxt

Разработка

Реализовали интуитивно простую панель администрирования для работы с контентом на сайте: Редактирование, Создание и Удаление страниц, блоков и информации в каждом из них.

Разработали персонально под данный проект несколько видео-инструкций, где описали работы со всеми блоками сайта, включая системные: редактирование пользователей, гибкие настройки мета-тегов и т.д.

Скриншот админпанели Скриншот админпанели

Настройка интеграций с Домопланер

Схема
  1. На сайт автоматически добавляется информация о новом доме. Настроен импорт/экспорт данных (информация о домах, квартирах, машиноместах, сити-боксах и коммерческой недвижимости) с CRM Домопланер

  2. Настроен экспорт заявок с сайта (бронирование недвижимости и другие формы обратной связи) в CRM Домопланер

  3. Информация о ценах, статусах, сроках обновляется на сайте автоматически после внесения правок в CRM Домопланер

Мокап