Бетон — бронирование цены покупки квартиры

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

Целевая аудитория: жители крупных городов со средним доходом и выше, которые привыкли к онлайн-сервисам.

User story, по которому проектировался интерфейс: Я, как пользователь, хочу быстро найти и забронировать подходящий объект недвижимости (квартиру или дом) в приложении, чтобы не тратить время на офлайн-поиски и быть уверенным в достоверности информации

Сравнение показало, что выбранные приложения справляются с поиском: фильтры по параметрам и карта есть у всех трёх. Онлайн-бронь есть только у ПИК NEW и только на дома ПИК, а кнопка «Купить» там означает бронь. Поэтому главным действием «Бетона» Я сделал бронирование цены на выбранную квартиру, сделку по которой потом можно оформить в течение 14 дней.

Команда: Делал в индивидуальном порядке. В октябре 2026 года — использовал связку Claude Code с Figma и After Effects для дополнения кейса — аудит макетов и дизайн-системы, создание анимации интерфейса приложения.

1. Цена брони видна до нажатия

На странице квартиры кнопка «Забронировать квартиру» закреплена внизу, а под ней написано: «Стоимость услуги — 10 000 ₽». Шторка брони одной фразой объясняет, что даёт бронь на 14 дней: стоимость фиксируется, и можно начинать оформление сделки.

Путь до брони Я сначала проверил на семи каркасах экранов из кита Material 3, потом нарисовал девять экранов. Из выдачи квартира открывается шторкой с планировкой, так что план и цену видно, не уходя из поиска.

2. Брутализм среди зелени

Мудбордом Я увёл брутализм от холодного монумента к бетонным и кирпичным домам среди зелени. В интерфейсе тёмный фон, светлый текст и один кирпично-красный цвет для действий. Узкий шрифт Fatal Я оставил в UI-ките логотипу и акцентам, остальной текст — на Inter.

3. Квадрат, тёмный фон и цветное окно

После UI-кита Я собрал дизайн-систему «Бетон» для Android-приложения по правилам Material Design 3: 74 цветовые переменные, 14 текстовых стилей и 59 компонентов — от кнопок и полей до шапок, таб-бара, карточек и логотипов метро.

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

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

Карточки: фото выбирается из компонента-галереи на 20 изображений, чёрно-белым его делает настройка насыщенности — отдельный файл не нужен. Фон карточки привязан к её краям, поэтому при любом размере фото и рамка совпадают.

Каждое правило Я записал на странице системы рядом с компонентами. Эталон — экран «Квартира», собранный целиком на системе. В 2026 году Я с Claude Code перевёл на неё все 29 экранов: из системы теперь 93 % цветов, 98 % текстов и 84 % компонентов.

Гипотеза: если цена брони видна прямо под кнопкой, а шторка одной фразой объясняет, что даёт бронь и на какой срок, человек сам дойдёт от поиска до брони, не уходя из приложения.

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

Как буду мерить: до запуска — тест кликабельного прототипа на 5–7 людях, которые недавно искали квартиру. Смотрю, дойдут ли они до «Начать бронирование» без подсказок и смогут ли своими словами сказать, за что платят 10 000 ₽. После запуска — события по каждому шагу воронки в продуктовой аналитике и сделки из CRM застройщика. Первые четыре недели собираю базу и от неё ставлю пороги.

Как буду решать: смотрю, на каком шаге просела воронка.

Цена квартиры и ставка ипотеки могут исказить результат, поэтому правки проверяю A/B-тестом, а не сравнением «до» и «после».

Что получилось: нашёл, где у конкурентов обрывается путь к брони, и сделал бронь цены главным действием «Бетона». Девять экранов ведут от онбординга до шторки брони: цену брони видно до нажатия, условия объяснены одной фразой.

Что добавил в 2026 году: вместе с Claude Code проверил 29 макетов и посадил их на дизайн-систему — 538 замен компонентов, цвета и тексты на токенах и стилях. Онбординг получил анимацию по прежней раскадровке.

Что дальше: на пользователях сценарий не проверялся, поэтому пока это гипотеза. Следующий шаг — тест кликабельного прототипа и замер воронки брони по метрикам выше.