О проекте

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

Результат:

• 7 категорий товаров с уникальной цветовой кодировкой
• 30+ экранов и состояний
• 60+ компонентов дизайн-системы
• Готовый к передаче в разработку дизайн-кит

Экраны входа и выбора города

Что сделано:

• Экран приветствия с тремя сценариями входа (авторизация, регистрация, гость)
• Стимул к регистрации (промокод за регистрацию)
• Ссылка на политику обработки данных
• Экран выбора города с иллюстрацией и списком (9 городов)
• Визуальное подтверждение выбранного города (цвет + галочка + логотип)
• Активация кнопки только после выбора города

 UX-решения:

1. Визуальная иерархия кнопок — Primary для основных действий, Secondary для альтернативы
2. Кнопка неактивна пока не выбран город — предотвращаем ошибку, направляем к действию
3. Скролл вместо модального окна — все варианты видны сразу, не нужно открывать дополнительные окна
4. Юридическая прозрачность — ссылка на политику данных перед регистрацией снижает тревожность
5. Двойная индикация выбора — цвет фона + галочка = пользователь уверен в своём выборе

Главная, Уведомления, Карта пунктов приёма

Что сделано:

• Главная страница с тремя основными направлениями (Химчистка, Клининг, Магазин)
• Крупные иллюстрированные карточки услуг с брендированием
• Блок «Акции» с промо-баннерами и горизонтальным скроллом
• Экран уведомлений с разделением на статусы заказов и маркетинговые рассылки
• Карта пунктов приёма с интерактивными маркерами и поиском
• Нижняя навигационная панель (5 иконок)

---

 UX-решения:

1. Карточки услуг занимают 60% экрана — основное действие доступно в один тап, не нужно скроллить
2. Уведомления сгруппированы по типу — статусы заказов отдельно, акции отдельно (быстрое сканирование)
3. Прочитанные уведомления приглушены — визуальное различие (серый текст) помогает ориентироваться в списке
4. Поиск на карте поверх карты — не занимает лишнее место, всегда доступен при скролле
5. Крупные маркеры с цифрами — легко тапать пальцем, видно количество пунктов в зоне

Профиль пользователя

Что сделано:

• Меню профиля с навигацией по разделам (Профиль, Заказы, Уведомления, Адреса, Программа лояльности)
• Секция настроек с выбором города
• Экран редактирования профиля с полями: имя, телефон, дополнительный телефон, email, дата рождения, пол
• Чекбоксы согласий (получение чеков на email, рассылки, обработка данных)
• Валидация обязательных полей (имя и фамилия с маркером *)
• Кнопка «Другие действия» для дополнительных опций

---

 UX-решения:

1. Разделение на логические блоки — навигация, профиль, настройки сгруппированы, не перегружают восприятие
2. Обязательные поля помечены звёздочкой — пользователь сразу видит что нужно заполнить
3. Заполненные поля выделены серым фоном — визуальное различие между пустыми и заполненными полями
4. Чекбоксы согласий в конце формы — юридические моменты после основных данных, не отвлекают от заполнения
5. Chevron (стрелка) в каждом поле — понятно что все поля редактируемые и открываются для изменения

Форма обратной связи

Что сделано:

• Выпадающий список с категориями обращений (Благодарность, Претензия, Обращение, Запрос для фабрики, Партнерство, Вакансии, Прочее, Перезвоните мне)
• Форма с полями: сообщение, телефон, имя и фамилия, email, номер квитанции
• Валидация обязательных полей с визуальной обратной связью (красные границы, сообщения об ошибках)
• Прикрепление файлов с отображением загруженного документа
• Чекбокс согласия с правилами обработки данных
• Кнопка отправки формы

---

 UX-решения:

1. Inline-валидация полей — ошибки показываются сразу при заполнении (красный цвет, текст «Обязательное поле»), пользователь не отправит неполную форму
2. Галочка валидации в поле — заполненное и корректное поле помечается галочкой (бирюзовый круг), пользователь видит что всё верно
3. Кнопка очистки в поле (X) — быстрая очистка заполненного поля без выделения и удаления вручную
4. Прикреплённый файл с превью — отображается имя файла (image.png) с галочкой загрузки и кнопкой удаления, понятно что файл прикреплён
5. Разделение на этапы — сначала выбор категории, потом заполнение формы, не перегружаем пользователя всеми полями сразу

