Meridian
Самостоятельный концепт: как выглядит магазин, где честная цена — принцип дизайна, а не формальность.
Концепт — собственный проект студии
- Тип проекта
- Собственный концепт
- Гипотеза
- Ранняя честная цена снижает брошенные корзины
- Измерялось бы
- Конверсия корзина→заказ, отвал по шагам, возвраты
- Статус
- Концепт — в продакшене не использовался
Задача
Брошенные корзины обычно списывают на оформление заказа. Но урон наносится раньше: показывают цену, потом добавляют доставку, потом налог — и сумма, на которую покупатель согласился, оказывается выдумкой.
Мы хотели понять, что должно измениться, если настоящая цена с доставкой показывается уже в каталоге, — и может ли магазин оставаться визуально спокойным, когда на каждой карточке заметно больше информации.
Решение
Карточки перестроены вокруг итоговой цены, а не базовой: доставка считается по локации, которую спрашивают один раз и запоминают. Число на карточке — то же, что в чеке.
Состояние фильтров хранится в адресе страницы — отфильтрованный каталог можно переслать, кнопка «назад» работает. «Нет результатов» и «нет данных» — разные состояния с разными выходами.
Оформление — для гостя и в одну колонку, раскладка цены видна всегда. За покупателя заранее не выбрано ничего.
Каталог
Фильтры, счётчик результатов и итоговые цены в одном взгляде.
Цена как задача вёрстки
Если показывать итог сразу, каждая карточка несёт цену, срок доставки и пояснение, что входит в число. Это втрое больше информации на том же месте — и требует настоящей иерархии: одна главная цифра, две тихие строки и ничего, что спорило бы с фото товара.
В концепте на карточку приходится одна сильная горизонтальная линия вместо связки рамок и теней. Один сигнал глубины, не два.
Интерфейсные решения
- 01Состояние фильтров в адресе страницы — можно переслать, «назад» работает
- 02«Нет результатов» и «нет данных» — разные состояния
- 03Корзина обновляется мгновенно, при сбое виден откат
- 04Оформление для гостя по умолчанию, аккаунт предлагается после покупки
- 05Раскладка цены видна всегда — без сюрпризов на последнем шаге
- 06Весь путь проходится с клавиатуры и проверен на 360px
Оформление
Одна колонка, гость по умолчанию. Раскладка не сворачивается.
Технологии
- Next.js
- TypeScript
- Tailwind CSS
- Edge caching
- Payment APIs
Направления
Следующий проект
OrbitTelegram Mini App