Разбор концепта приложения по фитнесу

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.

Автор работы София Конюхова, подписчица DL PRO

Проект на Behance

Какие ключевые вопросы по работе у тебя есть к менторам?

1. Хочу оценки работы с точки зрения ux исследования, не уверена, что правильно использовала Affinity Diagram
2. До сих пор не могу получать инсайты из проведенных исследований. У меня изначально в голове были экраны приложения, и после ресерча они не изменились, не понимаю, как применять полученные данные в дизайне. Думаю, вы сможете посмотреть на ресерч и, основываясь на нем, дать советы, что можно было бы изменить.

Задача

Создать дизайн-концепт фитнес-приложения (несколько экранов), показать навыки ux.

Привет, София!


Большое спасибо, что поделилась своей работой! Ты выбрала достаточно актуальную тему для приложения. Удивила объёмом работы, выполнила большое исследование. Ну и, конечно, заставила нас нормально так покопаться 😉

Что понравилось в работе

Объём выполненных исследований, конечно, не мог не поразить. Помимо стандартного конкурентного анализа был выполнен большой пласт работы. Видно, что изучила много подходов.

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

Хорошо, что сделала на английском. Если ты ищешь перспективы для роста не в России, то это правильное решение – делать кейс на другом языке.

У тебя очень оригинальная идея: совместить в одном приложении питание и упражнения. Очень интересно будет ее развить.

Логика

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

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

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

Affinity Diagram – это инструмент, задача которого группировать что-либо по каким-то правилам. Хорошо, что изучила его. Если понравилось – круто, можешь использовать теперь в работе. Еще аналогичную задачу выполняет Mind Map (в DL Boost коммьюнити называется «Гидра»).

Empathy Map (блок Боли)

Вытащила хорошие боли в Empathy Map, которые в итоге не были записаны в инсайтах. Почему не развила самые важные в гипотезы и не реализовала их в УТП?

Пользователи

Посмотри методологию JTBD. Она более компактная и универсальная. Персоны хороши для продукта с готовой аудиторией, по которой собрано много данных. Для новых продуктов – JTBD.

Конкуренты

Взяты хорошие референсы. Правильно вытащила из них нужные решения. Не хватило изучения конкурентов в сфере трекеров питания, учета калорий.

Бизнес

А теперь к самому прикольному, что мы нашли в твоём исследовании и в работе... ФИТНЕС И ПИТАНИЕ.

Блок про питания в работе Софии

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

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

Смотри, сколько классных идей в итоге не реализовано:

  • Взаимосвязь того, что ешь и как тренируешься. Съел тортик – получи в дополнение тренировку в виде 30-ти минут на беговой дорожке. Хорошо потренировался – можешь съесть что-то интересное (совсем немного, в пределах нормы). Второе как раз через положительные подкрепления должно быть реализовано.
  • Приложение в режиме реального тренера. Есть Алиса, а есть тренер Валера, который внедрён в приложение, «составляет тебе программу», присылает уведомления в разговорном стиле.
  • Хороший Onboarding – залог успеха современных приложений (например, у Spotify). Так и здесь можно соединить фитнес и питание. Приложение на основе введённых данных подбирает питание и формирует тренировки. Клиентоориентированность – наше всё.
  • На основе целей пользователя можно ввести раздел «Советы», где он может узнать про связь питания и фитнеса.
Приложение Simple и их новостной блог с историями
  • Если это приложение для нацеленных на результат клиентов, то важно выдавать им подробную статистику прогресса.
  • Ачивки – один из методов удержания пользователя внутри приложения засчёт позитивных подкреплений, а также способ трекать результат в геймифицированном формате.
  • Была тяжелая тренировка, всё болит. Приложение добавляет те продукты в твоё меню, которые могут облегчить это состояние.
  • А может, приложение – это площадка для взаимодействия тренера и клиента. В него тренер мог бы заносить упражнения и питание. Тогда это вообще другой формат приложения.
  • Семейная подписка? Или делиться результатами с друзьями? А может, устроить чемпионат внутри приложения? Всё это про взаимодействие с другими пользователями приложения.

Все эти гипотезы мы наштормили минут за 10-15. Дальше надо их сортировать, выкидывать лишнее (неэффективное). Этап конкуренции гипотез помогает выбрать лучшие со стороны клиента и бизнеса.

Double Diamond

Этот подход поможет тебе понять, как выстраивать процесс работы.

  • Discovery — этап исследования, чтобы понять с какими проблемами сталкиваются пользователи;
  • Define — выделяем самые частые и самые болезненные проблемы, проводим конкуренцию гипотез;
  • Develop — этап дизайна, где прототипируем и рисуем разные идеи по визуализации информации.;
  • Deliver — тестируем варианты с пользователями и выбираем самые подходящие.

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

Визуал

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

Найти ответы на вопросы:

  • В каких условиях используется наше приложение?
  • В каком контексте?
  • Что окружает наше приложение?
  • Что нас ограничивает?
  • Кто наши пользователи, что их волнует?
  • Какой характер у нашего приложения? Какой будет тон? 
    Это приложение-наставник, приложение-друг или приложение-энциклопедия?

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

Работа Софии. Элементы внутри приложения.

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

На других экранах с помощью этих элементов можно достичь ощущения динамики, но надо следить, чтобы они не мешали прочтению фотографий, как это случилось в макете I like и Personal plan.

Референс с Dribble. Как работать с элементами.

Мудборд и референсы

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

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

Типографика

Мне нравится как ты работаешь с текстом: все элементы соразмерны, есть необходимая контрастность. Размер элементов управления надо проверить на следующее утверждение: все должно удобно нажиматься и однозначно определяться разгоряченным человеком. Если я мужчина, работаю с железом, я в перчатках с открытыми пальцами, сделал 10 подходов, у меня пульс повышен. Смогу ли я воспользоваться приложением, что я там увижу в этот момент, что смогу сделать. Будет ли это отдельный режим? Будет ли мне удобно запустить, поставить паузу, остановить видео, сделать выбор, совершить какое-то действие, оставить заметку. Проведи опрос, поверяй на контекст ситуации использования приложения. ЭТо совместно с твоими исследованиями повлияет на то, как приложение выглядит и работает. Например, мы можем догадаться, что люди во время тренировки будут смотреть на приложение с какого-то увеличенного расстояния. Согласно этому мы должны изменить приложение, чтобы им все было видно, чтобы на экране было только важное в этот момент.

Композиция

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

Цвет

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

Команда

Очень здорово, что ты умеешь работать с библиотеками и стилями в фигме, это позволяет добиться единообразия в макете и сказывается на скорости и качестве твоей работы. Будь более внимательна к сетке. В конце работы должен быть этап, когда мы проверяем макет на соответствие сетке. Еще я всегда использую метод «включить режим арт-директора» -– это когда мы смотрим на свой макет и задаем себе вопросы, обращаем внимание на мелочи, которые в спешке рождения концепции пропустили.

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

Что посмотреть

https://www.jtmadethis.com/ux-case-studies/jrl – пример кейса по релевантной теме; в нем показано, как автор проходит через этапы разработки, и как все это влияет на готовый продукт;

https://2020.pioneum.ru/2020 – полезно будет следить за проектом Pioneum: как студии подходят к разработке, выстраивают процессы;

https://www.pinterest.ru/lokkearts цветовые-подборки-color-pattern/ – подборки цветовых палитр помогут выбрать интересные сочетания;

https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca – статья про JTBD;

https://vc.ru/design/18058-double-diamond – модель Double Diamond.


Успехов в будущих проектах!

Работу разобрали Алана и Ольга.

Наш бот Прошка оценил работу так

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/