Клиент — владелец сервиса мониторинга объявлений с сайтов недвижимости (Авито, ЦИАН, Домклик). Команда операторов работала через устаревший табличный интерфейс, неадаптированный для мобильных устройств. 90% операторов заходят в систему со смартфона, что делало работу крайне неудобной: мелкие элементы, отсутствие быстрых действий, невозможность оперативно реагировать на новые объявления.
Клиент поставил три ключевые задачи:
1. Создать полноценный mobile-first кабинет администратора и оператора — с упором на вертикальную ориентацию телефона как основной рабочий режим.
2. Визуально отразить многопользовательский характер системы: онлайн-статусы операторов, распределение объявлений по сотрудникам, активность в реальном времени.
3. Разработать современный продуктовый дизайн уровня B2B SaaS-платформ — не «корпоративная скука», а живой интерфейс, которым операторы хотят пользоваться.
Дополнительное требование: фирменный стиль в духе тёмных tech-продуктов с оранжевым акцентом — насыщенно, но не аляписто.
Спроектировал и реализовал одностраничное PWA-приложение (Progressive Web App) на чистом HTML/CSS/JS без внешних фреймворков — для максимальной скорости загрузки и работы на любом Android/iOS устройстве.
Ключевые UX-решения для мобильного оператора:
— Bottom Navigation Bar с индикаторами активности и бейджами новых объявлений. Все разделы доступны одним большим пальцем без перехватов хвата.
— Bottom Sheets (шторки) вместо отдельных страниц. Детали объявления, карточка оператора, фильтры, добавление нового сотрудника — всё открывается снизу вверх, закрывается свайпом вниз. Нативный mobile-паттерн, привычный по iOS и Android-приложениям.
— Боковой Drawer с полным меню администратора: навигация, управление базой, экспорт данных, профиль. Открывается по гамбургеру или свайпом от края экрана.
— Toast-уведомления для мгновенной обратной связи на каждое действие без блокировки интерфейса.
— Confirm-попапы для деструктивных действий (удаление базы, блокировка оператора) — защита от случайных нажатий на телефоне.
— Система цветовой индикации карточек: зелёная полоса = ключевые слова найдены, красная = стоп-слова, нейтральная = обычное объявление. Оператор сканирует список взглядом за секунду.
Административная часть включает: дашборд с KPI и лентой событий в реальном времени, управление операторами (онлайн/занят/офлайн статусы, личная статистика, блокировка), управление ключевыми и стоп-словами с тегами, системный мониторинг CPU/RAM, экспорт данных в CSV и JSON.
Визуальная система: тёмная тема #050505, оранжевый акцент #f0821d, glassmorphism-карточки с backdrop-filter, анимированный canvas-фон с частицами, шрифтовая пара Unbounded + Onest, neon-тени на интерактивных элементах.
Получил полноценный мобильный кабинет администратора и оператора системы мониторинга объявлений недвижимости.
Интерфейс охватывает весь рабочий цикл оператора: просмотр новых объявлений → фильтрация по ключевым/стоп-словам → открытие детальной карточки → переход на источник. Цикл занимает 3–4 нажатия с любого экрана приложения.
Административный дашборд даёт руководителю полную картину: сколько объявлений обработано, кто из операторов онлайн, сколько стоп-слов сработало за день, какие объявления набрали максимум просмотров.
Мультиоператорная архитектура позволяет масштабировать команду: у каждого оператора свой счётчик объявлений, история активности, возможность блокировки без остановки системы.
Технически: адаптивная вёрстка работает одинаково на iPhone SE и планшете, без горизонтального скролла и мелких элементов. Touch-зоны всех кнопок — минимум 44×44px по стандарту Apple HIG. Анимации через CSS cubic-bezier без JavaScript-тормозов.
Проект реализован как переиспользуемый UI-кит: цветовые переменные, компоненты шторок, попапов и карточек вынесены в единую систему — легко адаптируется под любую нишу агрегации данных (авто, работа, товары).
