Paper texture
Перейти к содержимому
UX/UI Design · Web Platform · Design Systems

DOORS REAL ESTATEМультиколористическая дизайн-платформа агентства премиальной недвижимости

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

+24.8%
Конверсия в просмотр
Рост числа подтвержденных записей на очный просмотр объектов после редизайна смарт-фильтра
38 с
Время подбора лота
Сокращение времени от захода на главную до нахождения подходящего объекта в каталоге
4 схемы
Колористические системы
Адаптивные палитры: фирменный сапфир, архитектурный монохром, комплементарная и аналоговая
86 / 100
SUS Usability Score
Оценка юзабилити по шкале System Usability Scale при слепом тестировании 40 респондентов
01 / ШОУКЕЙС

Apple iPhone 12 Pro • 3D Retina Мокап

Фотореалистичный 3D-рендер мобильной версии (2716 × 2037 px) с адаптацией фильтров и каталога

Мобильный опыт состоятельного покупателя

Быстрый подбор лота с экрана смартфона без информационного перегруза

Doors Real Estate iPhone 12 Pro 3D Showcase
Кликните для зума
Инлайн смарт-фильтр

Селектор Buy / Rent и мгновенный срез категорий (Urban, Country, International) оптимизированы под управление одним пальцем.

Поиск по ID в один тап

Клиенты, получившие артикул лота в Telegram или наружной рекламе, мгновенно открывают карточку без лишней навигации.

Retina-архитектура

Полноэкранные фото интерьеров и планировок с поддержкой pinch-to-zoom жестов для быстрой оценки планировочных решений.

02 / UX АНАЛИТИКА

UX Исследования & Анализ рынка

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

Матрица бенчмаркинга платформ недвижимости

Сравнение ключевых параметров UX/UI классифайдов и премиум-бутиков

ПлатформаТип продуктаСкорость поискаПоиск по IDМобильный UXФокус конверсии
ЦИАНМасс-маркет классифайдМедленно (18+ фильтров, перегруз рекламой)НетУтилитарное, агрессивные пуши и всплывающие окнаМонетизация звонков агентств и платного продвижения
ДомкликБанковская экосистема (Сбер)Средне (фокус на ипотечный калькулятор)НетТяжеловесное, требует авторизацию по Сбер IDВыдача ипотечных кредитов и страховок
Savills / White & FairПремиальный бутик недвижимостиБыстро, но фильтры спрятаны в модалкиНетСлабая оптимизация под тач-жесты, долгий скроллСбор контактов через форму обратного звонка
Doors Real EstateПродуктовая платформа агентства (Shop 4.0 Standard)Молниеносно (инлайн смарт-бар: тип, локация, цена, ID) ДаПлавный адаптивный флоу, кликабельный 3D-экспириенсБыстрая запись на просмотр и прямой чат с брокером

Целевые персоны покупателей (User Personas)

МВ
Максим Воронов, 41 года
Основатель IT-холдинга, частный инвестор
"Мне некогда заполнять 20 полей в фильтрах. Я хочу открыть сайт, вбить локацию или ID лота, который мне прислал ассистент, и сразу увидеть планировку и вид из окон."
Цели и задачи:
  • •Быстрый поиск лотов от 120 млн ₽ в Хамовниках и на Патриарших
  • •Моментальный доступ к объекту по короткому ID без блуждания по каталогу
  • •Прямой контакт с персональным брокером в Telegram без спам-звонков
Боли на типовых сайтах:
  • ✕Классифайды скрывают реальные планировки и требуют звонить риелторам
  • ✕Большинство сайтов пестрят рекламой и не адаптированы под Retina-экраны
  • ✕Теряется контекст лота при переходе из переписки
UX-решения в Doors Real Estate:
  • Выделенный поисковый инпут «Search by ID» прямо в центре смарт-бара
  • Крупные архитектурные карточки с метражом, спальнями и ценой в валюте/рублях
  • Кнопка быстрого бронирования просмотра с выбором удобного слота
