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

Введение

Команда

Редизайн приложения McDelivery Singapore — финальный проект команды, в которую входила я, Фара Искандер и мой коллега Чик Джун Сюн, на курсе “Опыт пользователей и управление продуктами” (UXPM) Наньянского технологического университета.

Роль и подход

Наша роль как UX/UI-дизайнеров заключалась в исследовании приложения McDelivery с использованием разных методов. В рамках шестимесячного курса мы выполнили следующие задачи:

• Конкурентный анализ
• Контекстное исследование, интервью с пользователями, опросы и анализ данных
• Диаграмма сходства
• Эвристическая оценка
• Персоны и карта пути клиента
• Скетчи и раскадровка
• Вайрфреймы
• Юзабилити-тестирование
• Руководство по стилю
• Прототипы
• Мокапы

McDelivery

Приложение McDelivery появилось в Сингапуре в 2005 году для оказания услуг по доставке заказов из McDonald’s до двери клиента. Приложение оказалось крайне востребованным. Согласно данным Global McDelivery Records за 2019 год, Сингапур занимает третье место по количеству доставок из McDonald’s в день!

Проблема

Хотя McDonald’s пользуется в Сингапуре большой популярностью и считается лучшим рестораном быстрого питания, приложение получило множество отрицательных отзывов от пользователей.

McDelivery Singapore занимает 3 место среди самых загружаемых приложений в категории “Еда и напитки” для iOS и имеет рейтинг 1,9 из 5 по оценке 1100 людей. Рейтинг версии для Android составляет 2,9 из 5 по оценке 5400 пользователей.

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

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

Бренд McDonald’s известен во всем мире, его цель — подарить клиентам единообразный опыт взаимодействия, что касается всех аспектов бизнеса, в том числе, приложения McDelivery.

Что же пошло не так?

Просматривая оценки и отзывы в Google Play store и Apple App store, мы обнаружили, что пользователи чаще всего давали следующую обратную связь:

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

Конкурентный анализ

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

FoodPanda & Grab Food

Хотя FoodPanda и Grab Food не оказывают услуги доставки лишь одному ресторану, было важно изучить эти приложения, поскольку на сегодняшний день они являются ведущими в Сингапуре. Указанные платформы также используются McDonald’s для доставки еды.

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

Значит, именно эти опции нам следует учесть при разработке дизайн-концепции.

Попытаемся понять наших пользователей

Контекстное исследование и интервью

Мы проанализировали ряд скрининговых анкет и отобрали 6 кандидатов для контекстного исследования и интервью.

Перед участниками была поставлена задача — оформить в приложении заказ, а мы наблюдали за ходом ее выполнения. Мы выяснили следующее:

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

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

• Когда клиент вводит почтовый индекс, поле адреса заполняется автоматически, причем неправильно, но его невозможно отредактировать
• Четко не указана цена добавления в заказ дополнительных опций
• Выполнение заказа отследить невозможно, поскольку представленные данные являются неточными
• Отсутствует возможность сообщить о проблемах
• Понятное визуальное меню — важная функция, а иконка избранного — нет
• Один пользователь не смог выполнить задачу и пришел к выводу, что в приложении практически отсутствует система поддержки клиентов

Опрос и анализ полученных данных

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

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

Дизайн

Для начала мы задали себе вопрос:

Как мы можем предоставить пользователям приложения McDelivery опыт, аналогичный тому, который получают клиенты в самом ресторане?

Оформление заказа из дома или любого другого места сильно отличается от приобретения еды в самом McDonald’s. Многое может пойти не по плану, например, клиент получил совсем не то, что заказал, однако способа быстро обратиться за помощью не существует, или заказ вообще не доставили, потому что при оформлении был введен неправильный адрес, и вы не смогли его отредактировать.

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

Диаграмма сходства

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

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

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

Итак, почему же нужен редизайн?

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

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

Мы считаем, что дизайн требует изменений, чтобы пользователи могли получить прекрасный опыт, аналогичный тому, который получают клиенты в ресторанах McDonald’s.

Персоны

Мы создали 2 персоны:

1. Шанти Прем, 23 года (основная персона)

Проблема:

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

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

2. Максвелл Хенг, 30 лет (дополнительная персона)

Проблема:

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

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

Карта пути клиента

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

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

Как же мы исправим это?

Ценностное предложение

Учитывая все вышесказанное, мы сформулировали ценностное предложение следующим образом:

Как мы пришли к этому:

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

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

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

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

1. На стадии подготовки заказа к отправке Шанти может связаться со службой поддержки в чате.
2. Когда заказ уже передан курьеру, Шанти может напрямую связаться с ним, причем не только в чате, но и позвонить ему.

Вайрфреймы

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

Чат — удобный простой инструмент. Клиентам не придется тратить время на поиск номера телефона горячей линии и ожидание ответа от представителя службы поддержки или менеджера ресторана.

Редизайн: представляем вам новое приложение McDelivery

В процессе редизайна мы постоянно помнили о цели проекта: выразить через визуал ощущение счастья как отражение того удовольствия, которое получают клиенты McDonald’s от еды.

Руководство по стилю

Цветовая палитра включает основные цвета, используемые в брендинге McDonald’s, а именно желтый и красный. Чтобы общий вид приложения был сбалансированным мы добавили базовые цвета — белый, серый и черный.

Решения

Мы предлагаем следующие решения выявленных проблем:

1. Возможность редактировать адрес доставки

Изначально пользователи могли редактировать лишь свой почтовый индекс. Теперь же у них есть выбор: добавить индекс или вручную ввести адрес.

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

2. Страница отслеживания статуса заказа

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

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

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

3. Страница с дополнительными опциями

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

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

4. Страница “Свяжитесь с нами”

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

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

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

Заключение

Бренд McDonald’s приобрел большую лояльную аудиторию благодаря эффективному обслуживанию и четкому следованию стандартам. С течением времени эта сеть ресторанов быстрого питания стала культовой, предоставляя клиентам “счастливый и веселый опыт”.

Так как у McDonald’s много поклонников, запуск приложения McDelivery прошел успешно. Однако опыт взаимодействия в нем оказался совсем не таким приятным, как ожидалось. Поэтому возникла необходимость в редизайне, который позволил бы McDonald’s не только удержать лояльных клиентов, и но и привлечь новых.

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

Спасибо за внимание!

Использованные инструменты: Figma