Дизайн интернет-магазина для приложения химчистки «Диана»

О проекте

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

Результат:

- 7 категорий товаров с уникальной цветовой кодировкой

- 30+ экранов и состояний

- 60+ компонентов дизайн-системы

- Готовый к передаче в разработку дизайн-кит

Компоненты

Что было сделано: 

• 60+ переиспользуемых компонентов, закрывающих все ключевые флоу продукта: навигация, формы, карточки, модалки, кнопки, инпуты, состояния фидбэка. 

• Атомарная структура: Атомы (иконки, лейблы, аватары) → Молекулы (строка поиска, чип фильтра) → Организмы (карточка товара, сводка заказа). 

• Интерактивные состояния для каждого компонента: Default, Hover, Pressed, Disabled, Loading, Error, Success. 

• Дизайн-токены: цветовая палитра (primary, secondary, semantic), типографическая шкала, система отступов (сетка 4px), скругления, тени. 

• Accessibility-ready: контрастность ≥ 4.5:1, тап-таргеты ≥ 44×44 px, чёткие состояния фокуса. 

• Документация: гайдлайны по использованию компонентов, блок «можно/нельзя» (do’s/don’ts), готовые сниппеты кода для передачи в разработку (handoff).

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

Что сделано:

- Экран приветствия с тремя сценариями входа (авторизация, регистрация, гость)

- Стимул к регистрации (промокод за регистрацию)

- Ссылка на политику обработки данных

- Экран выбора города с иллюстрацией и списком (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

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