ЕЛ
Екатерина Лебедева, 32 года
Управляющий партнер фэшн-бренда, арендатор
"Я ищу пространство, в котором приятно жить и работать. Для меня ключевое — свет, эстетика дома и окружение. Сайт агентства должен выглядеть так же безупречно, как сами апартаменты."
Цели и задачи:
  • •Аренда видовой квартиры в центре или загородного дома на летний сезон
  • •Четкое визуальное разделение направлений: City vs. Country vs. International
  • •Высокое разрешение фотографий интерьеров и видео-туры
Боли на типовых сайтах:
  • ✕Непонятно, актуален ли лот: многие сайты держат «фейковые» объявления
  • ✕Неудобно смотреть фото на смартфоне — мелкие галереи и медленная загрузка
  • ✕Сложно переключаться между покупкой и долгосрочной арендой
UX-решения в Doors Real Estate:
  • Инлайн-тумблер «Buy / Rent» на первом экране с мгновенной фильтрацией без перезагрузки
  • Плавная адаптивная галерея с поддержкой свайпов и зума планировок
  • Плашка «Актуальный лот из закрытой базы» с гарантией достоверности цены
03 / ПУТЬ ПОЛЬЗОВАТЕЛЯ

Customer Journey Map & Продуктовые гипотезы

Путь состоятельного клиента агентства от первого клика по рекламе до согласования времени очного визита на объект с персональным брокером.

5 Ключевых этапов клиентского пути (CJM)

01. Вход82%
Первое впечатление & Селектор интента

Понять специализацию агентства и мгновенно переключиться на нужный тип сделки (Buy / Rent).

Боль: На традиционных порталах 90% экрана забито баннерами и непонятными спецпредложениями.
Решение: Минималистичный Hero с крупным слоганом «We help to open doors» и четким сегментным селектором.
02. Смарт-фильтр94%
Параметрический подбор в 1 клик

Задать вилку бюджета, тип недвижимости (Urban, Country, International) и локацию.

Боль: Сложные выпадающие списки, сбрасывающие выбранные параметры при случайном клике.
Решение: Горизонтальный смарт-бар с интуитивными дропдаунами и полем мгновенного поиска по ID лота.
03. Каталог88%
Визуальная витрина объектов

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

Боль: Мелкие превью, на которых не видно качества отделки и деталей планировочных решений.
Решение: Широкоформатные карточки с акцентом на свет и объем, чистая типографика без визуального шума.
04. Карточка лота91%
Анализ характеристик и планировки

Получить исчерпывающую информацию: метраж, этаж, видовые оси, паркинг, условия сделки.

Боль: Скрытые комиссии, отсутствие планировок в открытом доступе, требование ввести телефон.
Решение: Прозрачная спецификация, интерактивный просмотрщик экспликации и честный статус объекта.
05. Конверсия96%
Запись на просмотр & Персональный брокер

Назначить встречу на объекте в удобное время без навязчивых автоматических роботов.

Боль: После заполнения формы перезванивает колл-центр через 3 часа и начинает задавать те же вопросы.
Решение: Прямой контакт ведущего брокера объекта с кнопками перехода в WhatsApp и Telegram в один тап.

4 Продуктовые гипотезы с измеримыми метриками

H-01Подтверждена

Инлайн-селектор Buy / Rent на Hero-экране

Предпосылка:

Если вынести переключение типа сделки (Buy / Rent) и направлений (Urban / Country / International / Commercial) в горизонтальный смарт-бар первого экрана, пользователи на 40% быстрее приступят к просмотру лотов.

UX-решение:

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

Метрика проверки
CTR первого взаимодействия
Результат теста
+31.4% рост кликов по первичному фильтру
H-02Подтверждена

Прямой поиск по ID лота (Search by ID)

Предпосылка:

Клиенты, приходящие из соцсетей, Telegram-каналов и наружной рекламы, имеют готовый код объекта. Если дать им поле поиска по ID на главной, отток на первом экране сократится вдвое.

UX-решение:

Интегрирован выделенный инпут «Search by ID» рядом с кнопкой запуска поиска.

Метрика проверки
Drop-off rate с первого экрана
Результат теста
Снижение оттока на 46% среди входящего трафика
H-03Подтверждена

Колористическая дифференциация 4 сегментов

Предпосылка:

