Что упускает «Жизньмарт», или редизайн интерфейсов для сети продуктовых нового формата

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

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

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

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

Задачи:

1. Проанализировать сайт и приложение Жизньмарт, предложить что можно улучшить и почему
2. Придумать фичу, которая будет выделять приложение Жизньмарта среди конкурентов
3. Уложиться в дедлайн 5 часов

Целевая аудитория сайта и приложения не сильно отличается.

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

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

Про конкурентов

• Магазины продуктов, их сайты и приложения: Перекресток, Вкусвилл, Пятёрочка
• Кафе, точки быстрого питания
• Сервисы доставки еды: Самокат, Лавка, Сбермаркет

Я решила опросить 8 своих друзей не-дизайнеров, чтобы собрать разный опыт пользования как приложением, так и сайтом.

1. Оцени сайт и приложение по 10-балльной шкале

В среднем, респонденты оценили приложение на 7,2 балла, а сайт на 5,4

2. Что бы ты хотел(-а) изменить, какие действия у тебя вызывают затруднения в пользовании?

Ответы были такие (прим.: жм — Жизньмарт):

3. Чего тебе не хватает в приложении Жизньмарта?

Ответы были или похожи друг на друга, или их просто не было. Выбрала самые интересные:

Собрав все предложения, я сделала матрицу влияния-усилий:

План такой:

• Редизайню аппку: главная, фильтры и правки в корзине
• Делаю редизайн главной на сайте
• Дизайню фичу, которая выделит Жизньмарт среди конкурентов

1. Это приложение сейчас, главный экран

• Неочевидное расположение карточки. Это краткая версия рассказа респондента: открываешь приложение, карта на прелоадере появилась, через несколько секунд приложение полностью прогрузилось, а карту из вида ты потерял. Из-за того, что на загрузке карточка находится внизу, а на главном экране она в самом правом углу, карточку не сразу получается найти

• Непривычное расположение иконок в таббаре. 3 из 8 опрошенных мною друзей, поделились, что случайно тапали на корзину, когда хотели нажать на профиль. Исправим эту проблему!

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

Раздел «Вам понравится» совсем незаметен из-за кнопок «Готовые блюда», «Продукты»… поэтому мы можем терять новых покупателей, которые ещё не знают что такое Жизньмарт и только-только скачали приложение. Поэтому я подтянула кнопки и выровняла отступы. Вуаля! Новые покупатели не теряются, а старички заказывают ещё проще :)

• Поиск магазина по параметрам

Слишком много магазинов и шанса быстро найти подходящий Жизньмарт нет :(

Добавила фильтрацию через чипсы, это ускорит контакт с фильтрацией и сделает интерфейс более дружелюбным к покупателю

• Нельзя увеличить количество товара в корзине

Нужно изменить количество тортов в корзине. Два варианта:

• «1×135 ₽» — окажется кнопкой, и по нажатию на неё вылезет что-либо, где можно увеличить количество позиций
• Увеличить количество товаров нельзя :(

Добавила функцию увеличения количества товаров

2. Главная страница сайта

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

Карточки в листинге сейчас они вызывают когнитивную нагрузку тем, что взгляд «скачет» + нет кнопки «В корзину» и приходится сначала нажимать на товар, а уже потом закидывать его в корзину (в два шага)

Улучшила баннеры тем, что изменила форму, добавила видимые элементы навигации и сделала их более современными

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

А ещё сайт и приложение теперь консистентны! Большие кнопки с иллюстрациями (Готовые блюда, Продукты, Мои покупки…) есть и на главной в приложении :)

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

Плюсы такой фичи:

• Добавить только в приложение => увеличить скачиваемость приложения из-за уникальной функции
• У большого количества людей есть минимум 1 пищевая аллергия => таким подбором будут пользоваться
• Повышение лояльности покупателя из-за заботы о его здоровье и предпочтениях

Сколько всё заняло по времени:

фигма: Жизньмарт, Алина Устьянцева

UI-kit:

Спасибо за внимание! Буду рада корректной критике работы в комментах, а, ну и хештеги #жизньмарт #uxuidesign #redesign

Контакты:

Телеграм: @alinaustyantseva

Почта: [email protected]