UX и UI раздела «Рецепты» в онлайн-супермаркете «Перекрёсток»

Перекрёсток — это торговая сеть компании «X5 Retail Group», ведущий супермаркет высококачественной свежей продукции в России. Это более 900 магазинов, тысячи товаров и превосходный клиентский сервис.

Cеть продолжает молниеносное развитие в нише онлайн-ритейла, предложив клиентам не только доставку, но и гастрономические идеи.

Задача

Спроектировать раздел с более чем 20 000 рецептов
Упростить поиск нужного рецепта по разным параметрам
Разработать пользовательский интерфейс раздела в соответствии с требованиями к UI основного сайта сети

Результат

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

Десктопная версия

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

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

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

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

Для каждого рецепта есть отзывы и возможность моментально заказать все ингредиенты в онлайн-супермаркете.

Мобильная адаптация

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

Прототипы и макеты

Заказчик получил прототипы и макеты для десктопных разрешений 1440 px, 1000 px и мобильной версии — 320 px.

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