Улучшаем мобильное приложение «Пятёрочки»

Всем привет! Мы — компания Polygant, занимаемся разработкой финтех -приложений и сервисов. Недавно мы опубликовали наше видение того, как можно улучшить мобильное приложение МТС Банка. Та статья получила хороший отклик, и мы решили продолжить.

Сегодня подробно разберем приложение «Пятёрочка: доставка продуктов».

Торговая сеть «Пятёрочка» основана в 1998 г., первый магазин открылся в 1999 г. в Санкт-Петербурге. В 2019 г. была представлена новая концепция и стартовала масштабная программа обновления торговой сети, а также открыт первый обновленный магазин в Москве.

Федеральная торговая сеть «Пятёрочка» принадлежит компании X5 Retail Group, которая также управляет гипермаркетами «Карусель» и супермаркетами «Перекрёсток».

Как известно, чтобы что-то улучшить, нужно сначала это детально изучить и с пристрастием протестировать. Чем мы и занимались достаточно долго.

Мы завели виртуальную карту в мобильном приложении «Пятёрочки», совершили несколько покупок в разных магазинах, посмотрели как начисляются баллы, как отображается история покупок и много чего еще.

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

Основные сценарии использования мобильных приложений розничных торговых сетей вроде «Пятёрочки» следующие:

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

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

Как мы и говорили ранее, помимо тестирования, мы собрали обратную связь с пользователей мобильного приложения «Пятёрочки», выявили наиболее явные проблемы и предлагаем варианты их решения:

Одна из проблем — отсутствие поиска на главном экране. Странно, что этой функции здесь нет, ведь с ее помощью пользователь может за несколько секунд найти товар, его цену и другую информацию. Мы добавили строку поиска непосредственно в верху экрана, так как это самое подходящее для него место.

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

Вторая проблема — размер рекламных блоков, таких как «Звезды вашей кухни» и «Магазин сокровищ». Они не содержат столько важной информации чтобы занимать так много критично важного места на экране, поэтому мы поработали над их визуалом и придали им логичный размер и расположение.

Кстати, эти блоки вошли в топ 3 желательных улучшений по результатам проведенного нами опроса пользователей приложения. А главная претензия заключается в том , что количество баллов не соответствует количеству рублей. Давайте, раз уж начали, поговорим и про это.

За каждую покупку начисляются баллы , которые можно списать при оплате следующей покупки в «Пятёрочке» — это часть программы лояльности сети. Аналогичные программы есть во многих сферах, и, как правило, 1 балл (или бонус) приравнивается к 1 рублю. Почему? Потому, что, как показывает практика, это нагляднее для пользователя и не вызывает негатива, как в случае, когда отображается 1000 баллов, а по факту это всего лишь 100 рублей.

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

Еще одна проблема — отсутствие на экране каких-либо товаров, например, по акции или товаров недели. Во-первых, это быстро доносит до пользователя информацию об актуальных и выгодных предложениях. Во-вторых, это

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

Поэтому мы добавили два блока — «Товары недели», который будет постоянным, и «Дачная подборка», который можно менять в зависимости от времени года и различных праздников, и событий.

Последним на главном экране мы решили улучшить информационный блок, где рассказывают о различных акциях, скидках, таких как «Больше баллов за уровень», «Акции недели» и т. д.

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

Переходим к экрану программы лояльности.

Главная функция экрана программы лояльности — отображение QR-кода карты лояльности, с помощью которого начисляются баллы за покупки. Мы сразу заметили, что размер QR-кода мелковат, а после совершения нескольких покупок в магазине выяснилось, что у продавцов периодически (в среднем каждую вторую покупку) на кассе возникают проблемы со сканированием кода. Приходилось либо выставлять яркость на мобильном устройстве на самый максимум, либо подносить его плотную к сканеру.

Поэтому мы сделали QR-код на 30 % больше, чтобы не возникало проблем при его сканировании.

Добавили и отображение количества накопленных баллов — это важная информация, которая должна выводиться на этом экране, чтобы покупатель точно знал, сколько у него баллов в данный момент. А еще удобно разместили на экране кнопки быстрого перехода к историям покупок и в раздел экран частых вопросов.