Каталог услуг и калькулятор

Что сделано:

• Экран категории услуг (Верхняя одежда) с поиском и карточками товаров
• Кнопка быстрой консультации с оператором
• Калькулятор площади ковра с визуальной схемой (a × b)
• Автоматический расчёт стоимости при вводе размеров
• Список дополнительных услуг с иконками и ценами
• Выбор сопутствующих услуг (хранение и др.)
• Кнопка добавления в заказ

---

 UX-решения:

1. Визуальная схема расчёта — диаграмма с обозначениями a и b помогает пользователю понять как измерить, не нужно перечитывать инструкцию
2. Автоматический пересчёт цены — при вводе значений площадь и цена обновляются мгновенно, пользователь видит итог сразу
3. Валидация заполненных полей — галочка появляется когда поля заполнены корректно, понятно что можно двигаться дальше
4. Дополнительные услуги с иконками — визуальное различие услуг (озонирование, оверлок, подклейка) ускоряет выбор
5. Разделение на основные и сопутствующие услуги — логическая группировка помогает не запутаться в опциях

Оплата, Адреса, Обновление приложения

Что сделано:

• Экран оплаты с выбором способа (СБП, Банковская карта)
• Список сохранённых адресов с подробной информацией (адрес, подъезд, этаж, комментарий)
• Теги для контактов (имя получателя, домофон)
• Баннер с промо-акцией в списке адресов
• Экран обновления приложения с иллюстрацией и описанием преимуществ
• Кнопки «Обновить» (Primary) и «Не сейчас» (Secondary)

---

 UX-решения:

1. Минимум полей на оплате — только выбор способа и кнопка, ничего лишнего что могло бы отвлечь от завершения заказа
2. Подробная информация в адресе — подъезд, этаж, комментарий видны сразу, курьер не будет звонить уточнять
3. Теги для контактов — имя получателя и информация о домофоне выделены отдельными блоками, легко найти взглядом
4. Промо-баннер в списке адресов — ненавязчивое напоминание о скидке не прерывает выбор адреса
5. Две кнопки на обновлении — пользователь может обновить сейчас или отложить, нет принуждения которое вызывает раздражение

Клининг — заказ уборки

Что сделано:

• Экран выбора типа уборки (Генеральная, Регулярная, После ремонта, При наличии домашних питомцев)
• Калькулятор стоимости с прогрессивной шкалой цен (от 0 до 50м², от 51 до 110м², и т.д.)
• Выбор периодичности (разовая уборка / абонемент)
• Настройка частоты уборок в месяц и срока абонемента
• Ввод метража помещения с кнопками +/-
• Экран подтверждения с итоговой стоимостью и контактами
• Чекбокс согласия с правилами оказания услуг

---

 UX-решения:

1. Прогрессивная шкала цен — чем больше площадь, тем дешевле за м², мотивирует заказывать большие объёмы
2. Абонемент с выгодой — чекбокс с иконкой % визуально показывает что это выгоднее разовой уборки
3. Пошаговый ввод данных — сначала тип уборки, потом расчёт, потом подтверждение, не перегружаем форму
4. Итоговая стоимость звёздочкой — сноска объясняет что цена предварительная, менеджер уточнит детали, снижает риск недопонимания
5. Предзаказ вместо полной оплаты — кнопка «Оформить предзаказ» снимает барьер, окончательная сумма после уточнения деталей

Магазин — витрина, каталог, карточка товара

Что сделано:

• Главная страница магазина с 7 категориями товаров (Товары для стирки, Проф. средства, Товары для дома, Товары для хранения, Уход за вещами, Уход за обувью, Сувениры)
• Цветовая кодировка категорий для быстрого распознавания
• Каталог товаров с поиском, сеткой 2 колонки, бейджами «Новинка» и «Хит»
• Карточка товара с крупным изображением, ценой, описанием, характеристиками
• Блок доставки с порогом бесплатной доставки
• Табы «Описание» / «Характеристики»
• Кнопка «В корзину» с индикатором количества в навигации

