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

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

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

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

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

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

Задачи:

  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 и продуктовый дизайнер
27
8 комментариев