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

Эмпатия к пользователю

Персонажи пользователей

Первый шаг, который я предпринял, был онлайн-ресерч клиентской базы Zara. Затем я набросал пару предварительных персонажей, охватывающих гипотетически самую большую группу потребителей — профессионалов от 20 до 40 с уровнем дохода выше среднего.

Zara: Кейс-стади по редизайну мобильного приложения, персонажи пользователя

Истории использования

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

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

Тестирование юзабилити

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

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

  • Последнее время было довольно холодно, и вы подыскиваете себе зимнее пальто. Что вы сделаете?
  • Вы видите пальто, которое вам может понравиться. Можете ли вы рассказать, как вы принимаете решение — ваше оно или нет?
  • Вы добавили пальто в корзину, но понимаете, что размер не тот. Как вы это исправите?

Zara: Кейс-стади по редизайну мобильного приложения, тестирование юзабилити

Определение и анализ

Карта сродства

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

Zara: Кейс-стади по редизайну мобильного приложения, карта сродства

Анализ 2×2

Чтобы приоритизировать проблемы, я использовал карту 2х2, чтобы ранжировать категории проблем по важности для бизнеса (ось Х) и пользователей (ось У). Учитывая, что основной бизнес-целью приложения является повышение мобильной прибыли, я решил, что проблемы в редактировании товаров в корзине — самые важные для бизнеса и пользователей. Поэтому именно эти проблемы я попытался решить в своем редизайне.

Zara: Кейс-стади по редизайну мобильного приложения, Анализ 2x2

Определение проблемы

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

Zara: Кейс-стади по редизайну мобильного приложения, опредиление проблемы

При попытке редактирования элемента корзины:

  • Только 1 из 7 пользователей справился без проблем
  • 6 из 7 пользователей коснулись пальцем элемента, получив в итоге только картинку
  • 4 из 7 пользователей попытались свайпить элемент влево, что также не активирует режим редактирования
  • 2 из 7 пользователей случайно удалили элементы корзины

Другие проблемы:

  • Нет способа редактировать размер или цвет товара в корзине, что означает, что пользователю придется заново искать этот товар в каталоге
  • Пользователи не могут видеть более одной фотографии элемента в корзине

Идеация и креатив

Грубый набросок UI

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

Zara: Кейс-стади по редизайну мобильного приложения, UI прототип

Детальные макеты

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

Вот предполагаемые решения, которые у меня получились:

Zara: Кейс-стади по редизайну мобильного приложения, детальные макеты - 1

Zara: Кейс-стади по редизайну мобильного приложения, детальные макеты - 2
* — Новая кнопка ‘edit’ заменяет старую кнопку ‘buy later’; тем не менее, это был намеренный выбор. Раньше, когда пользователь хотел сохранить элемент, чтобы купить позже, они могли сделать так, только когда товар уже в корзине. Я бы добавил функцию ‘save-for-later’ в сценарий просмотра товаров, чтобы пользователю не пришлось добавлять товар в корзину перед тем, как сделать закладку.

Zara: Кейс-стади по редизайну мобильного приложения, детальные макеты - 3

Zara: Кейс-стади по редизайну мобильного приложения, детальные макеты - 4
** — Вертикальная карусель с фото сочетается с постоянным паттерном взаимодействия в остальных частях приложения. Во время начальных тестов юзабилити пользователи часто свайпили по горизонтали, чтобы увидеть больше фото товара. Поэтому я добавил более яркие индикаторы, чтобы направить пользователей на правильные взаимодействия.

Zara: Кейс-стади по редизайну мобильного приложения, детальные макеты - 5

Прототип

Готовы оценить часть моего прототипа?

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

Валидация

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

В результате редизайна, процент успешного выполнения задачи редактирования товара в корзине увеличился с 33% до 100%.

Когда пользователи хотели редактировать товар в корзине:

Перед редизайном:

Zara: Кейс-стади по редизайну мобильного приложения, перед редизайном

После редизайна:

Zara: Кейс-стади по редизайну мобильного приложения, после редизайна

Главное

С помощью тестов юзабилити guerilla я обнаружил, что у пользователей возникали проблемы при редактировании товаров после того, как они были добавлены в корзину. Также в корзине отсутствовали функции, которые типично ожидаются от корзины в приложении (например, просмотр дополнительных фотографий или изменения размера выбранного товара). Мой дизайн улучшает процесс чекаута, делая его проще для пользователей по части сравнения и редактирования товаров в корзине. Улучшение UX для этого процесса означает снижение недовольства клиентов, что в свою очередь способствует росту продаж сейчас и в будущем.
Спасибо за чтение!