Улучшаем мобильное приложение «ВкусВилла»

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

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

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

12 мая 2009 года в Москве, в районе Строгино, открылся первый магазин «Избёнка», с чего и началась история сети супермаркетов. К середине 2011 года работали уже около 80 магазинов. А в 2016 году название «Избёнка» отошло на второй план и вся сеть супермаркетов стала называться «ВкусВилл».

Сегодня сеть насчитывает более 1000 магазинов по всей России. И есть даже один в Амстердаме.

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

Если говорить об основных сценариях использования мобильного приложения, аналогичного вкусвилловскому, то они следующие:

А теперь давайте приступим к нашему разбору. Поехали!

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

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

Если говорить про функциональность экрана «Моя карта», то вопросов здесь не возникает и чего-то добавлять даже и не хочется ― все достаточно информативно. Но расположено как-то нелогично.

Мы решили привести этот экран в порядок, расположили блоки более последовательно, ну и внесли небольшие доработки:

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

Более логично перекомпоновали блоки экрана для большего удобства пользователей. Получился следующий порядок:

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

Этот экран показывает пользователю количество текущих бонусов и историю их получения/списания. Как мы уже сказали в начале статьи, приложение «ВкусВилла» довольно неплохое и местами ему просто не хватает некоторого обрамления. Вот и с этим экраном получается так же:

Мы переработали структуру блоков. Раньше она состояла из:

Теперь там:

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

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

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

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

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

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

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

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

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

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