Редизайн магазина фермерских продуктов «Калина-Малина»: оформление заказа в пять шагов

Магазин, где можно заказать то, чего ещё нет на полке

«Калина-Малина» – сибирская сеть магазинов фермерских продуктов: мясо и птица, сыры, рыба и морепродукты, шашлыки, овощи. У товаров свои поставщики и свои дни поставок, поэтому в конкретный день часть ассортимента может отсутствовать. Интернет-магазин позволяет заказать и такие позиции, а получить их тогда, когда они приедут.

В 2021 году мы взялись за редизайн интернет-магазина. Заказчик поставил четыре цели:

1. Увеличить средний чек при оформлении заказа.
2. Сделать покупку продуктов удобной с любого устройства.
3. Сократить путь до оформления покупки.
4. Упростить поиск товаров и дать возможность заказывать прямо из формы поиска.

В работу вошли пользовательские сценарии, UX и UI, иконки и иллюстрации, десктопная и мобильная версии. Ниже по экранам: какое решение на какую цель работает.

Сначала сценарии, потом экраны

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

Больше всего веток получилось у корзины и оформления: изменить количество, удалить товар, очистить корзину, выбрать способ получения, а при самовывозе ещё и магазин. Причина та самая особенность: товар можно заказать, даже если его сейчас нет в наличии, и это меняет весь путь до оплаты.

Главная, которая подстраивается под покупателя

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

Ниже главная собирается из специальных подборок: «Популярные товары», «Вы покупали ранее», «Специальные предложения», «Выбор вегана», набор для первого заказа. Постоянный покупатель сразу видит то, что брал раньше, и кладёт это в корзину, не заходя в каталог. Это цели № 1 и № 3.

Чтобы лента карточек не выглядела однообразно, мы разбили её баннерами с графикой: приглашение в бонусную программу «Приводи друзей и получай баллы в подарок» и блок рецептов.

Каталог: теги, фильтры и мини-карточка

От удобства каталога зависят число заказов и размер корзины, поэтому эту страницу мы делали предельно простой. Над списком теги по видам товара: свинина, курица, колбаски и сыр для жарки, овощи и другие. Слева фильтры: доставка по миру, новинки, скидки, поставщик. Отдельный выбор «Ассортимент на» показывает, что можно получить в конкретный день: сегодня, завтра или позже.

В мини-карточке всё для решения о покупке: рейтинг, поставщик, цена за вес. Если товара нет в наличии, карточка сообщает об этом и подсказывает дни поставок. После нажатия «В корзину» кнопка превращается в счётчик веса с итоговой ценой, и количество меняется прямо в списке.

Карточка товара с подсказками к заказу

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

Под карточкой подборки «С этим товаром смотрят» и «Вы недавно смотрели». Они подсказывают, что ещё взять к заказу, и снова работают на средний чек.

Корзина без отдельной страницы

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

Когда товар добавлен, появляется уведомление с полосой прогресса до бесплатной доставки от 3 000 ₽. Человек видит, сколько осталось добрать, и это ещё один ход на рост среднего чека.

Оформление в пять шагов

Оформление заказа разбито на шаги:

1. способ получения: доставка или самовывоз;
2. контакты;
3. замены;
4. время получения;
5. оплата.

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

Живой поиск с кнопкой «В корзину»

Результаты появляются с первого введённого символа и разложены по вкладкам: товары, рецепты, новости, статьи, поставщики. Товар можно положить в корзину прямо из выпадающего окна, не открывая карточку и не уходя со страницы. Это цель № 4.

Личный кабинет и бонусы

В личном кабинете покупатель следит за заказами (все, активные, завершённые), видит начисленные бонусные баллы и читает свои опубликованные отзывы. Бонусы считаются процентом от суммы заказа. В программе рекомендаций у каждого свой код: поделился с другом, и баллы получают оба.

Шрифты, цвета, иконки и иллюстрации

Шрифтовая пара: Roboto Slab в начертании Medium для заголовков и Roboto в начертаниях Regular и Medium. Палитру разложили по назначению: цвета для кнопок, для элементов интерфейса, для текста и для фона. Иконки нарисовали отдельным набором, чтобы каждая легко читалась и на большом экране, и в телефоне. Единый набор графики держит все экраны в одном стандарте.

Рисованные иллюстрации продуктов появляются в плитках категорий, в баннерах и даже на странице 404, которая тоже ведёт в каталог.

Что получилось

Мы сделали дизайн ключевых экранов в двух версиях: десктопной на 1920 px и адаптивной до 320 px, чтобы продукты было удобно заказывать и за компьютером, и с телефона в дороге. За каждым решением стоит одна из четырёх целей: персональные подборки, покупка из поиска и счётчик веса в мини-карточке сокращают путь до заказа, а порог бесплатной доставки в корзине и подборки в карточке работают на средний чек.

Если ваш интернет-магазин тоже пора обновить, посмотрите редизайн сайта и UI/UX-проектирование: начнём со сценариев покупателя и только потом перейдём к экранам.