Сайт клиента
- Главный экран и предложение
- Услуга → детали → время → адрес → проверка
- Подтверждение создания
АВТОРСКИЙ КОНЦЕПТ / UI/UX + FRONTEND / 2026
ЧистоСервис заказа уборки
Рассчитать уборку, выбрать время и оформить заявку. Для клиента — понятный путь и статус заказа. Для менеджера — единый список обращений.
Открыть интерактивное демо ↗
01 / ПРОДУКТ И ЗАДАЧА
Уборка начинается
с понятного заказа.
Клиент хочет узнать стоимость и выбрать время. В сценарии, построенном только на переписке, параметры приходится уточнять по очереди. Концепт собирает их до обращения.
Менеджеру нужно видеть состав уборки и состояние заявки. Поэтому клиентская форма и рабочий кабинет используют одну запись, а не два разрозненных набора данных.
Это проект для демонстрации навыков. Интервью, реальный заказчик, внедрение и рост конверсии не заявляются. Тарифы и доступность смоделированы.
02 / СЦЕНАРИЙ И UX-ЗАДАЧА
Детали уточняются.
Контекст остаётся.
Сценарий: Анна выбирает генеральную уборку квартиры 60 м², добавляет духовку, выбирает дату и указывает вымышленный адрес. Перед оформлением проверяет стоимость и все параметры.
Главная задача — разделить выбор на короткие шаги и не потерять уже введённые данные. Расчёт остаётся рядом; возврат и обновление страницы сохраняют черновик.
- 01Услуга
- 02Параметры
- 03Дата и время
- 04Адрес
- 05Проверка
- 06Подтверждение
- 07Статус
03 / СТРУКТУРА ПРОДУКТА
Две роли.
Одна заявка.
Мои заявки
- Параметры и текущий статус
- Отмена с подтверждением
- Повтор с новой датой
Кабинет менеджера
- Заявки, поиск и фильтр
- Новая → подтверждена → выполнена
- Активная сумма без отменённых
Роли переключаются без входа: это демонстрация интерфейсов в одном браузере, не система авторизации.
04 / ОСНОВНОЙ ИНТЕРФЕЙС
Расчёт виден
до оформления.
Площадь и дополнительные услуги меняют сумму сразу. Базовая стоимость показана отдельно, чтобы было видно, из чего складывается результат.
05 / РЕШЕНИЯ
Что стоит
за каждым шагом.
Цена без переписки
Проблема: непонятно, как дополнения меняют итог. Решение: отдельные строки расчёта и обновление при выборе. Эффект в интерфейсе: изменение видно до отправки.
Вернуться без повторного ввода
Проблема: уточнение даты прерывает оформление. Решение: пошаговый черновик с локальным сохранением. Эффект: параметры остаются при возврате и перезагрузке.
Недоступность до подтверждения
Проблема: выбранное время может быть занято. Решение: недоступные интервалы отключены, дата ограничена ближайшими 30 днями. Эффект: ошибка объясняется до создания заявки.
Сначала проверка, затем результат
Проблема: легко ошибиться в параметрах. Решение: сводка заказа и возврат к редактированию. Эффект: пользователь проверяет детали и после оформления видит подтверждение.
История вместо тупика
Проблема: после заказа непонятно, что дальше. Решение: статус, отмена и повтор. Эффект: у новой, подтверждённой и отменённой заявки есть понятное продолжение.
06 / ПОПРОБУЙТЕ ПРОДУКТ
Не только посмотреть.
Пройти весь путь.
Выберите генеральную уборку, 60 м² и духовку. Оформите заявку с вымышленными данными, подтвердите её в кабинете и откройте «Мои заявки».
Живой расчётОшибка → исправлениеОбщий статус в двух ролях
Открыть интерактивное демо ↗Без регистрации, реальных платежей и отправки данных на сервер.07 / RESPONSIVE
На телефоне —
тот же продукт.
На широком экране шаг и расчёт стоят рядом. На телефоне — последовательно: сначала действие, затем сводка. Карточки заявок и кнопки перестраиваются без отдельной мобильной версии.
- Поля не меньше 16 px, явные подписи и видимый фокус.
- Статус обозначен текстом и этапом, а не только цветом.
- Анимации отключаются при reduced motion.
08 / КОМПОНЕНТЫ И СОСТОЯНИЯ
Одна система
для всего сценария.
Inter / типографикаЧисто.
Выбор → действие → результат
ОсновнойВыборПоверхность
КнопкаОбычная → фокус → нажатие → загрузка → результат
ПолеПодпись → ввод → ошибка рядом с полем → исправление
ВремяДоступно → выбрано / недоступно
ЗаявкаНовая → подтверждена → выполнена / отменена
09 / ДО И ПОСЛЕ
Развитие реального
предыдущего демо.
Было: один калькулятор, имя и дата. После создания клиент сразу попадал в кабинет менеджера. Прежняя версия сохранена в резервной копии.
Стало: пять шагов оформления, время и адрес, проверка, подтверждение, клиентская история, повтор и отмена. Обновление страницы сохраняет черновик.
Выбранное превью и визуальная основа сохранены. Новые экраны выше сняты с работающего прототипа.
10 / РЕЗУЛЬТАТ И ГРАНИЦЫ
Цельный frontend.
Честный масштаб.
Получился прототип, в котором можно проверить весь путь заказа и работу менеджера. Расчёт и проверки даты вынесены в отдельный модуль; интерфейс использует общий объект заявки.
Данные хранятся локально, между устройствами не синхронизируются. Авторизации, CRM, оплаты и реального расписания нет. Для запуска потребуются серверные проверки, защита данных и проверка сценариев с пользователями.
ДЛЯ ВАШЕГО БИЗНЕСА
От предложения
до рабочего интерфейса.
Спроектирую путь клиента, формы и кабинет под вашу задачу. Этот кейс показывает, как соединяю структуру, визуальный дизайн и поведение продукта.
Обсудить проект со Стасом ↗