Vodovoz.ru

Юзабилити-аудит и редизайн мобильного приложения для доставки воды Vodovoz.ru

E-commerce

Задача проекта

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

Vodovoz.ru (ООО «МосВодовоз») — один из лидеров среди интернет-магазинов, осуществляющих доставку минеральной воды, обычной питьевой воды, чая, кофе и других напитков, а также оборудования для розлива, доставку кондитерских изделий и сопутствующих товаров для дома и офиса.

Юзабилити-аудит

В рамках работ по аудиту был проведен комплексный UX-анализ мобильного приложения заказчика (платформы iOS, Android) на соответствие требованиям Material Design и Human Interface Design, корректность навигации.

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

Проводимый нами юзабилити-аудит выявил слабые стороны пользовательского интерфейса мобильного приложения Vodovoz.ru.

На его основе были сформулированы рекомендации по изменению UI/UX мобильного приложения. Подготовлен отчет о проделанной работе в виде презентации с выявленными несоответствиями и рекомендациями по изменениям.

Концепция

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

Причины выбора подобного варианта на основе рекомендаций для основных экранов:

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

Дизайн-макеты

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

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

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

Функциональность мобильного приложения

Главный экран

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

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

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

Авторизация

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

Предусмотрена возможность смены пароля, когда он утерян или забыт пользователем. Ссылка на восстановление пароля размещается рядом с основным полем для ввода пароля.

Каталог товаров

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

На экране со списком товаров (отдельной категории) можно настраивать сетку элементов, расположив по:

две карточки товара в ряду: так и фото товара получаются достаточно большие, и на экран помещается достаточно карточек;
одной карточке товара в ряду: увеличивая информативность и удобство просмотра.

Можно добавить товар в корзину, отложить товар в «Избранное», перейти в карточку товара. Товары выделены лейблами в соответствии с типом товаров: «Акция», «Хит», «Волна призов» и т. п.

Покупка сертификата

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

Поиск

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

Карточка товара

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

лента фотографий товара;
рейтинг товаров и количество отзывов;
цена товара (без скидки и со скидкой);
информация о стоимости залога за оборотную тару;
описание характеристик и свойств товара;
лента с аналогами товара;
отзывы покупателей;
лента с категориями товаров «Ищут по запросам»;
лента «С этим товаром покупают»;
копирование артикула товара;
добавление в корзину и избранное;
изменения количества единиц товара в корзине;
различные информационные подсказки к опциям экрана;
дополнительные всплывающие окна с акциями и предложениями.

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

Отзывы

На экране «Отзывы» пользователь может просмотреть отзывы о товаре и его рейтинг или оставить отзыв о товаре, который он приобретал, подкрепив сообщение фотоматериалами.

Корзина

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

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

Оформить заказ

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

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

Избранное

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

Водный трекер

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

Профиль

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

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

История заказов

На экран «История заказов» можно попасть через раздел «Профиль». В этом разделе все заказы отсортированы по статусам: «Все», «Выполнен», «В пути» и т. п. По списку заказов легко ориентироваться за счет интерактивного поиска по номеру заказа и названиям товаров. У каждого заказа в списке отображается: уникальный номер заказа, дата, итоговая сумма, набор заказанных товаров, адрес доставки, тип оплаты («Оплачен», «Требует оплаты»), кнопки для оплаты и повторного заказа.

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

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

Анкета

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