UX и UI раздела «Рецепты» в онлайн-супермаркете «Перекрёсток» | Сайты и веб-приложения SPA | Портфолио | Spider Group
UX и UI раздела «Рецепты» в онлайн-супермаркете «Перекрёсток»

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

Клиент: X5 Retail Group

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

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

Задача

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

Результат

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

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

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

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

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

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

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

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

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

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

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

Прототипы и макеты
Запрос на разработку сайта
Делимся опытом
и кейсами в рассылке
Позвонить

Мы можем перезвонить вам за 24 секунды

Выбрать удобное время звонка

Спасибо, мы перезвоним вам в ближайшее время

Что-то пошло не так :(

Попробуйте отправить запрос позже