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

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

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

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

Структура кейса

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

Задачи:

  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

Почта: alinaust70@gmail.com

Алина Устьянцева
ux/ui и продуктовый дизайнер
2727
8 комментариев

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

2
Ответить

верные замечания! классная реализация.
тоже делал редизайн главной
https://www.behance.net/gallery/176057281/zhiznmart-redizajn-glavnoj

1
Ответить

кейс супер! рада, что ты тоже поделился :)

1
Ответить

Вот это смышленые юикс юай дезигнеры пошли! Лайк и репост!!!!!

1
Ответить

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

1
Ответить

Красиво получилось

1
Ответить

Здорово и очень полезно получилось))

1
Ответить