Разбор кейса: редизайн приложения BigBasket

Общие сведения

Этот редизайн я выполнила в качестве упражнения для развития своих UI-навыков. Мне хотелось найти и решить конкретную проблему и сосредоточиться на разработке пользовательского интерфейса. Я выбрала существующее приложение с огромным количеством пользователей.

О BigBasket

BigBasket — один из крупнейших продуктовых онлайн-магазинов в Индии. Здесь можно найти более 40 000 товаров и более 1000 брендов. Клиентами онлайн-магазина являются 6 миллионов человек из 26 городов Индии. В день он принимает более 150 000 заказов.

Проблема

Общая: Как можно улучшить опыт пользователей после доставки заказа?

Анализ текущего опыта взаимодействия

Правило пика и завершения

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

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

Отсутствуют дыни >> Изумительные яблоки!

Проанализировав все это, я решила сосредоточиться на решении двух конкретных задач:

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

Исследование

Мудборд с идеями дизайна экранов для сбора отзывов:

Идеи для реализации карточек товаров:

Работа над пользовательским интерфейсом

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

Я работала над дизайном двух экранов:

• экран с информацией о заказе
• экран с составом заказа

Экран с информацией о заказе

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

Вайрфреймы

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

Итоговый дизайн

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

Экран с составом заказа

Этот экран обладает самым большим потенциалом для развития опыта взаимодействия. Здесь я улучшила UI, а также добавила 2 дополнительные функции:

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

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

Я добавила в интерфейс несколько часто встречающихся проблем:

• Отсутствуют некоторые товары
• Я получил не то, что заказал — доставили не те товары
• Срок годности товара истек / скоро истечет
• Товар низкого качества или поврежден

Пользовательский сценарий

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

Скетчи

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

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

Вайрфреймы

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

Микровзаимодействия

Прокрутка — Поиск — Свайп

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

Итоговый дизайн

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

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

Например: Если товар отсутствует, покупателю либо возмещается его стоимость, либо он должен быть доставлен в ближайшее время. Клиент выбирает тот вариант, который для него более удобен.

• Свайп влево для отправки позитивного отзыва: Эта функция была добавлена по 2 причинам. Во-первых, чтобы взаимодействие было единообразным — свайп с обеих сторон. Во-вторых, чтобы пользователи могли быстро отметить понравившийся товар, не заполняя стандартные длинные формы обратной связи. Нам опять удалось сократить время взаимодействия.

Интерактивный прототип

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

Заключение

Выводы

• Любые предположения должны быть подкреплены фактами. Предположение: люди привыкли делать свайп вправо, если им что-то нравится, а, значит, кнопка для получения положительной обратной связи должна располагаться с правой стороны. Факты: такое взаимодействие нравится/не нравится используется в популярном приложении Tinder. Поэтому я разместила CTA для позитивных отзывов справа.
• Если интерфейс интуитивно понятен, пользователи будут удовлетворены полученным опытом.
• UI-решение зависит от того, на каком этапе взаимодействия возникает проблема. Сделайте интерфейс понятным и удобным, а также не забывайте о правиле пика и завершения.

Следующие шаги

• Юзабилити-тестирование прототипа
• Глубокий анализ UI
• Работа над цветовой палитрой и типографикой

Дополнительные функции

• Голосовой помощник, который будет фиксировать положительные и отрицательные отзывы пользователей
• Чеклист, в котором можно будет отмечать доставленные товары