Если окрасить каждое из 4 ключевых направлений агентства в гармоничную цветовую гамму (Сапфир для города, Шалфей для загородки, Океан/Янтарь для зарубежки), считываемость категорий возрастет.

UX-решение:

Спроектирована 4-схемная колористическая модель с сохранением общего базового лейаута 1366px.

Метрика проверки
Время идентификации категории лота
Результат теста
Сокращение времени распознавания на 34%
H-04Подтверждена

Персональная карточка брокера вместо холодных лид-форм

Предпосылка:

В премиум-сегменте доверие формируется к конкретному человеку. Лицо эксперта и прямой мессенджер поднимут конверсию в очный просмотр.

UX-решение:

В подвале и карточках лотов размещены аватары брокеров с прямым статусом «Онлайн» и контактом.

Метрика проверки
Конверсия в согласование просмотра
Результат теста
+24.8% рост подтвержденных очных показов
04 / ТЕОРИЯ ЦВЕТА

4 Колористические схемы & Теория цвета

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

Primary Brand Scheme

Исходник (Signature Brand)

Основной фирменный стиль Doors Real Estate. Базируется на глубоком сапфирово-синем оттенке доверия и чистоты, выверенных межстрочных интервалах и строгой геометрической верстке.

Колористическая палитра & Роли в интерфейсе

#09253B
Сапфировый темный
Primary Dark
#27579A
Королевский синий
Brand Accent
#637FA7
Стальной серо-синий
Secondary Steel
#CDD6E3
Ледяной туман
Ice Tint
#F5F6F8
Фоновый молочный
Surface Light
Теория цветовой гармонии

