задача
Сайт нуждался в редизайне и разработке нового внешнего вида, соответствующего уровню компании. Также необходимо было разработать удобную страницу для выбора недвижимости по параметрам и с помощью визуального отбора.
решение
Мы полностью переработали главную страницу, сохранив при этом узнаваемость бренда компании "Донстрой". После этого изменения затронули все остальные страницы. Интерфейс стал дружелюбным и современным, а выбор недвижимости удобным и комфортным.
старая версия сайта
Визуальная концепция сайта устарела и требовала переработки. Также присутствовал ряд проблем: большое количество багов, медленная скорость загрузки, невозможность развития сайта на текущей CMS, устаревший недружелюбный дизайн, бессистемность контента, неинформативность материалов и усложненный клиентский путь.
19
![](/img/works/cases/donstroy/smile_cry.webp)
![](/img/works/cases/donstroy/old.gif)
типографика
Gilroy
цветовая схема
Dark Blue
Electric Blue
Light Blue
Grey 50
Grey 40
Grey 30
Grey 20
Grey 5
White
Orange
Red
Green
главная страница
Новая главная страница спроектирована с учетом потребностей современного пользователя, который не любит тратить много времени на поиск необходимой информации. Он получил возможность оценить масштаб компании, познакомиться со всеми проектами, подобрать подходящий для себя вариант покупки, получить ответы на вопросы об инвестиционной привлекательности наших предложений, о приобретении машиномест, кладок, коммерческих помещений.
![](/img/works/cases/donstroy/index.webp)
Главная страница стала картой, формирующей клиентский путь и позволяющей сориентироваться в огромном количестве контента нашего сайта.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
Главная страница теперь содержит блоки с переходами на все значимые страницы сайта. Доступ к страницам проекта можно получить с помощью слайдера на первом экране, из блока "География проектов", а также с помощью подробного фильтра.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
Ипотечный калькулятор в блоке «Варианты покупки» помогает пользователю быстро ориентироваться в цифрах и, при необходимости, перейти к подробному расчету и описанию программ во внутреннем разделе.
1h ago
![](/img/works/cases/donstroy/smile_cat.webp)
Главная страница предоставляет возможность быстро рассчитать инвестиции в недвижимость, а также перейти к разделам по выбору нежилых помещений.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
На инфографике были показаны основные цифры, раскрывающие масштаб компании «Донстрой».
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
Форма обратной связи доступна на каждой странице сайта в нижнем колонтитуле и по ссылке в шапке сайта.
1h ago
![](/img/works/cases/donstroy/smile_arm.webp)
mobile, 360px
![](/img/works/cases/donstroy/index_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/index_mobile_2.webp)
выбор квартир по параметрам
Самая важная и нужная страница для пользователя – это страница подбора квартир. Именно на ней он проведет больше всего времени на сайте, если настроен на приобретение недвижимости. Как всегда, мы детально проработали эту страницу, учли пожелания клиента и особенности работы фильтрации и поиска в агрегаторе недвижимости.
![](/img/works/cases/donstroy/choice_flat.webp)
Фильтр расположен в верхней части страницы и доступен из любой точки прокрутки при нажатии на фиксированную кнопку, возвращающую к фильтру.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
Спроектирвали дополнительные рекламные блоки с предложениями, которые помогут пользователю найти идеальный вариант недвижимости.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
![](/img/works/cases/donstroy/filter.webp)
Выпадающий список с количеством комнат показывает количество доступных квартир.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
Стоимость квартиры, как один из главных атрибутов поиска, расположена отдельно.
1h ago
Фильтрация объекта происходит поэтапно – от жилого комплекса до квартала и здания.
1h ago
Все остальные параметры квартир размещены в отдельном выпадающем списке.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_flat_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_flat_mobile_2.webp)
![](/img/works/cases/donstroy/choice_type_mobile.webp)
![](/img/works/cases/donstroy/choice_type.webp)
Просмотр определенного типа квартир открывается в том же окне параметрического выбора. Это уменьшает количество промежуточных переходов, что делает такой поиск удобным.
1h ago
![](/img/works/cases/donstroy/smile_arm.webp)
визуальный выбор квартир
Лаконичный flat design 2D выборщика квартир обладал определенной харизмой, но не позволял клиенту составить полноценное впечатление о проектах и их окружении.
При модернизации сайта ставка была сделана на яркий продающий визуальный контент; 2D версия выборщика была сохранена в качестве альтернативной.
![](/img/works/cases/donstroy/choice_visual_1.webp)
![](/img/works/cases/donstroy/choice_visual_2.webp)
![](/img/works/cases/donstroy/choice_visual_3.webp)
![](/img/works/cases/donstroy/choice_visual_4.webp)
Визуальный выбор - это путь от всего жилого комплекса к конкретному зданию и этажу в нем. В любой точке этого пути предусмотрена возможность перейти на другой этаж, секцию, корпус или квартал.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_visual_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_visual_mobile_2.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_visual_mobile_3.webp)
mobile, 360px
![](/img/works/cases/donstroy/choice_visual_mobile_4.webp)
страница пректа
Страница проекта теперь выглядит современно, на ней пользователь может найти полную информацию об интересующем его объекте недвижимости: преимущества жилого комплекса, инфраструктуру вокруг, актуальные предложения об акциях, ход строительства, контакты офисов продаж и просмотреть галерею.
![](/img/works/cases/donstroy/object.webp)
Верхнее меню имеет дополнительную навигацию по странице. Здесь же есть возможность посмотреть и скачать дополнительные материалы о проекте.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
На первом экране пользователя встречает галерея изображений жилого комплекса
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
Указали основные параметры квартир и домов и сразу дали возможность перейти к выбору.
1h ago
![](/img/works/cases/donstroy/smile_cat.webp)
Показали на карте внутреннюю и внешнюю инфраструктуру жилых комплексов, обозначив их разными цветами.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
На генплане пользователь сможет изучить информацию о разных квартвлах объекта и при необходимости перейдет в визуальный подбор квартир.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
В этом блоке собрали все визуальное отображение отделки лобби и квартир. Тут можно посмотреть фотографии и предварительные рендеры в галерее, а также в виде 3D-тура.
1h ago
![](/img/works/cases/donstroy/smile_arm.webp)
На карте отображены все офисы продаж, а в карточке слева подробные контакты этих офисов с возможностью построить маршркт до него.
1h ago
![](/img/works/cases/donstroy/smile_cat.webp)
mobile, 360px
![](/img/works/cases/donstroy/object_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/object_mobile_2.webp)
tablet, 834px
![](/img/works/cases/donstroy/object_tablet.webp)
все объекты
Страница со всеми проектами компании имела крайне неудобный интерфейс. Мы разделили отображение объектов на карте и в списке, тем самым упростив взаимодействие с пользователем. Теперь на странице есть удобный фильтр и красочные карточки объектов со всей необходимой информацией.
![](/img/works/cases/donstroy/objects_map.webp)
Отображенные на карты объекты имеют вид фотопревью, что помогает визуально отличить выбранный без необходимости читать текст.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
По клику на пин открывается более подробная карточка объекта с минимальной необходимой информацией о нем и возможностью перейти к подробной карточке проекта.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
desktop, 1920px
![](/img/works/cases/donstroy/objects_list_1.webp)
![](/img/works/cases/donstroy/objects_list_2.webp)
Фильтр поиска объектов сформирован по единой логике со страницей выбора квартир по параметрам.
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
В верхней части страницы разместили большую рекламную карточку ключевого проекта, тем самым выделив его.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
Карточки теперь выглядят единообразно и лаконично. Кстати, все макеты оснащены скелетонами для плавной загрузки.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
карточка квартиры
Прежняя карточка квартиры содержала излишнее количество акцентов и не позволяла сфокусировать внимание клиента на действительно важных аспектах.
Переработка страницы была произведена с учетом поведенческого паттерна пользователя и особенностей восприятия контента. При этом мы не сократили, а увеличили количество контента за счет той информации, которая действительно важна на этапе подбора недвижимости.
![](/img/works/cases/donstroy/flat_card.webp)
Переработанный блок с отображением информации о квартире удобен в использовании. У клиента появилась возможность переключаться между вкладками (планировка, на этаже, в доме, на генплане, а также изучить вид из окон квартир) и изучать информацию последовательно.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
Информация о квартире сконцентрирована в одном месте, что удобно для восприятия. Здесь же присутствует возможность скачать дополнительные материалы или поделиться страницей.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
Указывая стоимость квартиры, мы тут же приводим расчет ежемесячного платежа при покупке квартиры в ипотеку. Ипотечный калькулятор, расположенный ниже, позволяет «поиграть» с размером первоначального взноса и сроком кредита, подобрать альтернативные программы от банков.
1h ago
![](/img/works/cases/donstroy/smile_cat.webp)
Познакомившись с вариантом квартиры, клиент может перейти на подбор машиномест и кладовок – фильтры соответствующих выборщиков уже будут настроены.
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
На каждой странице присутствует подборка квартир, похожих на просмотренную. Здесь мы представляем вниманию клиента похожие планировки, расположенные в выбранной секции.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
mobile, 360px
![](/img/works/cases/donstroy/flat_card_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/flat_card_mobile_2.webp)
поиск нежилой недвижимости
Крупный застройщик всегда продает не только квартиры, но и сопутствующие помещения. Мы также переработали эти страницы, а некоторые сделали с нуля. И, конечно же, для всех устройств.
![](/img/works/cases/donstroy/choice_storage_1.webp)
![](/img/works/cases/donstroy/choice_storage_3.webp)
![](/img/works/cases/donstroy/choice_storage_2.webp)
![](/img/works/cases/donstroy/choice_storage_4.webp)
Машиоместа и кладовые помещения можно подобрать на отдельной странице для любого из проектов.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
Выбор коммерческой недвижимости оснащен фильтром. На карточках показаны фотопревью объектов и основная информация о них.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
И для всех лотов (квартиры, машиноместа, кладовые) доступно добавление в избранное. Если пользователь удалил объект, он не исчезнет сразу, а на нем отобразится информационное сообщение с возможностью вернуть лот в избранное.
1h ago
![](/img/works/cases/donstroy/smile_holiday.webp)
Выбранное машиноместо или кладовая отображены на детальной схеме. в попапе также показаны недавно просмотренные лоты.
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
способы покупки
Программы покупки недвижимости сейчас очень гибкие, и мы отразили это на странице «Способы покупки». Страница содержит ипотечный калькулятор по всем доступным программам банков и дает полную информацию об условиях рассрочки и программы Trade-in.
![](/img/works/cases/donstroy/purchase_1.webp)
![](/img/works/cases/donstroy/purchase_2.webp)
Здесь можно изменить параметры покупки в калькуляторе и получить предварительный расчет ипотечных программ.
1h ago
![](/img/works/cases/donstroy/smile_hands.webp)
Заявку на ипотеку по выбранной программе можно отправить онлайн, заполнив небольшую форму.
1h ago
![](/img/works/cases/donstroy/smile_thumbs.webp)
![](/img/works/cases/donstroy/purchase_3.webp)
mobile, 360px
![](/img/works/cases/donstroy/purchase_mobile_1.webp)
mobile, 360px
![](/img/works/cases/donstroy/purchase_mobile_2.webp)
mobile, 360px
![](/img/works/cases/donstroy/purchase_mobile_3.webp)
mobile, 360px
![](/img/works/cases/donstroy/purchase_mobile_4.webp)
дополнительные страницы
В течение 12 месяцев мы работали над редизайном всего веб-сайта. Работа над этим проектом состоит в создании удобного портала для пользователя и качественного инструмента бизнеса для заказчика.
![](/img/works/cases/donstroy/more_page.webp)
![](/img/works/cases/donstroy/404.webp)
Технические страницы мы сделали нескучными, дообавив в них эмоциональные видео с видами Москвы.
1h ago
![](/img/works/cases/donstroy/smile_heart.webp)
Над проектом работали:
Руководитель проекта
Иван Куксин
Арт-директор
Юлия Соловьева
Менеджер проекта
Анастасия Шмакова
Дизайнеры
Ирина Ермакова
Технический дизайнер
Лиана Агапова
Юлия Кутукова
Фронтенд-разработчики
Владимир Козубов
Лариса Морожникова
Александр Данилов
Бэкенд-разработчики
Анатолий Самсонов
Контент-менеджер
Илья Воздвиженский
QA-инженер
Марина Зверева