Егор Арлачев

Предметный свет / учебный интернет-магазин

FORMA — от выбора света до проверки заказа

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

UX/UI · HTML · CSS · JavaScript · Корзина · Адаптивность

Каталог FORMA: три светильника, цены и кнопки добавления в корзину
ЗадачаЗавершить путь покупки
ФорматБренд и интернет-магазин
Моя работаUX-аудит, дизайн, разработка
СтатусУчебный концепт, демо-заказ

Отправная точка

Красивой коллекции было недостаточно

У FORMA уже были предметные изображения и подбор по световым сценариям. Но в карточке не хватало цены, корзина теряла выбор после обновления, а оформление завершалось коротким уведомлением.

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

Попробовать подбор

Покупательский путь

От предмета к готовому составу заказа

Карточка светильника с ценой, характеристиками и добавлением в корзину
КарточкаЦена и основные характеристики видны рядом с предметом. Есть понятное действие — добавить в корзину.
Корзина FORMA с количеством, удалением и общей стоимостью
КорзинаПовторные добавления объединяются. Количество, удаление и сумма связаны; выбор сохраняется при обновлении страницы.

Все экраны в кейсе сняты с работающей версии. Нажмите на изображение, чтобы рассмотреть его в полном размере.

Оформление

Стоимость получения известна до подтверждения

В демо есть курьер и самовывоз. Выбор пересчитывает итог и меняет нужные поля: при самовывозе адрес не требуется. Незаполненные поля и некорректная почта не пропускают на следующий шаг.

На проверке видны модели, количество, получение и итоговая сумма. Можно вернуться к данным или корзине и продолжить без потери введённого.

Форма получения демо-заказа с выбором курьера или самовывоза
Получение и данныеМожно заполнить форму готовым вымышленным примером.
Проверка заказа: два светильника Точка и курьерская доставка, итог 39 300 рублей
Проверка заказаОтдельно показаны товары и стоимость получения; рядом — изменение данных.

На мобильной ширине

Тот же сценарий до последнего шага

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

Подтверждение явно помечено как демо. В браузере остаются только артикулы и количества корзины; контактные данные заказа не сохраняются и никуда не отправляются.

Пройти демо-заказ
Проверка состава и итоговой суммы на мобильной ширине
Проверка перед подтверждением
Демо-заказ готов: светильник Диск, бесплатный самовывоз и итог 27 500 рублей
Явное завершение демо-сценария

Результат

Магазин можно проверить действием

По сохранённому отчёту доработки прошли 79 проверок: расчёты, восстановление корзины, ошибки формы, возврат между шагами, клавиатура и размеры от 320 до 1440 px. Это проверка в браузере с эмуляцией размеров; физический телефон в тот прогон не входил.

FORMA — учебный бренд. Каталог, характеристики, цены и получение демонстрационные. Реальной оплаты, отправки заказа, производства и доставки проект не подразумевает.

Открыть магазин

Нужен продуманный путь покупки?

Обсудить проект