Цели:

Мои цели этого кейс-стади UI/UX были такими:

  1. Анализ приложения для поиска неудобств для пользователя.
  2. Тесты юзабилити для подтверждения больных мест и поиска новых.
  3. Дизайн прототипа, в котором основные проблемы будут решены.
  4. Итерации до тех пор, пока я не согласую все изменения дизайна с контентом.

Почему Runkeeper?

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

Результаты

Изменения в UI, которые я внедрил, дали такие результаты во время тестирования юзабилити:

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 1

Персонажи

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

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

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 2
Персонажи

Начальные наблюдения

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

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

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

Основываясь на этих наблюдениях, я решил запустить guerilla-тесты в Westfield Mall, чтобы подтвердить актуальность найденных недостатков.

Вот три отдельных задачи, которые я дал пользователям:

  1. Скоро лето, и вы хотите выглядеть на пляже хорошо. Создайте цель похудеть на 10 футов (около 5 кг) за 2 месяца.
  2. Посмотрите, сколько калорий вы сожгли на своей 5 км пробежке на прошлой неделе.
  3. Вы подписались на план тренировок и хотите быстро просмотреть запланированные тренировки на будущие недели. Найдите полное расписание 8-недельного тренировочного плана.

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

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

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 4
Карта сродства

Матрица 2x2

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

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

Для пользователей задание цели — самая базовая и важная функция, ради которой они и пользуются фитнес-приложениями вроде Runkeeper. Они хотят задавать цели и достигать их.

Слабые стороны

Карта сродства и матрица 2×2 открыли интересные результаты! Вот 2 основные слабые стороны, которые я открыл:

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 6
Слабые стороны

Поиск решений и прототипы

Первый недостаток касался всех трех заданий. Для справки, вот задания, поставленные пользователям:

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 7

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

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

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 8
Оо, большая красная кнопка!
Вот сравнение изменений, которые я предпринял для решения данной проблемы:
Кейс-стади по редизайну фитнес приложения Runkeeper, фото 9
Страница ‘Me': До и после
Мое третье задание оказалось той еще заковыкой, что и отражено во втором недостатке: пользователи просто не имели возможности просмотреть свой график тренировок, на который они подписались без удаления плана и его превью.

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

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 10

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 11
До и после: Сценарии задания
Два экрана ниже показывают изменения в UI, которые я внес в страницу Training.
Кейс-стади по редизайну фитнес приложения Runkeeper, фото 12
Страница тренировок: до и после
Эти экраны ниже показывают текущий процесс, через который проходят пользователи для превью своего тренировочного расписания согласно плану, который они еще не приобрели. Примечание: я не менял UI для этих экранов.
Кейс-стади по редизайну фитнес приложения Runkeeper, фото 13
Текущий сценарий UI
Как видите, единственным способом увидеть полный список тренировок — превью конкретного плана. Как только вы подписались на какой-то план, больше нет возможности посмотреть этот список. Чтобы пользователи могли посмотреть свой график тренировок по плану, на который они уже подписались, я создал отдельный сценарий:
Кейс-стади по редизайну фитнес приложения Runkeeper, фото 14
Новый сценарий UI
Второй экран в этом сценарии был изначально доступен только как превью перед подпиской на план. Я добавил третий экран, чтобы показать, что можно предпринять те же действия в режиме списка, как и в карточках (т.е. выделить или отменить тренировку).

Валидация и выводы

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

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

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 15
Начальное Guerilla-тестирование
А теперь посмотрим, как изменился результат на последнем раунде валидации, где новым пользователям были даны те же 20 секунд на каждое задание:
Кейс-стади по редизайну фитнес приложения Runkeeper, фото 16
Конечное тестирование юзабилити
И, наконец, я отметил количество людей, которые выделили иконку загрузки фото не по ошибке:

Кейс-стади по редизайну фитнес приложения Runkeeper, фото 17

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

Перспективы на будущее

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

Вот мой интерактивный прототип, которым я пользовался для валидации своих дизайн-решений:

Спасибо за внимание! Пожалуйста, делитесь своими впечатлениями в комментариях — дизайнеру всегда есть, куда расти!

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