Классическая монохроматически-акцентная гармония на основе синего спектра (#09253B и #27579A). Синий цвет традиционно ассоциируется с финансовой надежностью, безопасностью крупных инвестиций и институциональным доверием.

Целевой сегмент рынка

Городская элитная недвижимость (Urban Realty): новостройки премиум-класса, пентхаусы в центре, клубные дома.

Интерактивное превью макета (высота 5909 px, скроллируйте внутри окна):1366 × 5909 px
doors-realestate.com/original
Исходник (Signature Brand)
05 / РАЗБОР ИСХОДНИКА (5909 PX)

Анатомия основного интерфейса («Исходник»)

Полноразмерный 1366-пиксельный десктопный портал, спроектированный для мгновенного снятия когнитивного напряжения состоятельного покупателя и конвертации интереса в согласование очного просмотра.

1Hero Banner & Слоган бренда

«We help to open doors»

Главный экран встречает посетителя чистым слоганом и монументальной архитектурной фотографией на фоне. Название бренда Doors обыгрывается визуально: мы открываем двери в лучшие объекты города и мира.

UX-решение: Никаких всплывающих окон, чат-ботов на пол-экрана и агрессивных плашек. Только воздух, свет и чистый статус агентства.
2Инлайн смарт-фильтр & Селектор Buy / Rent

Мультипараметрический смарт-бар

Строка фильтрации вынесена на первый экран: быстрый выбор режима Buy / Rent, категории (Urban Realty, country homes, international, commercial), параметров площади и выделенного инпута Search by ID.

Метрика: Время первичной фильтрации сократилось до 38 секунд против 114 секунд у классифайдов.
3Витрина Urban Realty

Городская недвижимость премиум-класса

Асимметричная журнальная сетка лотов с крупными фотографиями фасадов, видовыми террасами и продуманным описанием инфраструктуры (паркинг, консьерж, приватный сад).

UX-решение: Карточка объекта показывает не только цену, но и ключевую ценность лота (высота потолков, отделка, вид).
4Загородные резиденции & Зарубежные лоты

Country Homes & International Realty

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

Результат: +28% рост кликов по зарубежным направлениям благодаря визуальному разделению блоков.
5Индикаторы масштаба & Экспертиза

1700+ лотов в активной базе агентства

Блок социальных доказательств и охвата: 1700+ городских лотов, 150+ загородных усадеб, международная сеть партнерских офисов и подтвержденный опыт закрытия сделок от 1 млн $.

Доверие: Числа подтверждают статус агентства как ключевого игрока рынка без самовосхваления.
6Конверсионный футер & Прямой контакт

«Our doors are always open for you»

Завершающий эмоциональный акцент с кнопками прямого звонка и мессенджеров (WhatsApp, Telegram). Персональный брокер готов ответить на вопросы в течение 5 минут.

Конверсия: +24.8% подтвержденных бронирований просмотров по сравнению со старой формой.
06 / ПРЕЗЕНТАЦИОННЫЕ МОКАПЫ & УСТРОЙСТВА

Интерфейс в реальной среде и на девайсах

Демонстрация адаптивности веб-платформы Doors Real Estate: от широкоформатных мониторов и ноутбуков до планшетов брокеров и смартфонов клиентов.

MacBook Pro на каменном постаменте (Editorial Showcase)
Desktop Showcase

MacBook Pro на каменном постаменте (Editorial Showcase)

Презентационный мокап флагманского 1366px портала Doors Real Estate на экране MacBook Pro на фактурном каменном постаменте.

Mockuuups Studio RenderОткрыть
MacBook Pro Space Gray в рабочем интерьере
Workspace Environment

MacBook Pro Space Gray в рабочем интерьере

Отображение каталога Urban Realty и подбора элитных апартаментов на деревянном столе в премиальном офисе.

Mockuuups Studio RenderОткрыть
iPad Pro: Презентация лота клиенту брокером
Tablet Lifestyle

iPad Pro: Презентация лота клиенту брокером

Планшетный сценарий: персональный брокер презентует архитектурный план и видовые оси пентхауса покупателю.

Mockuuups Studio RenderОткрыть
iPhone 15 Pro: Быстрая бронь & Оплата задатка с карты
Mobile Transaction

iPhone 15 Pro: Быстрая бронь & Оплата задатка с карты

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

Mockuuups Studio RenderОткрыть
iPhone Showcase на мультицветовом фоне
Editorial Mockup

iPhone Showcase на мультицветовом фоне

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

Mockuuups Studio RenderОткрыть
iPhone 12 Pro 3D Showcase (2716 × 2037 px)
Photorealistic 3D Render

iPhone 12 Pro 3D Showcase (2716 × 2037 px)

Фотореалистичный 3D-рендер двух смартфонов Apple iPhone 12 Pro под углом, демонстрирующий безупречную адаптивность смарт-фильтра, каталога Urban Realty и презентационных карточек.

Mockuuups Studio RenderОткрыть
Полный десктопный портал 1366 × 5909 px (Исходник)
Master Desktop Canvas

Полный десктопный портал 1366 × 5909 px (Исходник)

Полноразмерный непрерывный холст десктопного сайта агентства со всеми ключевыми секциями: Hero, смарт-фильтр, Urban Realty, Country Homes, International, база данных 1700+ лотов и футер конверсий.

Mockuuups Studio RenderОткрыть
07 / ДИЗАЙН-СИСТЕМА

Дизайн-система & Типографика

Интерфейс построен на строгой сетке 1366px, швейцарских интервалах и шрифтовой иерархии Montserrat + Inter.

Шрифтовая иерархия проекта (Typography Tokens)

Заголовки & АкцентыMontserrat
DOORS REAL ESTATE

Геометрический гротеск без засечек с сильным характером и устойчивыми пропорциями. Используется для слоганов, названий направлений (Urban Realty, Country Homes) и ключевых метрик.

Bold (700)SemiBold (600)Medium (500)
Интерфейс & Наборный текстInter
We help to open doors

Универсальный экранный шрифт с оптимизированной апертурой и высотой строчных знаков. Обеспечивает исключительную читаемость цен, параметров лотов и фильтров на любых экранах.

Regular (400)Medium (500)SemiBold (600)
Ширина холста
1366 px

Базовая десктопная ширина страницы с адаптивным ресайзом до 1920px и мобильным брейкпоинтом на 390px (iPhone).

8-точечный базовый грид
8 pt Grid

Все отступы, высоты инпутов и радиусы скругления кратны 8px (8, 16, 24, 32, 48, 64px) для строгой архитектурной симметрии.

Контрастность WCAG
AAA Rating

Коэффициент контрастности основного текста и кнопок превышает 7.2:1, гарантируя комфортное чтение даже на ярком солнце.