---

 UX-решения:

1. Цветовая кодировка категорий — каждая категория имеет свой цвет из палитры, пользователь быстрее находит нужный раздел по визуальной памяти
2. Бейджи на карточках товаров — «Новинка» (Primary) и «Хит» (Accent) привлекают внимание к маржинальным и популярным товарам
3. Прогресс до бесплатной доставки — показываем сумму заказа для бесплатной доставки, мотивируем докупить товары
4. Табы для контента товара — описание и характеристики разделены, не перегружаем экран длинным текстом сразу
5. Счётчик в навигации — бейдж с количеством товаров в корзине всегда виден, пользователь знает что добавил не переходя в корзину

Корзина — обзор, детали, скидки

Что сделано:

• Сводный экран корзины с тремя разделами (Химчистка, Клининг, Магазин)
• Детализация заказа по категориям услуг с индивидуальными позициями
• Удаление отдельных услуг и товаров (иконка корзины)
• Поля для промокода и карты лояльности
• Автоматический расчёт скидки (5% по карте лояльности)
• Прозрачная разбивка стоимости (химчистка, скидка, товары, выезд, итого)
• Предупреждение о минимальной сумме для бесплатного выезда курьера

---

 UX-решения:

1. Разделение по типам услуг — химчистка, клининг и магазин визуально разделены (разные фоны), пользователь понимает структуру заказа
2. Удаление на уровне позиций — можно удалить отдельную услугу (удаление шерсти, хранение) без удаления всего заказа, гибкое редактирование
3. Промокод и лояльность в одном месте — оба поля рядом, пользователь видит все способы экономии перед оплатой
4. Прозрачная разбивка скидки — показано что скидка 5% применяется только к химчистке, нет скрытых условий
5. Предупреждение о минимальной сумме — если заказ ниже 1490 ₽, добавится 350 ₽ за выезд, пользователь знает о доплате до оформления

Оформление заказа

Что сделано:

• Форма оформления с выбором адреса забора (отображение полного адреса с контактами)
• Toggle «Заказ получит другой человек» с раскрытием формы (телефон, имя)
• Выбор способа оплаты (наличные водителю, карта водителю, онлайн-оплата)
• Выбор способа получения (Курьером / Самовывоз)
• Toggle «Привезти с выездом водителя» для комбинированных заказов
• Итоговая сумма с разбивкой (химчистка, скидка, товары, выезд, итого)
• Предупреждение о минимальной сумме для бесплатного выезда

---

 UX-решения:

1. Адрес с контактными тегами — имя и информация о домофоне выделены отдельными блоками под адресом, курьер видит всё сразу
2. Toggle для другого получателя — по умолчанию форма скрыта, не перегружает интерфейс, раскрывается только при необходимости
3. Кнопка очистки в полях (X) — быстрая очистка телефона и имени без выделения текста, ускоряет редактирование
4. Пояснительный текст под опциями — звёздочка с текстом объясняет сложные условия (например, согласование времени с оператором)
5. Итоговая сумма всегда видна — разбивка стоимости перед кнопкой оформления, пользователь знает что платит до финального действия

Заказы — список, детали, управление

Что сделано:

• Список заказов с фильтрами (Выполняются / Завершены)
• Карточки заказов со статусом, датой, адресом, сроком хранения
• Детали заказа с составом, оплатой, доставкой, получателем
• Модальное окно переноса даты/времени получения
• Модальное окно отмены заказа с инструкцией
• Экран отменённого заказа с призывом к действию
• Карта с маршрутом до пункта приёма

---

 UX-решения:

