Что упускает «Жизньмарт», или редизайн интерфейсов для сети продуктовых нового формата
Провела качественный опрос среди не-дизайнеров. Выяснила, какие проблемы приложения и сайта существуют. И придумала фичу для аллергиков и тех, кто на диете.
Жизньмарт — сеть продуктовых магазинов в формате «у дома». У ребят есть сайт, приложение и клёвый брендбук. Это тестовое на вакансию продуктового дизайнера, которое мне так понравилось, что я решила его оформить в кейс.
Структура кейса
Кейс я разбила по смысловым блокам, чтобы облегчить восприятие. Кликайте на ссылки и откроется соответствующий раздел в проекте.
Задачи:
- Проанализировать сайт и приложение Жизньмарт, предложить что можно улучшить и почему
- Придумать фичу, которая будет выделять приложение Жизньмарта среди конкурентов
- Уложиться в дедлайн 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