Vodovoz.ru

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

E-commerce

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

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

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

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

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

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

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

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

Концепция

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

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

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

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

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

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

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

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

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

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

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

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

Авторизация

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

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

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

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

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

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

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

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

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

Поиск

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

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

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

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

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

Отзывы

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

Корзина

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

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

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

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

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

Избранное

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

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

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

Профиль

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

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

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

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

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

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

Анкета

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