1. Цветовая кодировка статусов — каждый статус имеет свой цвет и иконку (Можно забирать — бирюзовый, В сборке — синий, Ожидается доставка — оранжевый), пользователь быстро распознаёт состояние
2. Срок хранения выделен — дата «До 17.12.2025 включительно» показывает дедлайн, мотивирует забрать заказ вовремя
3. Модальные окна вместо новых экранов — перенос и отмена заказа в модальных окнах, пользователь не теряет контекст списка заказов
4. Инструкция при отмене — текст объясняет что нужно сделать для возврата денег (прийти в пункт, написать заявление), снижает количество звонков в поддержку
5. Призыв к действию после отмены — экран «Заказ отменён» с кнопкой «Заказать товары и услуги», не оставляем пользователя в тупике

---

Компоненты

Набор иконок

Что это: Базовый набор UI-иконок (закрыть, поиск, добавить, корзина, календарь, удалить, навигация, подтверждение).

Для чего: Унификация визуального языка интерфейса, быстрая навигация и действия пользователя в приложении.

Где используется: Во всех экранах приложения — поиск, кнопки действий, формы, списки, подтверждение операций.

Иконки статуса заказа

Что это: Набор цветных иконок для визуализации статусов заказа (отменён, подтверждён, в обработке, готов, оплачен).

Для чего: Быстрое распознавание состояния заказа пользователем без чтения текста, визуальная навигация по этапам выполнения.

Где используется: В списке заказов, деталях заказа, уведомлениях, трекинге выполнения (таймлайн статусов).

Иконки сервиса

Что это: Набор тематических иконок услуг химчистки (озонирование, ремонт, эко-чистка, хранение, уход за обувью, клининг и др.).

Для чего: Визуальное представление услуг и опций в каталоге, калькуляторе и составе заказа для быстрого распознавания.

Где используется: В карточках услуг, дополнительных опциях, составе заказа, категориях товаров и услуг.

Статус заказа

Что это: Компонент отображения статуса заказа с цветовым кодированием, иконкой и текстовым описанием (Отменён, Исполнен, Можно забирать, В работе и др.).

Для чего: Визуальная коммуникация текущего состояния заказа пользователю, быстрое распознавание этапа выполнения по цвету и иконке.

Где используется: В списке заказов, деталях заказа, трекинге выполнения, уведомлениях о статусе заказа.

Статус заказа составной

Что это: Расширенный компонент статуса заказа с детальной информацией (адрес, дата доставки, график работы, карта маршрута) и кнопками действий.

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

Где используется: В деталях заказа, трекинге выполнения, уведомлениях о готовности заказа к выдаче или доставке.

Карточка заказа

Что это: Компонент карточки заказа с номером, датой, статусом, адресом, сроком хранения и кнопками действий (Отменить, Перенести).

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

Где используется: В разделе «Заказы» (список активных и завершённых заказов), истории заказов, главном экране с быстрым доступом к текущим заказам.

Карточка химчистки

Что это: Компонент карточки услуги химчистки с названием услуги, площадью/количеством, ценой, иконкой и кнопкой удаления.

Для чего: Отображение отдельных услуг в составе заказа (основная услуга + дополнительные опции) с возможностью редактирования и удаления позиций.

Где используется: В корзине, деталях заказа, составе заказа химчистки, калькуляторе услуг.

Карточка товара мини

Что это: Компактный компонент карточки товара с миниатюрой изображения, названием, количеством и ценой.

Для чего: Отображение товаров в составе заказа или корзине в сжатом формате для экономии места и быстрого сканирования списка.

Где используется: В корзине, деталях заказа, составе заказа магазина, рекомендациях «С этим покупают».

Карточка товара корзина

Что это: Компонент карточки товара для корзины с изображением, ценой, названием, артикулом и счетчиком количества.

Для чего: Управление товарами в заказе (изменение количества, удаление) и отображение ключевой информации о позиции.

Где используется: В экране корзины, оформлении заказа, составе заказа магазина.

Карточка товара

Что это: Компонент карточки товара с изображением, ценой, названием, артикулом, бейджами (Новинка, Хит) и кнопкой действия.

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

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

Карточка товара детальная

Что это: Компонент с крупным изображением, ценой, названием, артикулом и блоком информации о доставке.

Для чего: Презентация товара и мотивация к покупке через прозрачные условия доставки (стоимость, порог бесплатной доставки).

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

https://dryclean.ru

Скачать приложение