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

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

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

Почему Runkeeper?

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

Результаты

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

Персонажи

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

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

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

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

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

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

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

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

Матрица 2x2

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

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

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

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

Первый недостаток касался всех трех заданий. Для справки, вот задания, поставленные пользователям: Единственной функции иконки загрузки фото был выбор картинки профиля. Тем не менее, эта опция была неясна подавляющему большинству пользователей. 4 из 5 пользователей, взаимодействующих с приложением, клацали на иконку загрузки фото независимо от задания, которое выполняли. Если вы сопоставите огромный размер иконки с тем фактом, что это красивое улыбающееся личико, неудивительно, что почти каждый попался на эту ловушку! Оо, большая красная кнопка! Вот сравнение изменений, которые я предпринял для решения данной проблемы: Страница ‘Me’: До и после Мое третье задание оказалось той еще заковыкой, что и отражено во втором недостатке: пользователи просто не имели возможности просмотреть свой график тренировок, на который они подписались без удаления плана и его превью. Когда я опросил пользователей, насколько им важна возможность просмотра списка тренировок, каждый подтвердил, что это просто таки маст-хев. Поэтому, однозначно, требовалось внедрение такой опции в интерфейс. Вот мои изменения в сценарии взаимодействия “до” и “после”: До и после: Сценарии задания Два экрана ниже показывают изменения в UI, которые я внес в страницу Training. Страница тренировок: до и после Эти экраны ниже показывают текущий процесс, через который проходят пользователи для превью своего тренировочного расписания согласно плану, который они еще не приобрели. Примечание: я не менял UI для этих экранов. Текущий сценарий UI Как видите, единственным способом увидеть полный список тренировок - превью конкретного плана. Как только вы подписались на какой-то план, больше нет возможности посмотреть этот список. Чтобы пользователи могли посмотреть свой график тренировок по плану, на который они уже подписались, я создал отдельный сценарий: Новый сценарий UI Второй экран в этом сценарии был изначально доступен только как превью перед подпиской на план. Я добавил третий экран, чтобы показать, что можно предпринять те же действия в режиме списка, как и в карточках (т.е. выделить или отменить тренировку).

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

Чтобы с уверенностью подтвердить, что мои изменения интерфейса действительно положительно повлияли на найденные недостатки для пользователя, мне понадобилось сравнить результаты изначальных тестов юзабилити с конечными. Тут я пропущу все раунды итераций и сфокусируюсь только на результатах “до” и “после”. Для начала, оценим количество людей, которые смогли выполнить каждое задание за 20 секунд в первом тесте: Начальное Guerilla-тестирование А теперь посмотрим, как изменился результат на последнем раунде валидации, где новым пользователям были даны те же 20 секунд на каждое задание: Конечное тестирование юзабилити И, наконец, я отметил количество людей, которые выделили иконку загрузки фото не по ошибке: Я был рад увидеть, что создание иконки с камерой и включение метки “Add Photo” прояснили функционал загрузчика фото, и меньше отвлекали пользователей. Что касается полного графика тренировок, каждый пользователь нашел то, что искал, и подтвердил свое желание сохранить эту возможность в интерфейсе.

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

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

---

Перевод статьи Peter Petrovics