Проектирование сервиса по подбору фитнес тренера ТРЕНЕР
В данной статье я расскажу о проекте, который я выполнял в рамках курса UX Design в Tilda School
Впервые я услышал словосочетание User Experience, когда познакомился с конструктором сайтов Tilda. Тогда я не совсем понимал, что такое пользовательский опыт и думал, что главное в веб-дизайне это красиво оформить сайт. По мере углубления в сферу веба я понял, что UX является важной составляющей не только сайта, но и окружающего нас мира. UX- наше взаимодействие с миром, то как предметы располагают к своему пользованию.
После старта курса я начал читать “Дизайн привычных вещей” Дона Нормана.В ней бывший дизайнер Apple рассказывал о важности UX составляющей и тогда я осознал, что прежде чем показывать своему заказчику красивые картинки- необходимо тщательно углубиться в анализ происходящего. Иначе получится 8 переключателей ламп для всей квартиры, которые находятся в одном месте и стоят в ряд- пример плохого UX :)
Я решил спроектировать статью так, чтобы ты видел все мои действия и мысли. Как гласит известная фраза “Лучший способ чему-то научиться — начать учить этому других.”, поэтому здесь ты найдешь полезный материал, который может тебе пригодиться, я буду называть его ИНСАЙДЕРСКОЙ ИНФОРМАЦИЕЙ :3
Итак, передо мной стояла задача спроектировать сервис по подбору фитнес тренера, начнем?
- Постановка задачи
Моим первым шагом являлась подготовка к выполнению проекта. Для этого был создан Проектный документ, в котором я отслеживал свой прогресс поэтапно. В реальном проекте этот документ поможет заказчику, как и мне, следить за выполнением работ и давать комментарии при необходимости.
Следующим шагом являлась предварительная оценка, на которой я определяю цели и потребности бизнеса. Важно с самого начала определить, каковы цели создания продукта, какие потребности бизнеса он должен удовлетворить и какой результат, в итоге, нужно получить. Эту информацию дает клиент или его представитель.
Основные тезисы:
- веб-сервис для поиска фитнес тренера онлайн и офлайн
- у пользователя должна быть возможность находить тренера по виду спорта для индивидуальных или групповых тренировок
- у пользователя должна быть возможность видеть расписание тренировок и бронировать их
- целевая аудитория проекта человек от 20-ти до 45-ти лет, который владеет компьютером и имеет низкую физическую активность
Бизнес-требования — это только гипотеза о том, что должно быть в продукте и как он должен работать, чтобы приносить деньги бизнесу. Эту гипотезу я проверяю в ходе исследований и делаю вывод о том, нужна ли она мне или нет.
Данные о целях и пользователях дали мне понимание, какой конечной цели мне необходимо достичь. Моим следующим шагом являлись исследования и формирование требований, чтобы свести всю информацию в единое целое.
2. Исследования и требования
Мои исследования заключались в сборе информации о конкурентах, проведения опросов и онлайн-интервью, для исследования целевой аудитории. Далее я анализировал информацию и начинал генерировать идеи, для решения проблем. Все исследования сводились к формированию требований к продукту, которые содержат основные сценарии пользования продуктом для удовлетворения потребностей пользователя.
Начнем по порядку:
Анализ конкуретов
На этом этапе я анализировал конкурентов, чтобы посмотреть, какие решения оказались неудачными, а какие можно взять на заметку.
Анализ целевой аудитории
Чтобы лучше понимать потребности и проблемы целевой аудитории, для которой создаётся продукт, я провел исследования в виде интервью и опроса.
Опрос дал мне информацию о критериях выбора тренера и удобного формата тренировок. По итогам опроса я пришел к следующим выводам:
- Ключевые факторы при выборе тренера- опыт и цена
- Самый удобный формат тренировок- индивидуальные тренировки
- Самые распространенные цели тренировок- улучшение самочувствия и внешнего вида
Формат интервью для меня был совершенно новым. ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: если будете брать интервью, то знайте, что формат вопрос-ответ не работает! Сделайте для себя документ с общими вопросами, но будьте готовы, что в ходе общения будет необходимо искать подход к человеку. Не ждите прямого ответа на свой вопрос, старайтесь раскрыть собеседника. Учитесь на ошибках!
Я провел интервью с людьми разного возраста и пола. Также одно интервью я провел с действующим тренером.
По итогам интервью я пришел к следующим выводам:
- Для тренера наиболее удобный формат тренировок- индивидуальные из-за наблюдения за результатами
- Персональные тренировки в основном берут новички
- Цель занятий спортом- быть здоровым
- Самое главное в тренере- опыт и обратная связь
Следующим шагом мне необходимо было составить профиль пользователя.
Профиль пользователя
Профиль пользователя дал мне возможность выделить ключевую информацию. Здесь включена мотивация, задачи и проблемы пользователя. Это задание заставляет тебя побывать “в шкуре” другого человека, что, в свою очередь, расширяет кругозор и помогает увидеть проблемы со стороны другого человека.
Профиль пользователя помог мне увидеть проблемы глазами человека, а это помогало не сбиваться с пути, держать проблему в фокусе.
Следующим шагом было создание карты пути пользователя или Customer Journey Map.
CJM
Customer Journey Map помогает увидеть то, как человек использует услугу, показывает точки контакта. Чаще всего CJM применяют когда есть готовый продукт, чтобы увидеть проблемные места взаимодействия.
В итоге я получил представление о ключевых проблемах, которые возникают на различных шагах пользования продуктом.
На следующем этапе исследования мне необходимо было включить свою творческую половину, потому что передо мной стояла задача проанализировать готовые решения и сгенерировать идеи.
Анализ решений
Анализ решений представляет собой выжимку самых крутых идей конкурентов или сервисом, которые никак не связаны с моей темой. Можно считать это своеобразной рефлексией: ты взглянешь на идеи конкурентов после сбора информации, что в свою очередь поможет тебе сгенерировать крутые идеи.
Анализ решений помогает разбудить мозг и подготовить его к самому креативному этапу проектирования- генерации идей.
Генерация идей
Не сказать, что мозг работал как мотор болида на этом этапе- ничего не сказать. От меня требовалось придумывать как можно больше идей любых форматов. Самое главное- включиться в поток и дальше в голове будет возникать такое, о чем ты даже и не думал.
Желательно посвятить этому этапу несколько дней, чтобы мозг продолжал выдавать идеи, но не перегорел.
ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: не важно, что ты придумаешь, пусть это будет бредом, но факт в том, что лучшие открытия всегда казались неоосуществимыми. Не отбрасывай идею, ведь может именно она может принести тебе миллион долларов.
После того, как передо мной оказалось много идей, нужна была сортировка. Зачем? Чтобы убрать сомнительные идеи, оставить на потом сложно выполнимые, потому что на этапе первого выпуска продукта, тебе не нужен убер крутой сервис, ведь пользователь может не оценить твою идею, а ты столько инвестировал в нее. Избавляйся от менее полезных идей и концентрируйся на выборе лучших.
После генерации идей следующим шагом я должен был сформировать требования к продукту и его ценность
Формирование требований и описание ценности будущего продукта
Требования- сценарий взаимодействия пользователя с моим продуктом. В них я описывал цель пользователя, его потребности и сценарий взаимодействия.
Приоритетным требованием сервиса по поиску фитнес тренера являлся поиск тренера. Ведь, если ты не сможешь нормально найти тренера, то не будет смысла пользоваться сервисом.
ИНСДАЙДЕРСКАЯ ИНФОРМАЦИЯ: требования помогут увидеть основные функции сервиса для создания Minimal Value Product. То есть самой первой версии продукта, в которой содержатся основные функции и которую не жалко выкинуть, если не сработает.
После требований необходимо сформировать ценность продукта, то есть понять то, какой я делаю продукт и какие задачи он будет решать.
Завершив крупный блок Исследований я перешел на следующий этап, в котором начнется претворение идей и анализа в жизнь.
3. Проектирование
На этом этапе я прорабатывал взаимодействие пользователя с продуктом, прорабатывал пользовательские сценарии и создавал прототип. Не пугайся, сейчас я объясню, что зачем и как.
Начнем с описания взаимодействия с продуктом.
User flow
Или по-русски логическая схема взаимодействия пользователя с продуктом.
ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: Она помогает определить логику и последовательность действий пользователя. Представь отрезок: в начале находишься ты, у тебя в голове цель. На конце выполнение твоей цели. User flow представляет твой путь к цели от начала и до конца, не сворачивая никуда.
На схеме ниже я показал процесс поиска тренера на сайте сервиса по поиску фитнес тренера.
Без сценария взаимодействия идти дальше нет смысла, ибо ты не будешь понимать логику работы с продуктом, не смотря на все шаги позади.
Следующим этапом является составления пользовательского сценария.
Пользовательские сценарии
Этот этап похож на создание видеофильма, но только у себя в голове и на бумаге(электронном листе).
Сценарии показывают, как пользователь будет взаимодействовать с продуктом и как продукт будет помогать ему достигать целей.
На этоп этапе я показал, как пользователь, которого я описывал в профиле пользователя будет взаимодействовать с продуктом.
ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: главное не использовать конкретные действия на сервисе, иначе будешь заточен в клетке ограниченных действий на этапе прототипирования.
Ты можешь сделать сначала user flow, а потом написать сценарии и на оборот. Задача user flow и сценариев- получить одинаковое представление о первой версии продукта или MVP, продукта, который содержит основное понимание логики работы и в котором содержатся основные функции и которую не жалко выкинуть, если не сработает.
Следующий этап проектирования является проработкой продукта, то есть создание прототипа или wireframe, если мы говорим об англоязычной аудитории.
Wireframe(прототип)
Как сказал куратор курса Den Potapov: “Прототип позволяет нам сфокусироваться на сути, прежде чем переходить к красоте”.
Прототип это наш черновик. Ты показываешь его заказчику, и если что-то не так, то ты либо исправляешь на месте, либо переделываешь. Его не жалко выкинуть.
Первым делом я набросал прототип на бумаге, это помогает разбудить мозг, как при генерации идей. После того, как ты увидишь его на бумаге, будет легче перенести все в графический редактор. К сожалению, у меня не осталось фотографии моих зарисовок, но поверь, они мало отличаются от того, что ты увидишь на картинке из графического редактора.
Cсылка на прототип:
https://www.figma.com/file/x2VNf1mPp3HYRUNF6d0rT1/UX?node-id=0%3A1
ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: делать прототипы темного оттенка с едиными картинками и шрифтом хорошо. Почему? Ты не смотрешь на дизайнерскую составляющую: тебя не будут отвлекать цвета, различные начертания букв и яркие картинки. А еще советую всем пользоваться графическим редактором Figma: удобно и бесплатно :)
Во время создания прототипа я все время держал в голове то, что он выглядит не очень, но Alex Voloshyn подбодрил меня и замотивировал. Вот она- поддержка кураторов!
Итак, передо мной был прототип, но я мог только смотреть на картинке и все. Следующим этапом мне предстояло оживить прототип.
Интерактивный прототип
Никому не интересно смотреть на картинки, когда есть возможность “потыкать” в них. Интерактивный прототип позволяет пройтись по основному сценарию или user flow, прям как на настоящем сайте, только с небольшими оговорками в виде серого цвета и картинок.
Ссылка на кликабельный прототип:
Посмотрев на картинку ты увидишь множество макаронин, которые соединяют одну картинку с другой- это связи и их много, очень много.
Был момент, когда я придумал крутую фишку с личным кабинетом, но для создания этой идеи пришлось бы отходить от основной и дополнительно тратить время на проектирование прототипа. Но как ты теперь знаешь, прототип- это твой MVP. Поэтому я добавил эту фишку, но с “определенными” ограничениями:)
Моей основной целью было взаимодействие пользователя начиная с главной страницы и до карточки с информацией о грядущей тренировке.
Далее прототип необходимо проверить: дать ему эвристическую оценку и подготовить его с тестированию. Эвристическая оценка основана на 10 эвристиках Нильсена. Вкратце: 10 основных принципов проектирования интерфейсов Якоба Нильсена. Они называются “Эвристики” потому что являются общими правилами, а не конкретными указаниями.
Для оценки я прошелся по 10 эвристикам и оценил прототип по пунктам. Прототип подошел под большинство пунктов.
Теперь передо мной готовый и оцененый прототип, который нужно протестировать. Как это сделать? Для этого мы переходим на следующий шаг UX проектирования.
4. Тестирование и доработка
На этом этапе мне предстояло дать прототип в тест другим пользователям и после тестирования доработать прототип при необходимости.
Пользовательское тестирование
Важная задача тестирования- получить фидбек по прототипу. Потому что ты можешь самостоятельно ходить по нему и тебе все будет понятно, но при предоставлении его другому пользователю могут возникнуть проблемы и недопонимания.
Для тестирования я написал 3 сценария, по которым должен будет пройти пользователь, которому я дам прототип на тест. Можно скзать, что сценарий- гипотеза, которую подтверждает эксперимент(тестирование)
Во время пользовательского тестирования важно получать фидбек по прототипу, нужно слышать каждую мысль тестируемого. Для проведения тестирования я попросилдруга пройтись по этим сценариям и записывал все ее действиям на экране и мысли на видео. После я устранил недоработки, которые она заметила или недопонимания, которые возникли у нее в ходе тестирования сервиса.
Ссылка на тестирование :
Итак, после того, как пользователь пройдется по сценариям и будут устранены недопонимания, если такие имели место, прототип передается в разработку.
Заключение
Прочитав эту статью ты прошел вместе со мной путь от постановки задачи проекта до его реализации. Эти шаги- то, что делает UX дизайнер, когда начинает работу над проектом. UX это не про красивые картинки и Dribble, это про тщательный анализ, понимание потребностей пользователя и взаимодействия с ним.
Напоследок, заключительная ИНСАЙДЕРСКАЯ ИНФОРМАЦИЯ: хорошая картинка не поможет тебе решить то, зачем ты пришел. Если ты начинаешь углубляться в веб-дизайн, то обязательно начни с UX.
