Редизайн алко-маркетплейса с управляемым ценообразованием и гибким сценарием покупки

Запрос клиента

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

Отдельным запросом стало решение задач пользовательского опыта (UX), связанных с ценообразованием и корзиной. На сайте можно купить товар из наличия в ПВЗ — это как магазины под собственным брендом, так и партнерские точки. Также часть ассортимента доступна под заказ со склада с доставкой в выбранный магазин.

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

Текущий дизайн не отвечал этим требованиям и устарел концептуально, поэтому было идти в сторону полного редизайна.

Проектирование

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

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

Одной из ключевых задач стало отображение цены в карточках товаров. Мы рассмотрели несколько вариантов:

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

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

Отдельным испытанием стало проектирование корзины и оформления заказа. Нужно было учесть сценарии, когда в корзине оказываются товары с разными сроками получения и из разных ПВЗ. Мы проработали несколько вариантов составной корзины, но в итоге приняли решение упростить процесс и отказаться от объединения разных ПВЗ и способов получения в одном заказе.

Дизайн-концепция

Когда мы определили, как должен работать сайт, перешли к визуальной части. Мы используем многоступенчатый подход, чтобы на раннем этапе синхронизироваться с клиентом и избежать недопонимания.

Сначала собрали визуальные примеры (референсборды) — 3 доски с подборками сайтов и деталей интерфейсов, объединенных общими визуальными приемами. Вместе с клиентом выбрали один борд, который отразил бы общую стилистику.

Следующий шаг — предварительная концепция («протодизайн»). На основе выбранного стиля мы сделали коллаж: взяли каркас из прототипа главной страницы и наполнили его элементами из референсов. Такой подход помогает заранее увидеть, как стиль будет работать именно на сайте клиента.

После согласования направления перешли к финальному этапу — дизайн-концепции. Сделали современный и лёгкий визуал с крупными карточками товаров и мягкими линиями. Цвета и типографика поддерживают фирменный стиль, при этом интерфейс остаётся простым и понятным.

Главная

При проектировании главной страницы мы ориентировались на привычные сценарии (паттерны) маркетплейсов, чтобы интерфейс был сразу знаком пользователям. Сразу учли особенность ценообразования — цены могут отличаться в зависимости от выбранного ПВЗ.

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

Каталог

Фильтры сделали простыми и читаемыми, разделили категории по типам напитков и странам. Добавили кнопки быстрого выбора объёма прямо в карточках товаров.

Фильтрация всегда открыта: при таком большом ассортименте пользователи активно ей пользуются, поэтому мы не стали скрывать её и добавлять лишние шаги.

Показали два формата карточек — стандартные вертикальные и расширенные горизонтальные для более вдумчивого выбора.

Страница товара

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

Мы структурировали характеристики и визуально разбили их на блоки, чтобы информация легко считывалась. Рядом с кнопкой «В корзину» сразу показали способы получения со сроками.

В модальном окне пользователь может посмотреть цены по каждому ПВЗ, количество товара в наличии и возможность заказа со склада.

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

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

Оформление заказа сделали пошаговым — в три этапа. Такой формат задаёт ожидание по времени и помогает пользователю лучше ориентироваться в процессе.

В начале пользователь выбирает пункт выдачи, ориентируясь на доступность товаров и их стоимость. Если он выбирает магазин, в котором нет части товаров, то мы показываем их и сообщаем, что они останутся ждать в корзине. Если товар можно как забрать из наличия, так и заказать со склада, пользователь сам выбирает подходящий вариант. Иногда решает цена — если подождать, то заказ со склада обойдется дешевле, но если важно срочность, то тогда пригодится выбор оформления товара «Из наличия».

После выбора ПВЗ остаётся ввести контактные данные и проверить заказ. На финальном шаге мы показываем всю информацию: магазин, сроки получения, итоговую стоимость и способы оплаты, чтобы снизить тревожность перед оформлением заказа.

Внутренние страницы и руководство по дизайну

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

Чтобы у команды разработки не возникало «серых зон», мы подготовили:

• все состояния интерфейсов — от пустой корзины до успешного заказа;
• набор элементов интерфейса (UI Kit) со всеми цветами, шрифтами, кнопками и формами;
• подробные комментарии и рекомендации по реализации.

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

Дизайн-контроль

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

Итоги

Редизайн сделал магазин современным и понятным для покупателей. Мы сохранили акцент на ассортименте и гибком выборе магазина для самовывоза, упростили сценарий покупки и заложили основу для дальнейшего масштабирования проекта.

Отзыв клиента