Не остался без доработок и экран истории покупок. Начнем с того, что сейчас здесь можно выбрать только какой-то определенный месяц и за этот период посмотреть совершенные покупки.

Весьма ограниченные возможности по фильтрам, не так ли? В одну строчку к выбору месяца мы добавили два самых популярных, по нашему мнению, фильтра — отображение всех покупок, совершенных в магазине и доставленных на дом. А если нужно найти что-то по другим критериям, то можно нажать на иконку справа и перейти к расширенному списку фильтров.

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

Помимо фильтров мы решили доработать и список отображаемых покупок:

Согласитесь, что даже такие небольшие, но нужные доработки, делают приложение более удобным?

Подробный экран совершенной покупки мы также решили сделать более информативным:

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

Также мы добавили:

Такие изменения придают этому экрану больше информативности и полезности.

Решили улучшить экран доставки продуктов, а точнее, — упростить для пользователей процесс заказа:

В текущей реализации вначале нужно указать адрес на карте, далее собрать корзину покупок, после чего опять вернуться к блоку с адресом и заполнить точные данные по доставке: квартиру, подъезд, этаж, домофон и комментарий курьеру.

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

Сделали небольшие изменения и в корзине — данные о сумме заказа, скидкам, стоимости доставки вынесли в отдельный блок, так как сейчас эта информация теряется на общем фоне.

Добавили и возможность оставить/изменить комментарий для курьера. Все это за счет уменьшения размера блоков с промокодом и «Если не будет в наличии?».

Помимо предложений по улучшениям мы собрали и список текущих багов:

1. На главной странице есть кнопка частых вопросов. При нажатии на нее идет редирект на страницу «Обратная связь», а не на вопросы. Частые вопросы при этом — отдельная страница в разделе «Обратная связь».

2. В информации о карте лояльности ��оказывается не актуальный для аккаунта процент кэшбэка, а всегда один и тот же. То есть если у пользователя 2-й уровень, то его кэшбэк составляет 1 %. В информации о карте при этом отображается «1 балл за каждые 20 рублей и 10 баллов это 1 р.» т.е. получается 0,5 %.

3. Ошибка 404 на согласии на рекламу и на обработку персональных данных.

4. Дублируется информация в сторисах и в разделе «Успейте поучаствовать» на главном экране. А уже из «Успейте поучаствовать» происходит редирект на сайт с подробной информацией.

5. Карусель в каталоге из доставки не круговая. Также каждый бейдж в карусели неинтерактивный, то есть нажатие на него никуда не приводит.

6. Не понятно, как считается вес корзины. Например, можно добавить только 29 пачек соли по 1 кг.

7. В условиях доставки указано что максимальный объем в категории «Вода» — 11 кг. При этом допустимо это значение превысить, например, положить в корзину 6 бутылок кваса (он в категории «Вода») по 2 литра. Ну и килограмм — это не единица измерения объема.

8. При оценке товаров на пять звезд, если для оценки есть четыре позиции, то все отображается в одну строку, хотя четвертая полностью не умещается (при пяти уже идет отображение в два ряда).

9. Сломалась оценка товара. Не отображается раздел «Что вам особенно понравилось?». Можно поставить оценку нескольким товарам, при этом не завершая ее, а переходя свайпами к следующим.

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

11. В пользовательском соглашении разные и широкие отступы слева и справа, при этом отступы справа вызваны ссылками в тексте соглашения. А ширина столбцов пользовательского соглашения различна от пункта к пункту.

12. Есть значок календаря на поле «Дата рождения» при регистрации. При этом дату проставлять можно только руками — календарь для выбора не предусмотрен.

13. При редактировании дня уже введенной даты рождения, при удалении символа срабатывает автоформатирование, которое ломает всю дату.

@x5group , примите к сведению.

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

Если оценивать приложение по трем критериям — дизайну, функционалу и удобству использования, то оценка будет следующей:

А как бы вы оценили приложение «Пятёрочки»? Что скажете о наших доработках, которые мы предложили в статье? Пишите в комментариях, предлагайте свои идеи.