📌 О проекте

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

Результат:

  • 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. Призыв к действию после отмены — экран «Заказ отменён» с кнопкой «Заказать товары и услуги», не оставляем пользователя в тупике

https://dryclean.ru

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